javascript - 如何使用 Service Worker 和 Cache Api 从基本 url 离线加载网站？

Question

当您访问此网站https://bugs.stringmanolo.ga/index.html时，在 main.js 文件中导航时会调用 ff.js 文件中的方法来缓存大量资源。因此，下次您登陆网络时，文件会直接从您的浏览器缓存中获取，而无需发出任何请求。

这意味着如果您之前访问过我的网站，您可以在没有互联网连接的情况下再次加载它。

问题是，这仅在您直接对地址栏中的 index.html 文件进行计时时才有效。瘸。

Thid url 无法离线加载。 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);
        });
});