caching - Workbox:self.skipWaiting() 的危险

标签 caching service-worker progressive-web-apps offline-caching workbox

我使用 Workbox 来预缓存渲染应用程序 shell 所需的 Assets ,包括 index.html 的基本版本. Workbox 假设 index.html在缓存中可用,否则页面导航失败,因为我在我的 Service Worker 中注册了它:

workbox.routing.registerNavigationRoute('/index.html');

我也有 self.skipWaiting()安装监听器中的说明:
self.addEventListener('install', e => {
  self.skipWaiting();
});

据我了解,有 2 install现在的听众:
  • Workbox 为预缓存 Assets (包括 index.html)注册的一个
  • 我在 Service Worker 中手动注册的一个
  • self.skipWaiting()可以吗?在 Workbox 的安装监听器失败时成功?这将导致出现问题状态,即 Assets 未预先缓存但 Service Worker 已激活。这种情况是否可能发生,我应该防范吗?

    最佳答案

    我强烈推荐“The Service Worker Lifecycle”作为有关 Service Worker 安装和更新不同阶段的权威信息来源。

    总结该文章中的一些信息,因为它适用于您的问题:

  • service worker首先进入installing相,不管多install您已注册的听众,他们都将有机会执行。正如您所建议的,Workbox 创建了自己的 install监听器来处理预缓存。
  • 仅当每 install监听器完成且没有错误,Service Worker 将进入下一阶段,这可能是 waiting (如果已经有一个使用以前版本的 service worker 的开放客户端)或 activating (如果没有客户端使用以前版本的 Service Worker)。
  • skipWaiting() ,如果你选择使用它,它会绕过waiting无论是否有任何打开的客户端使用先前版本的 Service Worker。
  • 调用 skipWaiting()如果出现任何 install 将不会完成任何事情监听器失败,因为 Service Worker 永远不会离开 installing阶段。这基本上是一个无操作。

  • 您应该注意的一件事是使用 skipWaiting()当您还使用版本化、预缓存 Assets 的延迟加载时。正如文章警告的那样:

    Caution: skipWaiting() means that your new service worker is likely controlling pages that were loaded with an older version. This means some of your page's fetches will have been handled by your old service worker, but your new service worker will be handling subsequent fetches. If this might break things, don't use skipWaiting().



    由于延迟加载预缓存、版本化 Assets 是 2018 年更常见的事情,Workbox 不会调用 skipWaiting()默认为您。您可以选择是否使用它。

    关于caching - Workbox:self.skipWaiting() 的危险,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49482680/

    相关文章:

    django - 我如何强制 nginx 使用来自上游服务器的 header 将响应保存在缓存文件夹中?

    php - Twitter/Facebook/其他 API 结果的文件缓存与 mySQL 存储

    caching - 覆盖 PWA Service Worker 中的浏览器缓存

    vue.js - 如何在 NuxtJS 中的链接访问时刷新整个页面?

    angular - 未绑定(bind)断点 - Angular、VS Code、Chrome、PWA

    javascript - 我应该将 $(document).height() 和/或 $(window).height() 存储为变量吗?

    php - Paypal IPN 似乎使用我的 php 处理程序脚本的缓存版本

    javascript - 在 http 上工作的 Service Worker

    javascript - ServiceWorker 'fetch' 事件未针对图标触发

    google-chrome - Chrome 开发者工具 "disable cache": what does it actually do apart from nothing (for service worker scripts)?