やばい、iOSにネイティブアプリ要らなくなるかも。SafariもPWAに対応する可能性

[「Service Workers が in development」とWebKitが言ったから八月三日はPWA記念日](http://fujii-yuji.net/2017/08/service-workers-in-development-safari.html)
情報元はこれ．
この筆者は興奮しすぎて1駅早く降りてしまったらしいが，やちまは家にいながら1駅早く降りてしまった．

#TL;DR
ようやく**プッシュ通知，オフライン対応がSafariでもサポートする動きになった**．
ウェブアプリを本格的に始める準備をしておくべき．

（追記：）あとウェブアプリには**Firebase + Vue.js**がめっちゃ便利．

#今回の経緯について
## 前提情報
###そもそもウェブアプリとネイティブアプリの違い
散々言い古されている話なので，大雑把にだけまとめておく．

||(古典的)ウェブアプリ|ネイティブアプリ|
|:-:|:-:|:-:|
|実行速度|遅め|**速め**|
|インストール<br>更新|**不要**|必要|
|開発コスト|**低**|高|
|ストア|分散的<br>**依存なし**|**OS毎集約的**<br>依存あり|
|バックグラウンド処理|×|○|
|ハードウェアアクセス|△|○|
|ネット|要<br>**シームレス**|コンテンツにより**不要**<br>断続的|

###まともなウェブアプリに必要な技術
現在ウェブアプリがあまり開発されないのには，特にブラウザの制約によるところが大きかったと思われる（具体的にはプッシュ通知，ホーム画面アイコンなど）．
それらを上手く解決する手段に，GoogleやMozillaが推進している **PWA(Progressive Web App)** がある．
基本的に必要な要素は以下の通り．

|技術|目的|
|:-:|:-:|
|レスポンシブデザイン|多端末対応|
|Service Workers|オフライン対応<br>プッシュ通知（必須でない）|
|Web App Manifest|ホーム画面に追加|

これ以上は長くなるため後述．


##Chromeは既に，Safariもようやく

上記の通り，Service WorkersがPWAでも最重要な機能の一つである．Chromeでは既に対応済み．
![Screenshot 2017-08-07 at 09.10.20 - Edited.png](https://qiita-image-store.s3.amazonaws.com/0/17440/3991cf23-2798-e2d3-ea3c-4ef9d35824c2.png)
しかし**Safariが対応しておらず，世間的にはモチベーションの上がらない状況**であった（やちまもその一人である）．

Safariにおいて，Service Workersの実装状況 `No active development` が `Under Consideration` になったのは2015/12/04[^1]のことである．
20ヶ月という永遠とも呼べる時を経て，2017/08/03[^2]にようやく `In Development` となったわけであった．
[^1]: http://trac.webkit.org/changeset/193488/webkit/trunk/Source/WebCore/features.json
[^2]: http://trac.webkit.org/changeset/220220/webkit/trunk/Source/WebCore/features.json
　
ちなみにMicrosoft Edgeでは既に開発中[^3][^4]である．
[^3]: https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/
[^4]: https://blogs.windows.com/msedgedev/2016/07/08/the-progress-of-web-apps/

##だから何なのか
SafariにService Workersの実装がなされると，**一気にウェブアプリへの移行が進む**可能性が大きい．
ブラウザの制約が弱まり，ウェブアプリの不採用の大きな一因が取り除かれると共に，対費用効果も高まるためである．
今後に備え学んでおくべきである．

###その程度で変わらないのでは
プッシュ通知やオフライン対応はささいな違いと思われるかもしれない．
そんな地味な機能でユーザ数が変わるものか，と思われるかもしれない．
　
しかしマーケティングや経営といった視点で，**これらがないためにネイティブアプリを使う方針にしたプロジェクトは少なくない**[^5]はずである．
（特にプッシュ通知は，運営側から能動的にユーザに接触できる，メールと同等の強力な手段）

[^5]: この風潮は，この記事を読むような層こそむしろ感じにくいかもしれない．最先端に疎い大多数の企業こそがこういった傾向となっている印象である．
　
**そこが覆る**のであるから，影響は大きいと考える．

###他にも未実装の技術があるが
確かに，SafariではWeb App Manifestなどもまだである．
しかし今回，Service Workersの開発が着手されたことは，**元来独占的な風潮のiOSがウェブアプリを迎合する流れに**なった，と捉えて良いだろう．

非常に大きな動きであり，他の技術が実装されるのも時間の問題と考える．

（追記：）
多くのご指摘を頂いたが，もちろんウェブアプリに**完全に置き換わってしまうとは思わない．**
完全な上位互換とはなり得ないためである．
それから結局のところ，みんな大好き「直ちに影響はない」の類ではある．
今のうちに少しずつ準備しておくのが好ましい．

#（追記：）まず容易に変えられるところから始めよう

この記事を書いたところ，Googleの中の人である @agektmr 氏よりご補足を頂戴したので紹介する．
ネガティブに捉えずウェブの可能性が広がったと理解してほしい，既存サイトに最小限追加するだけでも良い，とのこと．

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">分かりやすい例で言えば、既存のサイトでも、manifestファイルひとつをサーバーに置いて、HTMLに参照するタグを追加するだけで、ホーム画面から起動する時の体験がグッと良くなったり（一日あればできる）<a href="https://t.co/kypRxcT4uY">https://t.co/kypRxcT4uY</a></p>&mdash; Eiji Kitamura (@agektmr) <a href="https://twitter.com/agektmr/status/894753854373351424">2017年8月8日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

それから，既成サービスの紹介も頂いている．
工数・管理コスト削減には，既成サービス活用も重要である．

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">Workboxを使えば、Service Workerの詳細を意識せずに、繰り返し使うリソースをキャッシュしてロード時間を早くしたりもできるし<a href="https://t.co/IMMSzg4Vsi">https://t.co/IMMSzg4Vsi</a></p>&mdash; Eiji Kitamura (@agektmr) <a href="https://twitter.com/agektmr/status/894756968207753217">2017年8月8日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

プッシュ通知用のサービスも多いとのこと．
確かに[PushCrew](http://www.pushcrew.jp/), [プッシュさん](https://pushsan.com/), [Pushdog](https://push.dog/)など探せば多い．
どれにするかは使い方次第だが，コーディング前提であれば後述する[Firebase](https://firebase.google.com/docs/?hl=ja)でまとめてしまうのが楽，かもしれない．

# Service Workersについて
これに関しては既に，自分が書くよりはるかにわかりやすい記事があるため，紹介に留めておく．
[Service Workerってなんなのよ (Service Workerのえほん)](http://qiita.com/kosamari/items/5e2235d26eb339a33660)
イラストと比喩を活用されており，理解の一助になると思う．

## Service Workersをより学ぶために
[Service Worker の紹介](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers?hl=ja)
Googleによるガイド

[Service Workerの基本とそれを使ってできること](http://qiita.com/y_fujieda/items/f9e765ac9d89ba241154)
図やスクリーンショット多く，コードもあり丁寧

[ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る](http://qiita.com/horo/items/175c8fd7513138308930)
実践的，即戦力的

#PWAについて
大雑把な詳細（ニホンゴムズカシイ）は以下の通り．

###基本的に必要
|技術|目的|
|:-:|:-:|
|レスポンシブデザイン|多端末対応|
|Service Workers|オフライン対応<br>プッシュ通知（必須でない）|
|Web App Manifest|ホーム画面に追加|

###あると好ましい
|技術|目的|
|:-:|:-:|
|Fetch API|Google検索対応|
|OGP|SNS対応|
|Canonical URLs|重複コンテンツ対策|
|History API|[フラグメント識別子](http://d.hatena.ne.jp/keyword/%A5%D5%A5%E9%A5%B0%A5%E1%A5%F3%A5%C8%BC%B1%CA%CC%BB%D2)回避|
|Network Information API|オフライン等表示|
|Credential Management API|ログイン簡便化|
|Payment Request API|支払い処理簡便化|

###ツール

|ツール|機能|
|:-:|:-:|
|[Lighthouse](https://developers.google.com/web/tools/lighthouse/?hl=ja)|PWA基本要素の確認|
|[Mobile Friendly Test](https://search.google.com/test/mobile-friendly)|モバイル対応の確認|
|[Pagespeed Insights](https://developers.google.com/speed/pagespeed/insights/?hl=ja)|読み込み速度確認|
|[WebPageTest](https://www.webpagetest.org/) |読み込み速度確認|
　
その他パフォーマンスやUX（[スケルトンスクリーン](https://www.webprofessional.jp/how-to-speed-up-your-ux-with-skeleton-screens/)）なども求められる．
初めて見る人はなんじゃらほいとなるだろうから，解説や詳細は以下を参照．

##PWAをより学ぶために
[Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist)
確認すべきリスト（英語）

[いまさら聞けないPWAとAMP](http://qiita.com/edwardkenfox/items/4c0b9550ffa48c1f0445)
簡潔にまとまっており読みやすい

[はじめてのプログレッシブ ウェブアプリ](https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/?hl=ja)
Googleによる実践的なコードラボ

[プログレッシブウェブアプリ詳解 ─ 過去・現在・未来](https://html5experts.jp/agektmr/20527/)
Googleの中の人による詳細な記事

#その他おさえておきたい重要な技術

ウェブアプリはむしろ開発コストが高いのでは，というご意見を頂戴したので，容易に開発できる技術を紹介しておく．
~~むしろここからが本編．~~

下記の技術を使うことで，
https://github.com/k2wanko/vuefire-demo/blob/master/src/App.vue
**たったこの程度の，スカスカな80行で**，
・　リアルタイムに反映されるtodoリスト
・　匿名ログイン
・　本人のみ編集/削除可能
・　サーバ管理は一切不要
が実現できてしまう．


##[Firebase](https://firebase.google.com/docs/?hl=ja)
![touchicon-180.png](https://qiita-image-store.s3.amazonaws.com/0/17440/04f6404c-5fca-a118-fd91-3f5efbb46f0c.png)

**チャットなどサーバレスで簡単に**作れてしまうサービス[^6]（いわゆるmBaaS）．
無料枠もそれなりにあり．
情報の早い人にとっては3週遅れくらいに感じるかもしれない，がやはり便利なものは便利なものである．トレンドも右肩上がり．
![Screenshot 2017-08-08 at 13.58.26 - Edited.png](https://qiita-image-store.s3.amazonaws.com/0/17440/d5aace05-cd9b-4c3e-8393-bdc7e78d4702.png)


[^6]: ネイティブアプリ用のサービスでは，と勘違いされる方もいるかもしれないが，ウェブアプリも容易に開発可能．つまりはウェブ・ネイティブを並行させるのも非常に容易である．
　
ウェブアプリにおいて，以下の機能が活用できる．
・　リアルタイムデータベース
・　ウェブホスティング
・　認証
・　クラウドストレージ
・　サーバ側での関数実行（いわゆるFaaS）
・　通知
[Firebaseの始め方](http://qiita.com/kohashi/items/43ea22f61ade45972881)

データベースがNoSQLで癖があるが，従来のdbは一旦忘れて以下のように考えていくと容易である．
・　仕様：ツリー状に保存される
・　仕様：参照すると，そのすべての子を含めまるごと取得
・　なるべく表示させる直前の状態に加工してから保存する
・　基本的に連番は使わない（`push()`という関数がある・必要に応じ`transaction()`も）
~~詳細はまた後日別記事にしようかとも思う．~~
　→　[結局Firebaseのdbでは何に気をつけるべきか？少しマニアックな内容も含め，わかりやすく説明する(realtime database)](https://qiita.com/Yatima/items/8a54acc8fda3e5fce741)

**ブラウザへのプッシュ通知**も対応（2017/08/08現在はChrome, Firefox, Opera Mobileのみ）．
[JavaScript Firebase Cloud Messaging クライアント アプリを設定する](https://firebase.google.com/docs/cloud-messaging/js/client)
（Thanks to @koki_cheese !）

FaaSを使って**SSR**（サーバサイドレンダリング；ページ内のJavaScriptのサーバ側での描画）もいける．
[Cloud Functions による動的コンテンツの配信](https://firebase.google.com/docs/hosting/functions)

##[Vue.js](https://jp.vuejs.org/v2/guide/)
![logoe.png](https://qiita-image-store.s3.amazonaws.com/0/17440/b4491c2d-37ef-5f60-416b-91ad3fe6743b.png)

今勢いのある，元Google社員によるJavaScriptフレームワーク．
GitHubでは63k starsと，何と**Angularを追い越し**[^7]js内2位．
![Screenshot 2017-08-08 at 13.59.55 - Edited.png](https://qiita-image-store.s3.amazonaws.com/0/17440/cd605e69-eb98-9700-1d65-155c0e714c1e.png)
[^7]: Googleトレンドで比較するとまだまだのようである．詳細についてはこの記事のコメント欄を参照．
　
**手軽に始めて大規模に拡張**していくことが容易（プログレッシブフレームワークと呼ばれる）．
`hoge.vue` という形式で，**html, js, css を一ファイルにまとめられる**のが非常に便利．
コアメンバーに日本人が2名いるなど国内コミュニティが活発で，**日本語ドキュメントが充実**しているのもポイント．

公式のdevtoolsが非常に便利（[Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)）．
[ツール集](https://jp.vuejs.org/2015/12/28/vue-cli/)や[テンプレート](https://github.com/vuejs-templates)も準備されていて，すぐに開発に取り掛かれる（**PWAのテンプレートも**ある！）．
[もうgulpやwebpackで消耗しない！vue-cliを使ったVue.js開発](http://kuroeveryday.blogspot.jp/2016/09/vue-cli.html)

###[Vuefire](https://github.com/vuejs/vuefire)
文字通り，Vue.jsでFirebaseを使いやすくする．
この章の最初に示したサンプルコードは，これを利用して実現している．
[VueFire - Firebase meets Vue.js](https://firebase.googleblog.com/2016/04/vuefire-firebase-meets-vuejs_0.html)

###[vue-material](http://vuematerial.io/#/)
文字通り，Vue.jsでMaterial Designが容易に使える．
用意されたカスタムhtmlタグを書くだけである．
[vue.jsにVue Materialを適用してみた](http://steavevaivai.hatenablog.com/entry/2017/03/13/230906)

###[vue-router](https://router.vuejs.org/ja/)
SPA（シングルページアプリケーション；よりネイティブに近い使い心地のウェブアプリ）の開発を容易にする．
個々のページを定義しておいて，リンクを貼るだけである．
動的なURLや，正規表現の活用なども可能．

###[Vuex](https://vuex.vuejs.org/ja/intro.html)
ウェブアプリ内でのデータ共有を容易にする（基本はコンポーネントという単位内でデータを扱う）．
上記Vue devtoolsは，Vuexにも対応している．

　
　
#ついでに
法人化したばかりの拙い弊社「[株式会社みんコレ](https://minkore.funa.in.net/)」のニッチなサービス「[みんコレ！](https://minkore.com/minkore)」もよろしくお願い致します（ダイマ）．
近々Firebase + Vue.jsに移行予定ですので，乞うご期待．
　
 
　
 
　
　
　
└(・∀・)┘ﾔﾘｨ!