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

Question

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

详情：

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

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

Answer 1

您确实可以使用skipWaiting 和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());
});