如何在Vue PWA中跳过等待服务的工作人员

问题描述

我为我的pwa使用VUE PWA服务工作程序插件。

如果有新的退出者，我想运行新的服务工作者，但是不知道如何在我的代码中包括它。 目前，目前的服务人员甚至在24小时后都没有更新。仅当用户关闭浏览器并清除缓存时。但这当然不是我想要的。

那么，如何实现skipwaiting（）呢？

这是我的registerServiceWorker.js

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
     register(`${process.env.BASE_URL}service-worker.js`,{
          ready() {
               console.log(
                    'App is being served from cache by a service worker.\n' +
                         'For more details,visit '
               )
          },registered() {
               console.log('Service worker has been registered.')
          },cached() {
               console.log('Content has been cached for offline use.')
          },updatefound() {
               console.log('New content is downloading.')
          },updated(registration) {
               console.log('New content is available; please refresh.')
               document.dispatchEvent(
                    new CustomEvent('swUpdated',{ detail: registration })
               )
          },offline() {
               console.log(
                    'No internet connection found. App is running in offline mode.'
               )
          },error(error) {
               console.error('Error during service worker registration:',error)
          },})
}

更新部分中的代码至少会等待激活。

解决方法

无需修改service-worker.js文件的解决方案

在您的registerServiceWorker.js文件中，修改updated函数，以使用代码将消息发送给默认服务人员

updated (registration) {
  registration.waiting.postMessage({ type: 'SKIP_WAITING' })
}

---

修改了service-worker.js文件的解决方案

在您的自定义service-worker.js文件中，添加带有代码的侦听器

self.addEventListener('install',() => self.skipWaiting())