ServiceWorkerのインストール時のキャッシュ

Question

インストール時に動的ページをキャッシュする方法を理解しようとしていますか？私の現在のページは/product/1/view

self.addEventListener('install', function (event) { 
event.waitUntil(
     caches.open('kiosk-assets').then(function (cache) { 
      return cache.addAll([ 
       '/' // This is the problem it caches the origin path i need the current page cached. See register below 
       '/css/product.min.css' 
      ]) 
     }), 
.... 

ここに私の労働者を登録する方法です。これは、私は、これは可能性があることができれば、私は登録方法を変更することができます/product/1/view

window.navigator.serviceWorker.register('/sw.js', {scope: `/product/${id}/view`}) 

に登録されています。

Answer 1

私はあなたがonInstall

少なくとも、それ自体によってサービスワーカーとのことを行うことができます、とは思いません。簡単な理由から、サービスワーカーがインストールされている間、どのクライアントが制御/制御しているのかはわかりません。

また、アクティブなサービススタッフであっても、DOMを制御できません。 したがって、現在のURLが何であるかを知る方法はありません。

あなたはそれをインストールしているときに、労働者に対してpingを実行し、クライアントが必要activate上のURLをキャッシュし、またはfetchイベント

または、

ことができます。

厳密onInstallを登録ページをキャッシュすることはあなたが必要なのは、それから、

が労働者に

if ('serviceWorker' in navigator) { 
navigator.serviceWorker.register('sw.js') 
    .then(function (success) { 
     console.log('scope', success.scope); 
     if (success.installing) { 
      let sw = success.installing; 
      sw.addEventListener('statechange', function (event) { 
       if (event.target.state == 'installed') { 
        let loc = window.location.toString(); 
        let message = { 
         action: 'cache', 
         location: loc 
        } 
        sw.postMessage(message); 
       } 
      }) 
     } 
    }); 
} 

を登録ページからpostMessage経由でメッセージを送信し、労働者の中にmessageイベントを使用する場合には、 URLをキャッシュする

Answer 2

データの静的および動的キャッシングには、おそらくsw-precacheライブラリを使用する必要があります。

ビルド環境（Gulp、Grunt、Webpack）と統合してください。 Sw-precacheはすべての静的ファイルを提供し、それに応じて更新します。あなたからSWを登録しているhttps://github.com/GoogleChrome/sw-precache