新服務工作者的sw-precache激活是否可以保證緩存破壞？

Question

我正在使用sw-precache和sw-toolbox來允許離線瀏覽Angular應用程序的緩存頁面。

該應用程序通過節點快速服務器提供。

我們遇到的一個問題是index.html有時似乎沒有在緩存中更新，盡管其他資產在激活新服務工作者時已經更新。

這會使用戶使用過時的index.html ，在這種情況下，嘗試不再加載現有的版本化資產/scripts/a387fbeb.modules.js 。

我不完全確定發生了什么，因為似乎在index.html已正確更新的不同瀏覽器上具有相同的哈希值。

在一個瀏覽器過時（有問題）Index.html

（緩存為2cdd5371d1201f857054a716570c1564哈希）包括：

<script src="scripts/a387fbeb.modules.js"></script>

在其內容中。 （此文件不再存在於緩存中或遠程上）。

在另一個瀏覽器上更新（好）index.html

（使用相同的2cdd5371d1201f857054a716570c1564緩存）包括：

<script src="scripts/cec2b711.modules.js"></script>

這兩個具有相同的緩存，盡管返回給瀏覽器的內容是不同的！

我應該怎么做？ 這是否意味着當新的SW激活時， sw-precache不保證原子緩存破壞？ 怎么能保護這個呢？

如果這些有幫助，這是sw-precache 生成的service-worker.js文件。

注意 ：我意識到我可以使用remoteFirst策略（至少對於index.html ）來避免這種情況。 但我仍然想了解並找出一種使用cacheFirst策略來充分利用性能的方法。

注2 ：我在其他相關問題中看到，可以更改緩存的名稱以強制破壞所有舊緩存。 但這似乎超過了sw-precache只破壞更新內容的想法？ 這是要走的路嗎？

注3 ：請注意，即使我很難重新加載網站被破壞的瀏覽器。 該站點可以工作，因為它會跳過服務工作者緩存，但緩存仍然是錯誤的 - 服務工作者似乎沒有激活 - 我猜是因為這個特定的SW已經被激活但是在正確破壞緩存時失敗了。 隨后的非硬刷新訪問仍會看到損壞的index.html 。

Answer 1

（這里的答案特定於sw-precache庫 。詳細信息一般不適用於服務工作者，但有關緩存維護的概念可能仍適用於更廣泛的受眾。）

如果index.html的內容是由服務器動態生成的，並且依賴於通過<script>或<link>標記內聯或引用的其他資源，那么您需要通過dynamicUrlToDependencies選項指定這些依賴項。 以下是作為庫的一部分提供的app-shell-demo ：

dynamicUrlToDependencies: {
  '/shell': [
    ...glob.sync(`${BUILD_DIR}/rev/js/**/*.js`),
    ...glob.sync(`${BUILD_DIR}/rev/styles/all*.css`),
    `${SRC_DIR}/views/index.handlebars`
  ]
}

（ /shell用於代替/index.html ，因為這是用於訪問緩存的App Shell的URL。）

此配置告知sw-precache ，任何與這些模式匹配的本地文件發生更改時，都應更新動態頁面的緩存條目。

如果您的index.html不是由服務器動態生成的，而是在構建期間使用類似方法更新 ，那么確保構建過程中運行sw-precache的步驟在所有之后發生是很重要的。已經進行了其他修改和替換。 這意味着使用run-sequence類的東西來確保服務工作者生成不與其他任務並行運行。

如果上述信息對您沒有幫助，請隨時提交有關詳細信息的錯誤 ，包括您網站的網址。