Question

这是我第一次尝试服务工作者，我确信我做的事情很愚蠢。

我正在为我正在处理的WordPress主题设置服务工作者。它位于/public_html/wp-content/themes/framework/assets/scripts/service-worker.js。
我已通过Servie-Worker-Allowed: "/"文件设置标头.htaccess。
我正在使用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});

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

我知道服务工作者的范围存在问题，但Service-Worker-Allowed标题应该更正。鉴于文件确实显示在缓存中没有问题，我认为这一切都正常。

我错过了什么？

注意：我想保留service-worker.js和我正在缓存的文件以及相对路径;将它们移动到根或给它们绝对路径变得有问题，因为这个WordPress主题在构建上被重用并且每次都改变它的名称，使绝对路径变得痛苦。我用.htaccess测试了对根的重写，这确实有效，但是它有自己的问题。我不明白为什么会这样，但我目前正在尝试的不会。

Answer 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);

服务工作者缓存文件但未脱机加载

1 个答案: