安裝ServiceWorker緩存

我想弄清楚如何在安裝時緩存動態頁面？我目前的頁面是/product/1/view安裝ServiceWorker緩存

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`})

我可以改變我如何註冊，如果這可能是一種可能性。

來源

2017-08-05 Tom

你從哪裏註冊SW？並且，註冊是否成功，您所發佈的內容如上？您是否可以記錄範圍並查看其範圍是否符合您的要求？ –

在安裝事件中，sw不知道它可能控制什麼，甚至在註冊和激活之後，它是否控制DOM來獲取當前url。您可能必須在註冊員和工作者之間建立消息線程並緩存消息 –

我不認爲，你能做到這一點onInstall

至少不是通過自身的服務人員。出於簡單的原因，在安裝服務人員的同時，它不知道它正在控制/將控制哪些客戶端。

此外，即使是一個活躍的serviceworker也無法控制DOM。因此，它無法知道當前的網址是什麼。

您可以緩存在activate的URL，或fetch事件

，或者

你需要在客戶端ping通的工人，而它正在安裝它。

如果嚴格緩存登記頁面onInstall是所有你需要的話，

通過postMessage從註冊工人

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); 
       } 
      }) 
     } 
    }); 
}

的頁面發送一條消息，工人內使用message事件，以緩存url

來源

2017-08-05 10:16:14

您應該使用sw-precache庫來靜態和動態緩存數據。

集成它與你建立環境（Gulp，Grunt，Webpack）。 Sw-precache服務所有靜態文件並相應地進行更新。 SW-預緩存具有填補滿足您的需要

您可以瞭解這裏的圖書館runtime-caching選項 - https://github.com/GoogleChrome/sw-precache

來源

2017-08-05 11:31:30

安裝ServiceWorker緩存

回答

相關問題