javascript - 延迟 Service Worker 更新检查的正确方法是什么？

Question

我只想让 Service Worker 更新检查发生，例如在使用应用程序 5 分钟后进行。

问题是因为它被包裹在

window.addEventListener('load', async () => {
        navigator.serviceWorker.register("/serviceWorker.js");      
        const registration = await navigator.serviceWorker.getRegistration();

它在加载时开始检查。

为了解决这个问题，我将 Service Worker init 放入一个可以随时调用的函数中，但当然，它会失败，因为......

window.addEventListener('load', async ()

在窗口加载后调用。

延迟 Service Worker 检查的总体思路是什么？

Answer 1

我会考虑等待ServiceWorkerContainer.register() .

以下 registerSingletonServiceWorkerUrls 实现演示了如何注册服务工作线程 URL 并检索结果 ServiceWorkerRegistration根据需要使用Promise s。

/**
 * Registers the given service worker
 * URLs (if not already registered).
 *
 * @returns The resulting value of the current client's
 * `ServiceWorkerContainer`'s `ServiceWorkerRegistration`.
 * 
 * Example use:
 * ```
 * const latestServiceWorkerRegistration = await registerSingletonServiceWorkerUrls(
 *     '/service_worker_1.js',
 *     '/service_worker_2.js',
 * )
 * ```
 */
function registerSingletonServiceWorkerUrls(
    ...serviceWorkerUrls
) {
  return new Promise(
      async resolve => {
        // Wait for the document to finish loading (if applicable):
        while (document.readyState !== 'complete') await tick()

        for (const url of serviceWorkerUrls) {
          // Avoid duplicate registrations:
          if (registeredServiceWorkerUrls.has(url)) continue

          // Register the URL:
          await navigator.serviceWorker.register(url)
          registeredServiceWorkerUrls.add(url)
        }

        // Retrieve the resulting `ServiceWorkerRegistration`:
        const registration = await navigator.serviceWorker.getRegistration()
        return resolve(registration)
      }
  )
}

let registeredSingletonServiceWorkerUrls = new Set()

function tick() {
  return new Promise(window.requestIdleCallback)
}