以前書いた、
という記事で、PWA勉強しています、ということを書きました。
その後、
という書籍を読みました。
なんとなく、理解できた部分もあるので、メモを兼ねて書いてみます。
チュートリアル
上の記事でも書いていますが、上記サイトを使っています。
PWAとは
Progressive Web Appsの略です。
日本語では「プログレッシブウェブアプリ」と呼ばれます。
いわゆる「アプリ」と呼ぶ場合、方法として以下の二つが対比されます。
- ネイティブアプリ
- Webアプリ
Webアプリは、ブラウザの中でしか実行できません。その代わり、インストールが不要です。
ネイティブアプリは、様々なことができます。その代わり、インストール*1が必要です。
どちらにも明確なメリットがありますが、PWAは両者のいいとこどりをしたようなもので、以下のような特徴があります。
- Web画面から配布できる
- デスクトップ、ホーム画面から起動できる（アイコンも付けられる）
- ベースはWebなので、クロスプラットフォーム対応が容易
- オフラインでも利用可能
- プッシュ通知、バックグラウンド同期等が可能
PWAの構成
チュートリアルが終わった後のフォルダ構成は、以下の通りです。
server.pyは、筆者開発環境のサーバー起動用なので、普通は不要です。
Service Worker
リンク先は日本語訳されています。
上記ページに、役割がかなり詳しく書かれています。
まず、
Service Worker はブラウザが Web ページとは別にバックグラウンドで実行するスクリプト
とある通り、Webページを開いていなくても、バックグラウンドで動かせるスクリプトです。
なお、キャッシュ等も、Service Workerを使って行います。
すでに現在、プッシュ通知やバックグラウンド同期が提供されています。
とのことで、PWAにおいて非常に重要な役割を果たしています。
実装上は、service-worker.jsのような、JavaScriptのファイルとして作成されています。
ページのルートに配置するもののようです。
App Shell
ここに説明があります。
アプリの最低限のHTML、CSS、JavaScript等を指します。
アプリの中で、比較的変更の少ない部分です。
この部分をキャッシュして、データと切り離すという設計思想*2です。
今回のフォルダだと、service-worker.js以外はすべてApp Shellとしてキャッシュされます。
対応状況
※ブログ執筆時点（2018/06/16）時点で、筆者が調べた情報です。
Chrome、FireFoxは、対応済みのようです。
Edgeでは、一部対応ぐらいの状況のようです。
Microsoft StoreというかUWP*3上では対応状況が異なるようで、WinRTにアクセスできる、みたいなことも書かれています。
iOSやSafariは、対応は遅れ気味ですが、行うのは確定のようです。
キャッシュの考え方
上で軽く触れましたが、PWAにおけるキャッシュは、App Shell部分とデータ部分で分けます。
チュートリアルでは、キャッシュの更新条件をservice-worker.jsに記載しています*4。
条件は、
activate時に、指定したキー以外のキャッシュを全削除fetch時、Webページに対するリクエストなら、そのタイミングでキャッシュを設定
となっています。
キャッシュ設定は、
var dataCacheName = 'weatherData-v1'; var cacheName = 'weatherPWA-step-7-1'; var filesToCache = [ '/', '/index.html', '/scripts/app.js', ... ]
のような形で記載し、先頭二つがキャッシュのキーです。
詳細は、チュートリアルを通すとよいと思います。
activateのタイミングで、App Shell部分が変わっていたらキャッシュをクリアするというのは、それで良いと思います。
データ部分は、アプリの要件によって実装は変わるのだろうと思います。
おわりに
実際に作らないと分からないなぁ、という気持ちが強くなりました。
とはいえ、作る前にこういう仕組みを知ることは悪くないです。
単に応答の良いWebアプリを作る、というだけではなく、JavaScriptで完結するようなツールなどあれば、便利だろうなと思いました。
プッシュ通知、バックグラウンドの仕組みについては、英語のドキュメントを読んだりして学ぶ必要があります。
未知の技術に触れるのは良い。そう思いました。
