如何使用 Service Workers 和 Cache Api 從基本 url 離線加載網站？

Question

當您訪問此網站https://bugs.stringmanolo.ga/index.html 時，在瀏覽 main.js 文件時會調用 ff.js 文件中的方法來緩存大量資源。 因此，下次您登陸 Web 時，文件會直接從瀏覽器緩存中獲取，而無需提出任何請求。

這意味着如果您之前訪問過我的網站，您可以在沒有互聯網連接的情況下再次加載它。

問題是，這僅在您直接對地址欄中的 index.html 文件計時時才有效。 瘸。

這個網址在離線加載時不起作用。 https://bugs.stringmanolo.ga

另一個工作正常。 https://bugs.stringmanolo.ga/index.html

當請求基本 url 時，如何使 Web 緩存也加載 index.html？

Answer 1

在您的緩存數組列表中添加一個根條目。 就是這樣。

var CACHELIST = [
    "/",
    // rest of resource list
];

self.addEventListener("install", function (event) {
    console.log("Installing the Service Worker!");
    caches.open(CACHENAME)
        .then(cache => {
            cache.addAll(CACHELIST);
        });
});