服務人員：如何更新服務器上的文件更改緩存？

Question

你使用什麼樣的緩存策略？我閱讀了離線手冊，最簡單的策略是緩存靜態內容，並省略API調用。

這一戰略似乎是這樣的：

1. 檢查請求是否已在緩存中
2. 如果不加要求，響應對緩存
3. 返回響應

如果在服務器端文件已更改，如何更新緩存？目前客戶端總是獲得緩存的結果。

這裏是我的緩存策略代碼：

// You will need this polyfill, at least on Chrome 41 and older. 
 
importScripts("serviceworker-cache-polyfill.js"); 
 

 
var VERSION = 1; 
 

 
var CACHES = { 
 
    common: "common-cache" + VERSION 
 
}; 
 

 
// an array of file locations we want to cache 
 
var filesToCache = [ 
 
    "font-cache.html", 
 
    "script.js", 
 
]; 
 

 
var neededFiles = [ 
 
    "index.html" 
 
]; 
 

 
var errorResponse = function() { 
 

 
    return new Response([ 
 
      "<h2>Failed to get file</h2>", 
 
      "<p>Could not retrive response from cache</p>" 
 
     ].join("\n"), 
 
     500 
 
    ); 
 
}; 
 

 
var networkFetch = function(request) { 
 

 
    return fetch(request).then(function(response) { 
 

 
     caches.open(CACHES["common"]).then(function(cache) { 
 

 
      return cache.put(request, response); 
 
     }); 
 

 
    }).catch(function() { 
 
     console.error("Network fetch failed"); 
 
     return errorResponse(); 
 
    }); 
 
} 
 

 
this.addEventListener("install", function(evt) { 
 
    evt.waitUntil(
 
     caches.open(CACHES["common"]).then(function(cache) { 
 

 
      // Cache before 
 
      cache.addAll(filesToCache); 
 
      return cache.addAll(neededFiles); 
 
     }) 
 
    ); 
 
}); 
 

 
this.addEventListener("activate", function(event) { 
 

 
    var expectedCacheNames = Object.keys(CACHES).map(function(key) { 
 
     return CACHES[key]; 
 
    }); 
 

 
    console.log("Activate the worker"); 
 

 
    // Active worker won"t be treated as activated until promise resolves successfully. 
 
    event.waitUntil(
 
     caches.keys().then(function(cacheNames) { 
 
      return Promise.all(
 
       cacheNames.map(function(cacheName) { 
 
        if (expectedCacheNames.indexOf() === 
 
         -1) { 
 
         console.log(
 
          "Deleting out of date cache:", 
 
          cacheName); 
 

 
         return caches.delete(cacheName); 
 
        } 
 
       }) 
 
      ); 
 
     }) 
 
    ); 
 
}); 
 

 
self.addEventListener("fetch", function(event) { 
 
    console.log("Handling fetch event for", event.request.url); 
 

 
    event.respondWith(
 

 
     // Opens Cache objects 
 
     caches.open(CACHES["common"]).then(function(cache) { 
 
      return cache.match(event.request).then(function(
 
       response) { 
 

 
       if (response) { 
 
        console.log("Found response in cache", response); 
 

 
        return response; 
 
       } else { 
 

 
        return networkFetch(event.request); 
 
       } 
 
      }).catch(function(error) { 
 

 
       // Handles exceptions that arise from match() or fetch(). 
 
       console.error(
 
        " Error in fetch handler:", 
 
        error); 
 

 
       return errorResponse(); 
 
      }); 
 
     }) 
 
    ); 
 
});

Answer 1

你可能熟悉很大傑夫Posnick的解決方案 - sw-precache。
策略使用的有：

1. 咕嘟咕嘟正在生成服務工作者與校驗
2. 服務人員登記（用他自己的校驗）
3. 如果添加了文件/更新時，SW文件更改
文件
4. 下一次訪問時，SW會檢查其校驗和是否不同，因此它會使用更新後的文件再次註冊本身

您可以通過後端自動執行此流程任何你想要的方式:)

他this article

Answer 2

更好的形容這是我使用緩存的代碼。它獲取資源並緩存並提供服務。

this.addEventListener("fetch", function(event) { 
    event.respondWith(
    fetch(event.request).then(function(response) { 
     return caches.open("1").then(function(cache) { 
     return cache.put(event.request, response.clone()).then(function() { 
      return response 
     }) 
     }) 
    }).catch(function() { 
     return caches.match(event.request) 
    }) 
) 
}) 

Answer 3

您必須更改您的服務工作者文件。據Introduction to Service Worker：

當用戶瀏覽到您的網站時，瀏覽器會嘗試重新下載在後臺中定義的服務人員腳本文件。如果服務工作者文件中有一個字節的差異與目前的差異，則認爲它是「新的」。

因此，即使您只需要更改靜態資源，您也必須更新服務工作文件，以便註冊更新緩存的新服務工作器。 （您需要確保在您的activate處理程序中刪除以前的任何緩存。）@Karol Klepacki的答案提出了一種自動執行此操作的方法。

或者，您可以在服務工作人員自身中實施邏輯，以定期檢查緩存資源的更改並適當更新條目。