vue PWA serviceWorker 有新内容时，如何自动刷新内容

本文主要是介绍vue PWA serviceWorker 有新内容时，如何自动刷新内容，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue PWA serviceWorker 有新内容时，如何自动刷新内容

一、问题描述

vue 自带的 pwa 插件可以很方便管理 serviceWorker 的使用，但会有一个问题。

ServiceWorker 的运行机制是这样的：

1. 后台检测到新版本
2. 新版 ServiceWorker 下载并安装
3. 安装完成之后等待生效，只有当用户关系所有相关窗口并重新打开，新的 ServiceWorker 才会接管

而我需要在检测到新版本的内容之后自动刷新页面载入新内容。

具体 ServiceWorker 的响应机制可以看这篇文章，很的很详细

Handling Service Worker updates – how to keep the app updated and stay sane

二、探索解决办法

使用 register-service-worker ，项目中 registerServiceWorker.js 的内容是这样的

/* eslint-disable no-console */import { register } from 'register-service-worker'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 https://goo.gl/AFskqB')},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.')},offline () {console.log('No internet connection found. App is running in offline mode.')},error(error) {console.error('Error during service worker registration:', error)}})

需要做的就是在 updated 方法中发出一个内容为 SKIP_WAITING 的事件。
我第一次发的时候只发了一个字符串，结果不行。
后认真查看了最终生成的 dist/service-worker.js 的代码，并在其中加入了代码查看它获取到的 data 是什么内容

define(["./workbox-d6430d1c"], (function (e) {"use strict";e.setCacheNameDetails({prefix: "iphone"}), self.addEventListener("message", (e => {e.data && "SKIP_WAITING" === e.data.type && self.skipWaiting()})), e.precacheAndRoute([{

结果出来是这个结果，所以就知道 postMessage 的内容格式肯定是错了。改成下面这样就好了

 updated (registration) {if (registration.waiting) {registration.waiting.postMessage({type: 'SKIP_WAITING'})}console.log('新的 ServiceWorker.js 已经下载并安装')},

这篇关于vue PWA serviceWorker 有新内容时，如何自动刷新内容的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---