如果我将 URL 添加到 waitUntil（） 流之外的服务工作线程缓存，会发生什么情况？

Question

是否可以在“install”事件的工作流之外将项目添加到服务工作线程缓存中，如果我这样做会发生什么情况？这是个坏主意吗？waitUntil

我有一个单页应用程序，我想在服务工作线程安装后立即缓存应用程序的主要组件和资产，然后延迟缓存一些用户可能无法访问的辅助页面。如果没有服务人员，我将动态导入这些辅助资产，因此用户无需在首次加载时下载它们。

我目前正在做的是：

self.addEventListener("install", e => {

    e.waitUntil(

        (async () => {

            const cache = await caches.open(cacheName);

            return cache.addAll(appShell);

        })()

    );

    caches.open(cacheName).then(cache => {

        return cache.addAll(secondaryPages);

    });

});

secondaryPages正在由SW缓存，但我不确定这是否是最好的方法。我期望上面的代码说“在缓存appShell之前不要完成安装，但不要等待”。secondaryPages

这是否为我提供了我正在寻找的懒惰性能提升，或者我应该在以后将 添加到缓存中，例如，一旦在客户端中加载了内容，就会从应用程序触发消息事件？secondaryPages

Answer 1

我意识到我可以使用a来模仿对辅助缓存的缓慢响应，以查看应用程序的行为方式。setTimeoutcaches.open(cacheName).then(cache => {    setTimeout(() => {        cache.addAll(secondaryManifest);        console.log("added secondary cache");    }, 1000 * 20);});这样，软件将正确安装，并缓存主应用程序外壳。20秒后，辅助文件被缓存，但与此同时，该应用程序完全有用。如果请求需要这些延迟加载文件的页面，它们将经历我设置的常规提取处理（检查缓存，然后根据需要转到网络）。这可能会导致 覆盖缓存中的这些项目，但这不应该是一个真正的问题，至少从UX的角度来看不是，尽管软件可能是双重下载。cache.addAllsetTimeout所以是的，使用外部作品，并且只会在后台缓存文件，而应用程序和软件继续他们的快乐方式。这允许更高效的软件安装。cache.addAllwaitUntil