在导航器的serviceWorker注册上安装时，不会触发Workbox事件

Question

我尝试了所有可能的设置，但有可能尝试做一些不打算在概念上起作用的事情。

我想从我的应用程序的设置页面中手动检查更新并触发刷新。在“检查更新/安装”上，我执行以下操作（我还尝试直接在navigator.serviceWorker上安装eventListeners-拼命尝试各种方法-但也没有成功）：

async function updateApp() {

    const reg = await navigator.serviceWorker!.ready

    reg.installing && reg.installing.addEventListener('waiting', (event) => {
      reg.waiting!.addEventListener('controlling', event => reloadToFinishAppUpdate())
      reg.waiting!.postMessage({ type: 'SKIP_WAITING' })
    })

    // if already waiting
    if (reg.waiting) {
      reg.waiting.addEventListener('controlling', () => {
          window.location.reload()
      })
      reg.waiting.postMessage({ type: 'SKIP_WAITING' })
    }
}

通常，我希望有一个可以运行的链，无论当前的注册仍在安装中还是已经在等待中。目前，我所有的事件监听器都无法正常工作。我也曾与reg.installing.onstatechange = () => { ... }合作，但到目前为止没有任何事情能顺利进行。这里有什么问题？我甚至可以在sw文件之外设置这些类型的侦听器吗？

Answer 1

我首先想到的是await navigator.serviceWorker!.ready是无效的语法。应该是await navigator.serviceWorker.ready。如果您试图确定服务工作者尚未准备就绪，请执行if (!(await navigator.serviceWorker.ready))。另外，据我所知，installing和waiting并不是serviceWorker.ready上的有效方法。相反，您应该使用InstallEvent。

顺便说一下，如果您将vue-cli与PWA选项一起使用，他们将使用NPM软件包register-service-worker来管理和简化此过程。