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

Question

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

细节:

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

有什么办法可以让服务 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());
});