如何緩存胸圍sw工具箱？

我一直在與服務人員和sw-toolbox玩轉。兩者都是很好的方法，但似乎有其弱點。如何緩存胸圍sw工具箱？

我的項目開始使用Google的服務人員方法（link）。我看到這一點的方式是，您必須手動更新緩存清除的版本號。我也可能是錯的，但我不認爲用戶訪問過的頁面不會被緩存。

相比SW-工具箱方法，我需要補充的是下面的代碼：

self.toolbox.router.default = self.toolbox.networkFirst; 

self.toolbox.router.get('/(.*)', function (req, vals, opts) { 
    return self.toolbox.networkFirst(req, vals, opts) 
     .catch(function (error) { 
      if (req.method === 'GET' && req.headers.get('accept').includes('text/html')) { 
       return self.toolbox.cacheOnly(new Request(OFFLINE_URL), vals, opts); 
      } 
      throw error; 
     }); 
});

然後緩存頁面的問題將得到解決。這是我的問題：在將sw-toolbox應用到我的項目之後，除非我使用開發工具清除它，否則舊的服務工作人員不會被清除或替換爲新的服務工作人員。

任何想法如何解決這個問題？

來源

2017-06-21 oninross

您並不是在尋找[ServiceWorkerRegistration.update（）]（https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update）？ –

但是通過將其包含在文件中，每次都會強制更新SW？ – oninross

@oninross'update'方法只會在服務工作者發生變化（例如，字節不同）時更新。但這並不一定能解決您的問題，因爲更新只會安裝新的服務人員。它仍然無法激活，直到舊的不再使用，或者你使用類似'skipWaiting'的方法（見下面的答案）。 –

這裏是我的問題：應用SW-工具箱到我的項目後，老服務人員沒有得到清除或用新的更換，除非我去開發者工具將其清除。

瀏覽器在每次請求服務工作者作用域中的資源時檢查對服務工作器文件的更新。如果服務工作者文件中存在字節差異，則瀏覽器將安裝新的服務工作者。您只需要在開發工具中手動更新服務工作人員，因爲該應用程序仍在運行，而瀏覽器不想在舊服務工作人員仍在使用時激活新的服務工作人員。

如果您關閉與服務人員（如用戶會離開你的應用程序時）相關聯的所有頁面，瀏覽器就可以激活你的頁面打開下一次新的服務人員。

如果要強制新的服務人員接管，可以將self.skipWaiting();添加到install事件中。 Here is some documentation with an example。

你可以學習只是你需要了解從this post by Jake Arichbald服務工人的生命週期中的一切。

至於緩存&緩存管理得好，像SW-工具箱中的工具將處理的緩存清除你。實際上，Workbox是一個新工具，用於替代sw-toolbox的sw-precache。它還將處理高速緩存清除和高速緩存管理（通過比較文件哈希&設置/跟蹤資源到期日期）。

一般來說，你應該總是使用一個工具，如Workbox寫你的服務人員。用手寫字很容易出錯，你可能會錯過角落案例。

希望有所幫助。

P.S.如果最終沒有使用skipWaiting，而只是在頁面關閉時更新，&由用戶重新打開，您仍然可以啓用自動更新以進行開發。在Chrome的開發工具中，應用程序>服務人員有一個更新重新加載選項來自動更新服務工作者。

來源

2017-06-21 17:11:22

當您更改服務工作者，需要清除以前版本的緩存，你應該做的，我不知道是否有sw_toolbox高速緩存禁用內置的。通常，與在激活事件處理程序。

這裏的最佳做法是命名包含sw版本號的緩存。下面是一些關於服務人員緩存的在線課程示例代碼，可能會幫助您開始：

self.addEventListener("activate", event => { 

console.log("service worker activated"); 

//on activate 
event.waitUntil(caches.keys() 
    .then(function (cacheNames) { 

     cacheNames.forEach(function (value) { 

      if (value.indexOf(config.version) < 0) { 

       caches.delete(value); 

      } 

     }); 

     return; 

    }) 
);

}）;

來源

2017-06-21 12:51:04

如何緩存胸圍sw工具箱？

回答

相關問題