如何在 Vue PWA 中跳过等待服务人员答案

【问题标题】：How to skip waiting service worker in Vue PWA如何在 Vue PWA 中跳过等待服务人员
【发布时间】：2020-12-04 05:30:14
【问题描述】：

我为我的 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 仅在您更改 Service Worker 中的至少 1 个字节后才会更新（例如重命名您的 Service Worker 缓存）。只有当您关闭浏览器中的每个会话时，他才会更新
通过“会话”，@lfaruki 表示所有打开站点的选项卡和窗口

标签： vue.js progressive-web-apps service-worker skip

【解决方案1】：

不修改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())

【讨论】：