caching - Workbox 在初始加载时不缓存 start_url

Question

我一直在使用 Google 的 workbox library现在有一段时间，在非常基本的水平上。大部分效果很好，但由于某些原因，我的 manifest.json 中的 start_url 未在初始页面加载时缓存(由 Lighthouse 报告，在开发工具中确认) .如果您四处浏览一下，或者软刷新页面几次，它似乎确实进行了缓存，只是最初没有进行缓存。

我假设我做错了什么，但我不清楚那是什么。演示网址和源代码如下。

• https://framework.jacob.rocks/
• https://framework.jacob.rocks/manifest.json

import { skipWaiting, clientsClaim } from "workbox-core";
import { ExpirationPlugin } from "workbox-expiration";
import { precacheAndRoute } from "workbox-precaching";
import { setCatchHandler, registerRoute } from "workbox-routing";
import { CacheFirst, NetworkFirst } from "workbox-strategies";

skipWaiting();
clientsClaim();

/**
 * Cache WordPress content
 */
registerRoute(
    ({ url }) => {
        return (url.pathname && !url.pathname.match(/^\/(wp-admin|wp-content|wp-includes|wp-json|wp-login)/) && url.pathname.match(/\/$/));
    },
    new NetworkFirst({
        cacheName: "new_site-content-cache",
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    })
);

/**
 * Cache CSS files
 */
registerRoute(
    ({ url }) => {
        return (url.pathname && url.pathname.match(/\.css$/) && !url.pathname.match(/wp-admin|wp-includes|wp-json/));
    },
    new CacheFirst({
        cacheName: "new_site-css-cache",
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    })
);

/**
 * Cache JS files
 */
registerRoute(
    ({ url }) => {
        return (url.pathname && url.pathname.match(/\.js$/) && !url.pathname.match(/wp-admin|wp-includes|wp-json/) && !url.pathname.match(/redirection/));
    },
    new CacheFirst({
        cacheName: "new_site-js-cache",
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    })
);

/**
 * Cache image files
 */
registerRoute(
    ({ url }) => {
        return (url.pathname && url.pathname.match(/\.gif|jpeg|jpg|png|svg|webp$/) && !url.pathname.match(/wp-admin|wp-includes|wp-json/));
    },
    new CacheFirst({
        cacheName: "new_site-image-cache",
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    })
);

/**
 * Cache font files
 */
registerRoute(
    ({ url }) => {
        return (url.pathname && url.pathname.match(/\.otf|ttf|woff|woff2$/) && !url.pathname.match(/wp-admin|wp-includes|wp-json/));
    },
    new CacheFirst({
        cacheName: "new_site-font-cache",
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    })
);

/**
 * Return "offline" page when visiting pages offline that haven't been cached
 */
setCatchHandler(() => {
    return caches.match("/offline/");
});

/**
 * Precache "offline" page
 */
precacheAndRoute([
    {
        url: "/offline/",
        revision: __VERSION__,
    },
]);

更新 1: 好的，所以我找到了 this issue我认为这是问题所在。似乎初始响应未被缓存，因为服务 worker 是在请求之后安装的，因此它没有任何内容可缓存。我仍然没有找到解决此问题的方法，但如果我取得任何进展，我会发布另一个更新。

更新 2: 似乎使用 skipWaiting() 和 clientsClaim() 是 应该解决这个问题，但在添加这些之后，它仍然没有按预期工作。奇怪的是，Lighthouse 报告“当前页面在离线时响应 200”，而且“离线时 start_url 不响应 200The start_url 确实响应，但不是通过 service worker。”这没有意义，因为它是同一个页面......也许我在尝试路由 / 时做错了什么？

更新 3: 尝试将我的第一个 registerRoute 中的最后一次检查更改为 /\/?$/，但没有任何区别。还尝试将 NetworkFirst 更改为 CacheFirst 并且实际上工作正常......但我需要它是 NetworkFirst，所以这不是一个真正可行的选择来解决这个问题。我也尝试过预缓存 /，但这同样没有任何区别。

更新 4: 我怀疑 this "warm the runtime cache" recipe可能接近我的需要，但我无法成功实现...如果我对 start_url 进行硬编码，它至少会缓存 HTML，但会遗漏所有其他文件。好像this method of gathering all resources可能有用，但是 location.href 只是返回 service worker URL，即使不是，我也不确定如何将所有内容拆分到它们自己的缓存中，就像我一样'目前正在做。

Answer 1

正如the method of gathering all resources表示，页面和资源未被缓存，因为它们是在安装 service worker 之前加载的。

为什么不使用 workbox-build在构建时注入(inject)必要的 预缓存 list ？ Assets 将在服务 worker 安装时预缓存。

快速示例，将以下行添加到 service-worker.js 中:

precacheAndRoute(self.__WB_MANIFEST);

构建完成后运行以下js脚本:

const {injectManifest} = require('workbox-build');

const swSrc = 'src/sw.js';
const swDest = 'build/sw.js';
injectManifest({
  swSrc,
  swDest,
  globDirectory: 'build',
  globPatterns: ['*.@(js|css)']
}).then(({count, size}) => {
  console.log(`Generated ${swDest}, which will precache ${count} files, totaling ${size} bytes.`);
});

您甚至可以将 swSrc 和 swDest 设置为相同，以在适当的位置注入(inject) list 。

我认为没有必要将 Assets 拆分到不同的缓存中，但可以使用 getManifest模式，一次glob一种 Assets ，手动注入(inject)到service-worker.js

中的某个点