実際にService Workerを使うなら、Workboxが便利そうかもしれないので試してみた

Googleの作ったWorkbox

developers.google.com

Workboxの意義などについては下記のQiitaの記事が分かりやすいと思ったので貼っておきます。

ServiceWorkerを簡単に書けるworkbox-swの使い方 - Qiita

Workbox getting started

入門するための記事を試していきます
(基本的に下に書いていくコードは、下記ポストを引用・参考にしています)

Get Started | Workbox | Google Developers

service-worker.js を呼び出すためのindex.htmlを書く

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Workbox Sample</title>
  </head>

  <body>
    <div>workbox sample</div>
    <script>
    // Check that service workers are supported
    if ('serviceWorker' in navigator) {
      // Use the window load event to keep the page load performant
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js');
      });
    }
    </script>
  </body>
</html>

service-workder.jsは下記のような感じ

console.log('Hello from service-worker.js');

なお、ドキュメント内にも書いてあるが、 Google Chrome Dev tools内の Upload on reloadチェックボックスをクリックすると、リロードしたタイミングで新しいservice workerを呼び出してくれるので開発がしやすくなります。

f:id:shinshin86:20191026094355p:plain

まずは基本的なコードを書いたが、ここからWorkboxを導入していく

Workbox-sw.js をservice worker内でimportすれば、Workbox自体は使えるようになるようだ。

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}

googleのコードそのままだが、これでservice-worker.js 内でworkboxが読み込まれる。

Workboxを使ってキャッシュを行う

Workboxで提供される主な機能の1つとして、キャッシュの動作を設定する仕組みがあるよう具体的にはWebページからの要求をリッスンし、その要求をキャッシュして応答する必要があるかどうかを設定できる

下記はルート直下のファイル(index.html)と全てのJSファイルをキャッシュさせるサンプル

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);

  workbox.routing.registerRoute(
    "/",
    new workbox.strategies.NetworkFirst()
  );
  workbox.routing.registerRoute(
    /\.js$/,
    new workbox.strategies.NetworkFirst()
  );
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}

また、キャッシュできているかを確認するためにindex.htmlに下記のようなコードを追加

diff --git a/index.html b/index.html
index a5ed2d9..01ee316 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,12 @@

   <body>
     <div>workbox sample</div>
+    <div>
+      <button id="target">
+        Click here
+      </button>
+    </div>
+    <script src='scripts/jquery-3.4.1.min.js'></script>
     <script>
       // Check that service workers are supported
       if ('serviceWorker' in navigator) {
@@ -15,6 +21,10 @@
           navigator.serviceWorker.register('/service-worker.js');
         });
       }
+
+      $( "#target" ).click(function() {
+        alert( "Handler for .click() called." );
+      });
     </script>
   </body>
 </html>