對於ServiceWorker cache.addAll（），URL如何工作？

我看到了很多這樣的例子代碼：（單位：this Mozilla Doc略縮短版）對於ServiceWorker cache.addAll（），URL如何工作？

this.addEventListener('install', function(event) { 
    event.waitUntil(
    caches.open('v1').then(function(cache) { 
     return cache.addAll([ 
     '/sw-test/', 
     '/sw-test/index.html', 
     '/sw-test/style.css', 
     '/sw-test/gallery/', 
     '/sw-test/gallery/bountyHunters.jpg', 
     ]); 
    }) 
); 
});

我不明白你爲什麼同時添加/sw-test/和/sw-test/index.html。似乎第一個文件夾URL應該自動加載下面的所有內容，或者如果不這樣做，爲什麼它在那裏？ /sw-test/gallery/和/sw-test/gallery/bountyHunters.jpg相同。

文檔說：「Cache接口的addAll（）方法接收一組URL，檢索它們，並將結果響應對象添加到給定的緩存中」。這不是很有幫助。

我真正想要做的是緩存來自其他文件夾的幾個文件夾和所有圖像文件（各種格式）的所有* .html文件。一一列出它們很脆弱（很快就會失去同步），容易出現拼寫錯誤，而且很簡單。

後來

添加另外的閱讀後，似乎不存在一樣通配符，太傻它。 :-)但是，添加像/sw-test/這樣的文件夾有什麼意義？

來源

2017-09-13 user949300

是的，通配符不存在，當你想到它時，這實際上是完全合理的：Web服務器不公開在瀏覽器中找到的文件（例如./ gallery /），瀏覽器怎麼可能緩存文件，它不知道名稱？ Web服務器當然可以配置爲公開路徑的目錄列表，但瀏覽器本身沒有任何「從此路徑x獲取所有內容」的能力。目錄/索引列表只是一堆HTML，而不是任何文件的映射等等。

緩存/和/index.html有點令人困惑，但從Service Worker的角度來看，它們是不同的URL。 Web服務器通常被配置爲服務於相同的文件（index.html），無論您訪問哪個URL，但如果您詢問SW，它們是分開的，並且應該在緩存中具有單獨的條目。這可以輕鬆測試：部署緩存/但不包含/index.html（即使網絡服務器從/中提供index.html）並嘗試以離線模式訪問/index.html的內容。沒有運氣。

如果您完全確定您的網絡應用程序永遠不會提出任何請求，我認爲完全沒有任何理由緩存/index.html。如果你的網絡應用只知道/然後離開/index.html應該是完全沒問題的。我已經測試過這個，它完美地工作。如果有人有關於此事的更多信息，請糾正我！

需要注意的可能是有用的：SW可能被配置爲將/和/index.html視爲相同。因此，無論何時請求緩存/並提供服務都是可能的。我想有些庫有這種內置的功能。

來源

2017-09-14 07:35:01 pate

建立在上面的答案的答案：sw-precache和sw-toolbox是兩個庫，在實現服務工作者時通常建議使用這些通用功能。

來源

2017-09-18 10:31:05

對於ServiceWorker cache.addAll（），URL如何工作？

回答

相關問題