PWAを開発する上での考慮事項メモ

本記事は記録用です。
開発していく上で考慮しなければいけない要素を述べたものです。

テーマ

Androidでフルスクリーンでサクサク動くPWA
※PWAが何かについては他の記事を参照してください。

課題

１.トップページにアクセスした際に複数ページをcacheしにいく。

２.新しいコンテンツをcahceするときは古いcacheをきちんと削除する。

実装

1
とりあえず下記レポジトリからhttp-serverモジュールで動く静的ファイル一式をgit clone

2
sever.jsがサーバ立ち上げファイルなので、node ./server.js若しくはnpm run start

さてこれでサンプルの環境が整いました。
上記で挙げた課題を一つ一つ潰していきましょう。

まずこの写真のように、ブラウザキャッシュとSWのキャッシュが混合しているとSWのキャッシュだけを追いにくいので、DevToolのNetworkタブからDisable cacheしました。

課題1

今のままだとトップページにしかアクセスしていないことになり、他のページをキャッシュできていません。今回はローカルサーバにアクセスしているのでオフラインでも見れますが、実際はオフラインではトップページしか見れないことになります。

上の写真のように、ページは４つあり、それぞれのURLは
/
/work
/about
/contact
です。
DevToolのApplicationのCache Storageを見てみるとやはり/とそれに紐づくimgやcss,js以外はCacheできていません。

なのでinstallイベントの中をいじっていきたいと思います。

  installFilesEssential = [
    '/',
    '/manifest.json',
    '/css/styles.css',
    '/js/main.js',
    '/js/offlinepage.js',
    '/images/logo/logo152.png'
  ].concat(offlineURL),
  installFilesDesirable = [
    '/favicon.ico',
    '/images/logo/logo016.png',
    '/images/hero/power-pv.jpg',
    '/images/hero/power-lo.jpg',
    '/images/hero/power-hi.jpg'
  ];


self.addEventListener('install', event => {

  console.log('service worker: install');

  // cache core files
  event.waitUntil(
    installStaticFiles()
    .then(() => self.skipWaiting())
  );

});

こいつをこう変えます。

  installFilesEssential = [
    '/',
    '/work',
    '/about',
    '/manifest.json',
    '/css/styles.css',
    '/js/main.js',
    '/js/offlinepage.js',
    '/images/logo/logo152.png',
    '/images/circuit.jpg'
  ].concat(offlineURL),
  installFilesDesirable = [
    '/favicon.ico',
    '/images/logo/logo016.png',
    '/images/hero/power-pv.jpg',
    '/images/hero/power-lo.jpg',
    '/images/hero/power-hi.jpg',
    '/images/hero/workspace-lo.jpg',
    '/images/hero/workspace-hi.jpg'
  ];

具体的にいうと下のURLを追加しました。

/work
/images/hero/workspace-io.jpg
/images/hero/workspace-hi.jpg
/images/circuit.jpg

これでもう一度最初からトップページにリクエストしてinstallイベントを発火させて今追加したURLのCacheも取れているか確認をしたいので前のCacheは一旦全部消しましょう。

はい

ここでトップページへアクセスすると、Networkタブで先ほど追加した/workなどのCacheが取得されているのが分かります。

実際に/workにアクセスしてみて、Networkタブを見てみると/workはServiceWorkerのCacheから取得されているのが分かります。