使用 Service Worker 在我的网站第一次加载时拦截请求？

Question

TL;DR - 我希望我的服务工作者在第一次访问我的站点后立即激活，而不是在第一次刷新后激活。

详情：

我已经使用 service worker 构建了一个渐进式 web 应用程序，但我注意到在第一次加载时（安装 SW 时）它不会拦截任何网络请求，直到用户刷新页面。

有什么办法可以让 service worker 在安装后立即开始拦截请求吗？

Answer 1

您确实可以，通过使用 skipWaiting and clients.claim 的组合，如下所示。

这将导致 service worker 立即控制来自页面的网络请求。

self.addEventListener('install', event => {
  // Bypass the waiting lifecycle stage,
  // just in case there's an older version of this SW registration.
  event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', event => {
  // Take control of all pages under this SW's scope immediately,
  // instead of waiting for reload/navigation.
  event.waitUntil(self.clients.claim());
});

使用 Service Worker 在我的网站第一次加载时拦截请求？

Use Service Worker to intercept requests on the first load of my site?

service-worker

progressive-web-apps