如何使用 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);
        });
});