各位靓仔靓女们，晚上好！我是今晚的主讲人，大家可以叫我老司机（手动滑稽）。今天咱们来聊聊Vue 3项目里，如何用vite-plugin-pwa愉快地集成PWA，以及Service Worker那些事儿。
咳咳，先清清嗓子。PWA（Progressive Web App）这玩意儿，说白了就是让你的网站像个原生App一样，能离线访问、推送通知、添加到桌面啥的。是不是听起来很酷？而vite-plugin-pwa就是个神器，能帮你简化PWA的集成流程。
一、PWA是啥？为啥要用？
咱先简单回顾一下PWA的核心特性：
- 可靠性(Reliable): 即时加载，即便在不确定的网络环境下。这多亏了Service Worker的缓存能力。
- 快速(Fast): 流畅的用户体验，响应迅速。
- 吸引力(Engaging): 像原生App一样，用户可以添加到桌面，接收推送通知。
用PWA的好处，那可太多了：
- 提升用户体验: 离线访问，减少加载时间，用户体验杠杠的。
- 提高用户粘性: 添加到桌面，推送通知，让用户想起你的网站。
- 增强SEO: Google喜欢PWA，有利于SEO。
- 节省开发成本: 一套代码，多端可用。
二、vite-plugin-pwa快速上手
接下来，咱们撸起袖子，开始实战。
-
安装
vite-plugin-pwa首先，在你的Vue 3项目里安装
vite-plugin-pwa：npm install vite-plugin-pwa -D # 或者 yarn add vite-plugin-pwa -D -
配置
vite.config.js在你的
vite.config.js文件里，引入并配置VitePWA插件：import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { VitePWA } from 'vite-plugin-pwa' export default defineConfig({ plugins: [ vue(), VitePWA({ registerType: 'autoUpdate', // 自动更新Service Worker injectRegister: 'auto', // 自动注入注册代码 manifest: { // manifest.json配置 name: 'My Awesome PWA', short_name: 'Awesome PWA', description: 'A cool PWA built with Vue 3 and Vite!', theme_color: '#ffffff', icons: [ { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' }, { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' } ] } }) ] })解释一下几个重要的配置项：
registerType: 'autoUpdate'：这个设置告诉插件，Service Worker会自动更新，当有新版本发布时，用户下次访问会自动更新。injectRegister: 'auto'：自动注入Service Worker的注册代码，省去了手动注册的麻烦。manifest：这是manifest.json文件的配置，包含了PWA的元数据，比如名称、图标、描述等。 这个文件是PWA的核心，浏览器会读取这个文件来安装PWA。
-
准备PWA图标
在
public目录下，准备好pwa-192x192.png和pwa-512x512.png这两个图标文件。 你可以用你自己的图标替换，确保尺寸符合要求。 这些图标会出现在添加到桌面时，APP的图标。 -
构建项目
运行
npm run build或yarn build构建你的项目。 -
部署项目
将构建后的项目部署到服务器上。
现在，用支持PWA的浏览器访问你的网站，看看是不是可以添加到桌面了？如果能，恭喜你，PWA已经成功集成！
三、Service Worker深入剖析
Service Worker是PWA的核心，它是一个运行在浏览器后台的脚本，可以拦截网络请求，缓存资源，推送通知等。
1. Service Worker的生命周期
Service Worker的生命周期有点复杂，大致分为以下几个阶段：
| 阶段 | 说明 |
|---|---|
| 注册(Register) | 浏览器下载并注册Service Worker。 |
| 安装(Install) | Service Worker安装事件触发，通常在这里缓存静态资源。 |
| 激活(Activate) | Service Worker激活事件触发，通常在这里清理旧的缓存。 |
| 空闲(Idle) | Service Worker处于空闲状态，等待事件触发。 |
| 终止(Terminate) | 浏览器认为Service Worker不再需要时，会将其终止。 |
2. Service Worker的缓存策略
Service Worker的缓存策略非常灵活，可以根据不同的场景选择不同的策略。常用的缓存策略有：
- Cache first: 优先从缓存中获取资源，如果缓存中没有，则从网络获取，并缓存到本地。 适用于静态资源，如图片、CSS、JS等。
- Network first: 优先从网络获取资源，如果网络请求失败，则从缓存中获取。 适用于需要保持最新状态的资源，如API数据。
- Cache only: 只从缓存中获取资源，如果缓存中没有，则返回错误。 适用于离线访问的场景。
- Network only: 只从网络获取资源，不使用缓存。
- Stale-while-revalidate: 先从缓存中获取资源，同时发起网络请求更新缓存。 适用于对实时性要求不高的资源。
3. 自定义Service Worker
vite-plugin-pwa默认会生成一个Service Worker，但你也可以自定义Service Worker，实现更复杂的逻辑。
首先，在vite.config.js中配置srcDir和filename：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
vue(),
VitePWA({
srcDir: 'src', // Service Worker源码目录
filename: 'my-sw.js', // Service Worker文件名
registerType: 'autoUpdate',
injectRegister: 'auto',
manifest: {
name: 'My Awesome PWA',
short_name: 'Awesome PWA',
description: 'A cool PWA built with Vue 3 and Vite!',
theme_color: '#ffffff',
icons: [
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png'
}
]
}
})
]
})然后，在src目录下创建my-sw.js文件，编写你的Service Worker代码：
// src/my-sw.js
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/css/style.css',
'/js/app.js',
'/pwa-192x192.png',
'/pwa-512x512.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
// Cache hit - return response
if (response) {
return response;
}
// IMPORTANT: 动态请求的资源，需要使用 fetch 发起请求
const fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
response => {
// 检查是否收到了有效的响应
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// IMPORTANT: 响应response需要克隆一份
const responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(cache => {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});代码解释：
CACHE_NAME：缓存名称，用于区分不同版本的缓存。urlsToCache：需要缓存的资源列表。install事件：在Service Worker安装时触发，用于缓存静态资源。activate事件：在Service Worker激活时触发，用于清理旧的缓存。fetch事件：在浏览器发起网络请求时触发，用于拦截请求，并从缓存中返回资源或发起新的网络请求。
四、vite-plugin-pwa更多高级用法
vite-plugin-pwa还有很多高级用法，可以满足更复杂的需求。
- Workbox:
vite-plugin-pwa底层使用了Workbox，Workbox是Google提供的Service Worker工具库，提供了很多实用的API，可以简化Service Worker的开发。 - GenerateSW:
vite-plugin-pwa默认使用GenerateSW模式，自动生成Service Worker。 - InjectManifest:
vite-plugin-pwa也支持InjectManifest模式，允许你完全控制Service Worker的逻辑。 - 自定义缓存策略: 你可以自定义缓存策略，根据不同的资源类型选择不同的缓存策略。
- 推送通知: 你可以使用
vite-plugin-pwa集成Web Push API，实现推送通知功能。
五、PWA的调试与测试
调试PWA有点麻烦，但也有一些工具可以帮助你：
- Chrome DevTools: Chrome DevTools提供了Service Worker的调试工具，可以查看Service Worker的状态，拦截网络请求，清除缓存等。 在Application -> Service Workers中可以查看。
- Workbox DevTools: Workbox DevTools是Workbox提供的调试工具，可以更方便地调试Service Worker。
- Lighthouse: Lighthouse是Google提供的网站性能评估工具，也可以用来评估PWA的质量。
六、一些注意事项
- HTTPS: PWA必须运行在HTTPS环境下。
- Manifest.json:
manifest.json文件必须正确配置。 - Service Worker的作用域: Service Worker的作用域决定了它可以拦截哪些网络请求。
- 缓存更新: Service Worker的缓存更新是个难题，需要仔细考虑。
七、总结
今天咱们聊了聊Vue 3项目里如何集成PWA，以及Service Worker的一些基本概念和用法。希望大家通过今天的学习，能够掌握PWA的基本知识，并在自己的项目里成功集成PWA，提升用户体验。
PWA是个很强大的技术，但是也比较复杂，需要不断学习和实践。希望大家能够多多探索，多多尝试，成为PWA专家！
好了，今天的讲座就到这里，谢谢大家！如果有什么问题，可以在评论区留言，我会尽力解答。
（老司机下车，挥手告别）