WorkboxのPrecache Filesを試す

前回：WorkboxのGetting startedを触ってみる

せっかくなので、オフラインで利用できるようにprecacheを設定していきましょう。
今回の参考記事：Precache Files

作業前の様子

前回の記事では、指定したファイルをキャッシュすることまでできています。ただし現時点ではNewworkをOfflineにすると以下のようにページが表示されません。

これをオフラインでも見れるようにしていきます。

precacheするファイルを指定する

前回作成したsw.jsに以下のようにコードを書き足します。

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');
if (workbox) {
  registerRoutes()
  workbox.precaching.precacheAndRoute([
    { url: '/scripts/app.js', revision: '383676' },
    { url: '/css/style.css', revision: '383676' },
    { url: '/index.html', revision: '383676' },
  ]);
} else {
  console.log('Oh, workbox did not load')
}

動作を確認する

先ほどのコードで各ファイルがprecacheされている（はず）なので、リトライしてみます。更新したファイルをキャッシュしてもらうために、NetworkにあるOfflineのチェック外して、リロードします。（ブラウザキャッシュも削除しておきましょう）。その後再度NetworkをOfflineにすると、オフラインでもページが表示されていることが確認できます。

まだprecacheの挙動に詳しくないので推測ではありますが、style.cssとapp.jsでfailedが出ているのはworkbox.routing.registerRouteにて先にネットワークからデータを取得しようとするstrategiesが指定されているからかなと思っています。strategies.cacheFirstを指定している画像ファイルにはエラーが出ていませんので。

今回のサンプルコード

GitHub:https://github.com/hideokamoto/workbox-practice/tree/20180321

Next: workbox-cliを試したい

どうやらこの辺りの設定をCLIやwebpack / gulpなどで設定できるようなので、次回はこの辺りを試してみたいなと思います。