如何使用 Service Worker 和缓存 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 时也加载 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);
        });
});