vue.js - 在导航器的service上安装时未触发Workbox事件(Workbox events not fired when installed on navigator's serviceWorker registration)

Question

I tried any possible setup but potentially try to do something that is not meant to work conceptually.

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

I want to manually check for an update and trigger a refresh from the settings page in my app.

(我想手动检查更新并从应用程序的设置页面触发刷新。)

On "Check for update/install" I do the following (I also tried to install the eventListeners directly on navigator.serviceWorker instead - being desperately trying out various things - but also without success):

(在“检查更新/安装”上，我执行以下操作（我也尝试直接在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' })
    }
}

Generally I would like to have a chain that can just run whether the current registration is still installing or already waiting.

(通常，我希望有一个可以运行的链，无论当前的注册仍在安装中还是已经在等待中。)

Right now, non of my event listeners work.

(目前，我所有的事件监听器都无法正常工作。)

I also worked with reg.installing.onstatechange = () => { ... } but nothing worked smoothly so far.

(我还与reg.installing.onstatechange = () => { ... }一起工作，但到目前为止没有任何工作顺利。)

What's the issue here?

(这里有什么问题？)

Can I even set these type of listeners outside of sw-files?

(我什至可以在sw文件之外设置这些类型的侦听器吗？)

  ask by Alexei S. translate from so

Answer 1

The first thing that occurs to me is that await navigator.serviceWorker!.ready is not valid syntax.

(对我而言，第一件事是await navigator.serviceWorker!.ready无效的语法。)

It should be await navigator.serviceWorker.ready .

(应该await navigator.serviceWorker.ready 。)

If you're trying to determine that the Service Worker is not ready, you would do if (!(await navigator.serviceWorker.ready)) .

(如果您试图确定Service Worker尚未准备就绪，则可以执行if (!(await navigator.serviceWorker.ready)) 。)

Also, installing and waiting are not, as far as I'm aware, valid methods on serviceWorker.ready .

(另外，据我所知， installing和waiting不是serviceWorker.ready上的有效方法。)

Instead, you should use InstallEvent .

(相反，您应该使用InstallEvent 。)

If you use vue-cli with the PWA option, by the way, they use the NPM package register-service-worker to manage and simplify this process.

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