Service Worker 缓存文件但不离线加载答案

【问题标题】：Service worker caches files but doesn't load offlineService Worker 缓存文件但不离线加载
【发布时间】：2017-12-26 18:40:27
【问题描述】：

这是我第一次尝试使用 Service Worker，我确信我在做一些愚蠢的事情。

我为我正在处理的 WordPress 主题设置了一个服务人员。它位于/public_html/wp-content/themes/framework/assets/scripts/service-worker.js。
我已经通过.htaccess 文件设置了标题Servie-Worker-Allowed: "/"。
我使用sw-toolbox 让事情变得更简单。我的脚本在下面。

脚本：

toolbox.precache(["/", "../media/logo.svg", "../media/spritesheet.svg", "../scripts/modern.js", "../styles/modern.css"]);
toolbox.router.get("../media/*", toolbox.cacheFirst);
toolbox.router.get("/wp-content/uploads/*", toolbox.cacheFirst);
toolbox.router.get("/*", toolbox.networkFirst, {NetworkTimeoutSeconds: 5});

Service Worker 正确注册，没有抛出任何错误。所有设置为预缓存的文件都正确显示在 Chrome 的开发人员工具中的 Cache > Cache Storage 下。由于某种原因，这些缓存的文件在离线时没有被提供。

我知道 Service Worker 的范围存在问题，但 Service-Worker-Allowed 标头应该可以解决这个问题。鉴于这些文件实际上确实毫无问题地显示在缓存中，我认为这一切正常。

我错过了什么？

注意：我想保留 service-worker.js 和我正在缓存的文件，并使用相对路径；将它们移动到根目录或为它们提供绝对路径会变得有问题，因为这个 WordPress 主题会在构建中重复使用并且每次都更改其名称，从而使绝对路径变得痛苦。我用.htaccess 测试了对根目录的重写，它确实有效，但有它自己的问题。我不明白为什么这会起作用，但我目前正在尝试的却不会。

【问题讨论】：

您如何测试离线功能？如果您没有在 Service Worker 的 activate 处理程序中调用 clients.claim()，那么您应该知道 Service Worker 不会控制当前页面，您需要导航离开然后返回才能拥有服务人员控制：stackoverflow.com/a/41066148/385997
@JeffPosnick 谢谢，我看看能不能解决这个问题。

标签： wordpress .htaccess caching service-worker progressive-web-apps

【解决方案1】：

我想我做错了。只要我通常启用缓存，似乎不需要手动指定缓存我的主题资产。为此，我设置了一个重写规则，以便service-worker.js 位于根（即https://www.example.com/service-worker.js），从而为其提供正确的范围。这使我的项目能够离线工作。代码如下。

((global) => {
    // disable the service worker for post previews
    global.addEventListener("fetch", (event) => {
        if (event.request.url.match(/preview=true/)) {
            return;
        }
    });

    // ensure the service worker takes over as soon as possible
    global.addEventListener("install", event => event.waitUntil(global.skipWaiting()));
    global.addEventListener("activate", event => event.waitUntil(global.clients.claim()));

    // set up the cache
    global.toolbox.precache(["/", "/offline/"]);
    global.toolbox.router.get("/wp-content/uploads/*", toolbox.cacheFirst);
    global.toolbox.router.get("/*", toolbox.networkFirst, {NetworkTimeoutSeconds: 5});

    // redirect offline queries to offline page
    self.toolbox.router.get("/(.*)", function (req, vals, opts) {
        return toolbox.networkFirst(req, vals, opts).catch((error) => {
            if (req.method === "GET" && req.headers.get("accept").includes("text/html")) {
                return toolbox.cacheOnly(new Request("/offline/"), vals, opts);
            }

            throw error;
        });
    });
})(self);

【讨论】：