PWA：Workboxでサービスワーカー導入編

f:id:masalib:20180810173837p:plain

PWAについて調べたり、実際に写経した時の自分用のメモです
サービスワーカーの概要は過去記事を参考にしてください

masalib.hatenablog.com

google先生のライブラリーのWorkboxを使って導入しました
はっきりいってPWAをおこなうならこのWorkboxしかないと思う

Workboxとは
環境構築
serviceWorker対応チェック
Workboxのインストール
Workboxのキャッシュの設定
感想

Workboxとは

Googleが提供するオープンなライブラリのコレクションで、サービスワーカーファイルの生成に使用できます。１からサービスワーカーを記載するは大変なのでGoogle先生が用意したライブラリーを使って簡単に作成できる。

画像キャッシュする場合の例

workbox.routing.registerRoute(
  /\.(?:js|css)$/,
  workbox.strategies.staleWhileRevalidate(),
);

これだけでキャッシュしてくれます

機能としては

プレキャッシング（Precaching）
Runtimeキャッシング
ルーティングのリクエスト
ストレージ
バックグラウンド同期
便利なデバッグ
sw-precacheおよびsw-toolboxより優れた柔軟性と機能セット
Googleアナリティクス対応

便利機能がありすぎる感じです。さすがgoogle先生です。

環境構築

前回と同じようにサンプルから環境をつくる

git clone https://github.com/webopt/ch9-service-workers.git
cd ch9-service-workers
npm install
node http.js

起動した画面はこちらになる
http://localhost:8080/
f:id:masalib:20180811010422j:plain

この時点では何もサービスワーカーが動いていない f:id:masalib:20180811010446j:plain

ソースの構成は以下のとおりでこちらのsw-install.jsとsw.jsを触っていく f:id:masalib:20180811010503j:plain

serviceWorker対応チェック

serviceWorkerが対応しているのか確認する
これも前回と同じです

ソース
実行結果

実際にサポートされているのがわかったので次はインストールする。
window.addEventListenerのloadイベントをとって関数にわたす（アロー関数）
navigator.serviceWorkerのオブジェクトを利用してインストールする
成功した場合はregにわたされる。失敗した場合はcatchする