前言：
梳理了一下项目中的PWA的相关用法，下面我会正对vue2和vue3的用法进行一些教程示例，引入离线缓存机制，即使你断网，也能访问页面。一旦用户访问了我们的网页，我们就像牛皮糖一样粘连着他，他永远都可以访问，即使断网也能访问。
先了解一下什么是Service Worker
（服务器)与浏览器之间的中间人，如果网站中注册了Service Worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器,我们在Service Worker 中可以做拦截客户端的请求、向客户端发送消息、向服务器发起请求等先关操作，其中最重要且广泛的的作用就是离线资源缓存。
PWA 基于Service Worker具有三个主要的特性
- 可靠 一方面是指 PWA 的安全性，PWA 只能运行在 HTTPS 上；另一方面是指在网络不稳定或者没网情况下，PWA 依然可以访问。
- 快速 快速响应用户的交互行为，并且具有平滑流畅的动画、加载速度、渲染速度和渲染性能等。
- 用户粘性 通过添加到桌面以及离线消息推送，能带来用户的第二次访问，并且依靠良好的用户体验吸引用户再次访问。
vue2中对pwa的使用
PAW在vue-admin-element下的相关配置（vue2/vue-cli4）
1、执行vue add @vue/cli-plugin-pwa
package.json里会增加两个依赖
// dependencies下
"register-service-worker"
<!-- devDependencies下 -->
"@vue/cli-plugin-pwa"
会自动在src的根目录生成一个registerServiceWorker.js文件
2、在main.js导入
import './registerServiceWorker'
3、在src下新建service-worker.js文件
完整配置如下（拿来即用）
/* eslint-disable no-undef*/
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js')
if (workbox) {
console.log(`Yay! Workbox is loaded 🎉`)
} else {
console.log(`Boo! Workbox didn't load 😬`)
}
workbox.core.setCacheNameDetails({
prefix: 'ochase-search',
suffix: 'v1.0.0'
})
workbox.core.skipWaiting() // 强制等待中的 Service Worker 被激活
workbox.core.clientsClaim() // Service Worker 被激活后使其立即获得页面控制权
workbox.precaching.precacheAndRoute(self.__precacheManifest || []) // 设置预加载
// 缓存web的css资源
workbox.routing.registerRoute(
// Cache CSS files
/.*\.css/,
// 使用缓存，但尽快在后台更新
new workbox.strategies.StaleWhileRevalidate({
// 使用自定义缓存名称
cacheName: 'css-cache'
})
)
// 缓存web的js资源
workbox.routing.registerRoute(
// 缓存JS文件
/.*\.js/,
// 使用缓存，但尽快在后台更新
new workbox.strategies.StaleWhileRevalidate({
// 使用自定义缓存名称
cacheName: 'js-cache'
})
)
// 缓存web的图片资源
workbox.routing.registerRoute(
/\.(?:png|gif|jpg|jpeg|svg)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'images',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60 // 设置缓存有效期为30天
})
]
})
)
// 如果有资源在其他域名上，比如cdn、oss等，这里做单独处理，需要支持跨域
workbox.routing.registerRoute(
/^https:\/\/cdn\.ochase\.com\/.*\.(jpe?g|png|gif|svg)/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'cdn-images',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 60,
maxAgeSeconds: 5 * 24 * 60 * 60 // 设置缓存有效期为5天
})
],
fetchOptions: {
credentials: 'include' // 支持跨域
}
})
)
4、改造registerServiceWorker.js
需要先判断浏览器是否支持serviceWorker否则部署后控制台会报错；然后需要改造register引入的位置，默认是走环境变量，为了更方便我用了获取当前地址去根目录下找到service-worker.js，完整改造后的代码如下（拿来即用）
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
if (process.env.NODE_ENV === 'production') {
register(`${window.location.origin}/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() {
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)
}
})
}
})
}
5、配置vue.config.js
在module.exports下配置pwa的配置项如下
module.exports = {
pwa: {
name: 'xxx',
themeColor: '#4DBA87',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
importScripts: ['https://storage.googleapis.com/workbox-cdn/releases/5.1.4/workbox-sw.js'],
exclude: [/\.html$/],//html不进行service Worker缓存
// 自定义 Service Worker 文件的位置
swSrc: 'src/service-worker.js'
}
},
//...otherCode
}
如何到这一步基本上就配置好了，这里我们需要注意一下 *注意⚠️⚠️⚠️PWA是基于Service Worker，由于Service Worker权限很高，所以只支持https协议或者localhost⚠️⚠️⚠️ 本地运行项目后在localhost下可以看到这个图标，
点击安装，就安装在了电脑本地了，也可以在chrome地址栏输入
chrome://apps/ 查看管理安装的webapp（pwa）
6、配合nginx进行协商缓存
可以打包发布到nginx上,配合协商缓存（因为我们即需要缓存，也需要在代码更新后拉取缓存最新的代码），所以需要对html文件进行专项协商缓存，nginx配置如下
#在server下配置
location / {
if ($request_filename ~* .*\.(?:htm|html)$) {
add_header Cache-Control "no-cache";
}
root /usr/local/h5/demo;
index index.html;
try_files $uri $uri/ /index.html;
}
vue3中对pwa的使用
1、安装vite-plugin-pwa插件
2、在vite.config.ts里导入
3、在plugins里配置
4、在main.js注册sw告诉浏览器开辟一块缓存区域
5、像上面的vue2的第3步一样， 在src下新建service-worker.js文件（文件内容和上面一样）
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa'
plugins:[env.VITE_GLOB_APP_PWA === 'true' && VitePWA({
strategies: 'injectManifest',
injectRegister: false,
srcDir: 'src',
filename: 'service-worker.js',
devOptions: {
enabled: true,
/* other options */
},
injectManifest: {
injectionPoint: undefined,
},
// workbox: {
// globPatterns: ['**/*.{js,css,ico,png,svg}'],
// },
manifest: {
name: 'chatGPTdemo',
short_name: 'chatGPTdemo',
icons: [
{ src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
{ src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
],
},
}),]
// main.ts
// src/main.js or src/main.ts
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(
import.meta.env.MODE === 'production' ? '/service-worker.js' : '/dev-sw.js?dev-sw',
)
}
7、打包发布到nginx服务器下就可以进行访问查看了
再次提醒注意*注意⚠️⚠️⚠️PWA是基于Service Worker，由于Service Worker权限很高，所以只支持https协议或者localhost⚠️⚠️⚠️所以线上的域名一定要是https协议才行；可以在控制台查看请求相关的缓存状态
再次刷新后就可以看到直接从serviceWorker里面读取里
也可以在Application里查看serviceWorker的状态
降级方案通过接口控制是否清除用户老的缓存
业务讲究可靠，而提高可靠性最简单、最粗暴的方法就是提供降级开关，一旦发现事情不简单，开一下降级就可以了。我们的降级方法很简单：页面先请求开关接口，若降级，则不安装并且注销所有 SW。（很庆幸我们在开始前做了这样的准备，否则……）
if (支持SW) {
fetch(开关接口)
.then(() => {
if (降级) {
// 注销所有已安装的 SW
} else {
// 注册 SW
}
})
}
发布后，重新访问刷新一下后，本地的缓存将被清除掉，sw也被注销了 要注意的有几点：
- 降级一定要注销掉 SW ，而不是简单地不安装。这是因为降级前可能已经有用户访问过网站，导致 SW 被安装，不注销的话降级开关对这部分用户是不起作用的。
- 降级开关需要有即时性，因此服务器和 SW 都不应该缓存该接口。
- 出现问题并降级后，可能影响问题的排查，因此可以考虑加入对用户隐蔽的 debug 模式（如 url 传入特定字段），debug 模式中忽略降级接口。 我项目中结合上面的示例的代码
// 此段代码放在main.js的入口文件里
if ('serviceWorker' in navigator) {
fetch(开关接口)
.then(() => {
if (降级) {
// 注销所有已安装的 SW 且 删除Cache Storage的缓存
unregister()
} else {
// 注册 SW
navigator.serviceWorker.register(import.meta.env.MODE === 'production' ? '/service-worker.js' : '/dev-sw.js?dev-sw')
}
})
}
// 卸载serviceWorker且删除Cache Storage的缓存
function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then((registration) => {
registration.unregister()
})
}
navigator.serviceWorker.getRegistrations().then((registrations) => {
for (const registration of registrations)
registration.unregister()
})
if ('caches' in window) {
caches.keys()
.then((keyList) => {
return Promise.all(keyList.map((key) => {
return caches.delete(key)
}))
})
}
}
至此就可以运行了，但是缓存的逻辑有很多种，可以根据自己的实际需求来进行离线缓存，弱网缓存，PWA的强大不止于此，后面我会继续深入出一个深入一点的文章
注意中间可能出现问题：
-
先检查是否符合⚠️⚠️⚠️PWA是基于Service Worker，由于Service Worker权限很高，所以只支持https协议或者localhost⚠️⚠️⚠️**
-
在线上进行网站访问的时候控制台可能会报错，当报错从service-worker.js出来的时候需要注意配置是否和我的一致，我之前按照网上的其他教程配置会出问题
import { precacheAndRoute } from 'workbox-precaching'
precacheAndRoute(self.__WB_MANIFEST)
此处是网上教程会报错，导入方式在我自己项目里部署后访问serviceworker会报错，导入方式不支持，所以可以改成我上面配置的示例用importScripts来导入；
- 包括排除html的缓存
exclude: [/.html$/],//html不进行service Worker缓存，因为我们要让更新后的代码及时生效，所以进行协商缓存。 - 执行vue add @vue/cli-plugin-pwa的时候如果没有任何反应，或者报错的话，有可能是本地没有全局安装vue，或者vue-cli的版本过老，
执行删除全局老的
npm uninstall -g vue-cli
参考：
（未完待续...）
