2017-06-19 140 views
8

我使用服務人員和sw-toolbox庫。我的PWA緩存除API查詢以外的所有內容(圖像,css,js,html)。但是如果某些文件有一天會改變,會怎樣呢?或者,如果service-worker.js將被更改。 應用程序應該如何知道文件中的更改?如何更新PWA中的服務工作者緩存?

我的服務worker.js:

'use strict'; 
importScripts('./build/sw-toolbox.js'); 

self.toolbox.options.cache = { 
    name: 'ionic-cache' 
}; 

// pre-cache our key assets 
self.toolbox.precache(
    [ 
    './build/main.js', 
    './build/main.css', 
    './build/polyfills.js', 
    'index.html', 
    'manifest.json' 
    ] 
); 

// dynamically cache any other local assets 
self.toolbox.router.any('/*', self.toolbox.cacheFirst); 

// for any other requests go to the network, cache, 
// and then only use that cached resource if your user goes offline 
self.toolbox.router.default = self.toolbox.networkFirst; 

我不知道什麼是PWA更新緩存中的常用方法。也許PWA應該在後臺發送AJAX請求並檢查UI版本?

回答

4

AFAIK sw_toolbox沒有網絡更新緩存策略。這真的是你想要我想的。 您想要修改緩存 - 網絡競爭策略 - >https://jakearchibald.com/2014/offline-cookbook/#cache-network-race 而不是讓失敗者消失,一旦網絡響應,您將需要更新客戶端。這有點高級,我有時間或時間在這裏解釋。 我會發布消息給客戶,讓它知道有更新。您可能想要提醒用戶更新或者只是強制更新。 我不認爲這是一個邊緣情況,而是一個非常常見的但高級的場景。我希望很快能夠發佈更詳細的解決方案。

3

有一個很好的解決方案寫在here他陳述(簡而言之)要麼不使用緩存優先策略,要麼更新顯示「重新加載最新更新」的UX模式。

1

我在沒有使用任何庫的情況下處理服務工作人員,而我最終提出的解決方案涉及到一些服務器端代碼和一些客戶端。簡而言之

首先變量的策略,你需要和地方:

  1. 在服務器端,有一個「服務人員版」變量(將這個在數據庫或配置文件,如果你是使用類似於PHP的東西,將立即在服務器端更新,而無需重新部署。我們稱之爲serverSWVersion
  2. 在緩存的JavaScript文件之一(我有一個JavaScript文件專用於此)有一個全局變量,將也是「服務工作者版本」,我們稱之爲clientSWVersion

現在如何使用兩個:

  1. 只要在頁面上一個人的土地,從AJAX請求到服務器,以獲得serverSWVersion值。將此值與clientSWVersion值進行比較。

  2. 如果值不同,則表示您的網絡應用程序版本不是最新的 。

  3. 如果是這種情況,請取消註冊服務工作者並刷新頁面,以便服務工作者將被重新註冊並且新文件將被緩存。

當新的文件都可以

  1. 更新serviceSWVersionclientSWVersion變量和上傳到服務器適用什麼實際做。

  2. 當一個人再次訪問時,服務人員應該重新註冊並且所有的緩存文件都將被檢索。

我已經提供了一個基於php服務器端的代碼,這是我在實施該策略時使用的。它應該顯示你的原則。只需將「運行」文件夾放在PHP服務器的htdocs文件夾中,它就可以工作,而無需執行其他任何操作。我希望你覺得它有用...並記住你可以使用數據庫而不是配置文件來存儲服務器端服務工作變量,如果您使用其他服務器而不是php:

帶有代碼的Zip文件: ServiceWorkerExercise.zip

0

change self.toolbox.router.any('/ ',self.toolbox.cacheFirst); self.toolbox.router.any('/',self.toolbox.fastest);

相關問題