ローカルでの環境構築が終わり、実際にWebサイトをPWA(Progressive Web Application)にしていく。
現在複数のブラウザでWebサイトをスマートフォンのホームに追加することができるようになったが、単純にホームに追加しても、追加されたアイコンはサイトを表したアルファベットで表示され、アイコンをタップしても、ブラウザで開かれてしまうだけで、アドレスバーも表示されてしまう。
Webサイトを簡単にアプリケーションっぽく見せるだけならば、headタグ内にmetaタグとmanifest.jsonを読み込むようにlinkタグを入力するだけで良い。 ```html ``` manifest.jsonについてはGoogleの[マニュフェストのドキュメント] を読むのが一番分かりやすいと思う。 manifest.jsonでアイコンや表示する向き等が指定でき、これだけで一見するとアプリケーションのようになる。
しかし、PWAとしての機能を十分に発揮するためにはService Workerが欠かせない存在となっている。 Service Workerにより、通常のキャッシュよりも早いレスポンスでサイトが表示することが可能になり、またオフライン時でもキャッシュから表示できるようになる。 Service Workerはブラウザとは別にバックエンドで動作するプロキシサーバのようなもので(本当か？)、エンゲージメントを向上させるためのプッシュ通知も動作させることができる。
Service WorkerについてもGoogleの[ServiceWrokerの紹介]を読み、sampleやその他技術系のサイトを参照することが良い。
ServiceWorkerは改竄を防ぐためにSSL/TLSに対応しているサイトでしか動作しない(例外的にlocalhostは動作する)ため、まず登録が可能かどうかを判断する必要がある。 ```javascript if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw.js').then(function(registration) { console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(error) { console.log('ServiceWorker registration failed: ', error); }); } ``` scriptタグでカレントディレクトリにあるsw.js(ServiceWorkerの本体を記述したスクリプト)を登録する。 swが監視可能な範囲は登録したカレントディレクトリを含めるため、スコープで範囲を指定することで監視の範囲を狭めることができる。 ```javascript navigator.serviceWorker.register('./sw.js', { scope: '/home' }) ``` この場合ルートディレクトリは監視されず、/home以下のページの動作を管理することになる。
まだ良く理解が及んでいないため、sw.jsのコードは[Googleのサンプル]を使う。
定数の配列、PRECACHE_URLSにはキャッシュするディレクトリやファイルに適宜変更する。 (RUNTIMEでディレクトリ配下が全てキャッシュされてしまったりするので、除外設定がよく分かっていない)
ローカルで立てたWebサーバに簡単なコンテンツ(html, css, js)を追加し、ページ速度の向上がどれほどか、またオフラインで動作するかを試す。
今回Chromeで検証を行うためF12キーでデベロッパーツールを開き、Networkタブで監視を行う。 回線速度を一定にするため、OnlineをSlow 3Gに変更し、また初めてページを訪れることを想定しキャッシュは使わないようにDisable cacheにチェックをつける。Service Workerはページのディレクトリ配下のコンテンツを全てキャッシュすることとする(それしか方法が分からない)。
結果として初回接続時は14\~16秒ほどかかり、Service Workerのキャッシュ読み込みを使うと2, 3秒にまで短縮することができた。 Service Workerなしの通常キャッシュ読み込みでは6\~7秒ほどかかっていたので、通常キャッシュのさらに半分のレスポンスで表示することが可能になった。
今回ディレクトリ配下を全てキャッシュしたが、むやみなキャッシュはユーザのストレージの圧迫に繋がるため、静的なページを構成するhtmlやcss、js、image程度に抑えておき、高頻度で変更される画像類はキャッシュしない方が良い。 [マニュフェストのドキュメント]: https://developers.google.com/web/fundamentals/web-app-manifest/?hl=ja [ServiceWorkerの紹介]: https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja [Googleのサンプル]: https://googlechrome.github.io/samples/service-worker/basic/
Webサイトを簡単にアプリケーションっぽく見せるだけならば、headタグ内にmetaタグとmanifest.jsonを読み込むようにlinkタグを入力するだけで良い。 ```html ``` manifest.jsonについてはGoogleの[マニュフェストのドキュメント] を読むのが一番分かりやすいと思う。 manifest.jsonでアイコンや表示する向き等が指定でき、これだけで一見するとアプリケーションのようになる。
しかし、PWAとしての機能を十分に発揮するためにはService Workerが欠かせない存在となっている。 Service Workerにより、通常のキャッシュよりも早いレスポンスでサイトが表示することが可能になり、またオフライン時でもキャッシュから表示できるようになる。 Service Workerはブラウザとは別にバックエンドで動作するプロキシサーバのようなもので(本当か？)、エンゲージメントを向上させるためのプッシュ通知も動作させることができる。
Service WorkerについてもGoogleの[ServiceWrokerの紹介]を読み、sampleやその他技術系のサイトを参照することが良い。
ServiceWorkerは改竄を防ぐためにSSL/TLSに対応しているサイトでしか動作しない(例外的にlocalhostは動作する)ため、まず登録が可能かどうかを判断する必要がある。 ```javascript if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw.js').then(function(registration) { console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(error) { console.log('ServiceWorker registration failed: ', error); }); } ``` scriptタグでカレントディレクトリにあるsw.js(ServiceWorkerの本体を記述したスクリプト)を登録する。 swが監視可能な範囲は登録したカレントディレクトリを含めるため、スコープで範囲を指定することで監視の範囲を狭めることができる。 ```javascript navigator.serviceWorker.register('./sw.js', { scope: '/home' }) ``` この場合ルートディレクトリは監視されず、/home以下のページの動作を管理することになる。
まだ良く理解が及んでいないため、sw.jsのコードは[Googleのサンプル]を使う。
定数の配列、PRECACHE_URLSにはキャッシュするディレクトリやファイルに適宜変更する。 (RUNTIMEでディレクトリ配下が全てキャッシュされてしまったりするので、除外設定がよく分かっていない)
ローカルで立てたWebサーバに簡単なコンテンツ(html, css, js)を追加し、ページ速度の向上がどれほどか、またオフラインで動作するかを試す。
今回Chromeで検証を行うためF12キーでデベロッパーツールを開き、Networkタブで監視を行う。 回線速度を一定にするため、OnlineをSlow 3Gに変更し、また初めてページを訪れることを想定しキャッシュは使わないようにDisable cacheにチェックをつける。Service Workerはページのディレクトリ配下のコンテンツを全てキャッシュすることとする(それしか方法が分からない)。
結果として初回接続時は14\~16秒ほどかかり、Service Workerのキャッシュ読み込みを使うと2, 3秒にまで短縮することができた。 Service Workerなしの通常キャッシュ読み込みでは6\~7秒ほどかかっていたので、通常キャッシュのさらに半分のレスポンスで表示することが可能になった。
今回ディレクトリ配下を全てキャッシュしたが、むやみなキャッシュはユーザのストレージの圧迫に繋がるため、静的なページを構成するhtmlやcss、js、image程度に抑えておき、高頻度で変更される画像類はキャッシュしない方が良い。 [マニュフェストのドキュメント]: https://developers.google.com/web/fundamentals/web-app-manifest/?hl=ja [ServiceWorkerの紹介]: https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja [Googleのサンプル]: https://googlechrome.github.io/samples/service-worker/basic/
同じカテゴリー（PWA）の記事
