1. 基本前提
H5 平台限制：Service Worker 和 Workbox 仅能在 H5 端运行。
HTTPS 必须：Service Worker 只能在 HTTPS 或 localhost 环境下运行。
UniApp 打包 H5：确保项目是以 H5 目标进行构建的。
2. 实现步骤
2.1 初始化 UniApp 项目
如果还没有项目，可以初始化一个 UniApp 项目：
vue create -p dcloudio/uni-preset-vue my-uniapp-project
2.2 配置 Service Worker 和 Workbox
1) 注册 Service Worker
在 main.js 中添加 Service Worker 的注册代码：
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(error => {
console.error('Service Worker registration failed:', error);
});
}
2) 安装 Workbox
在项目中安装 Workbox：
npm install workbox-cli --save-dev
3) 配置 Workbox
在项目根目录创建 workbox-config.js：
module.exports = {
globDirectory: 'dist/build/h5',
globPatterns: [
'**/*.{html,js,css,png,jpg,svg}'
],
swDest: 'dist/build/h5/sw.js',
runtimeCaching: [
{
urlPattern: /\/api\/.*\/*.*/,
handler: 'NetworkFirst',
options: {
cacheName: 'api-cache',
expiration: {
maxAgeSeconds: 24 * 60 * 60, // 缓存一天
maxEntries: 50, // 最多缓存 50 条请求
},
},
},
{
urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
handler: 'CacheFirst',
options: {
cacheName: 'image-cache',
expiration: {
maxAgeSeconds: 30 * 24 * 60 * 60, // 缓存一个月
},
},
},
],
};
4) 生成 Service Worker
在项目根目录运行以下命令生成 sw.js 文件：
workbox generateSW workbox-config.js
2.3 自定义打包流程
UniApp 打包 H5 时，生成的文件位于 dist/build/h5 目录。你需要将生成的 sw.js 文件放入这个目录。
修改 vue.config.js，在 H5 打包完成后将 Workbox 的 sw.js 文件复制到目标目录：
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: 'sw.js', to: 'dist/build/h5/' }
]
})
]
}
};
重新打包项目：
npm run build:h5
2.4 测试 Service Worker
启动一个本地 HTTPS 服务器（可以使用 serve 或 http-server）。
npm install -g serve
serve -s dist/build/h5 -l 5000 --ssl
访问 https://localhost:5000，在浏览器的开发者工具中确认 Service Worker 是否成功注册。
3. 优化和扩展
3.1 动态缓存策略
可以在 workbox-config.js 中增加更多缓存策略，如：
动态加载资源（如异步加载的组件和图片）。
接口数据缓存：对 /api/ 路径的请求使用 NetworkFirst 策略。
字体文件缓存：
{
urlPattern: /\.(?:woff|woff2|ttf|otf)$/,
handler: 'CacheFirst',
options: {
cacheName: 'font-cache',
expiration: {
maxAgeSeconds: 60 * 60 * 24 * 365, // 缓存一年
},
},
}
3.2 添加应用更新逻辑
在 sw.js 中监听更新事件，提示用户刷新页面：
self.addEventListener('install', event => {
self.skipWaiting();
});
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames =>
Promise.all(
cacheNames.map(cacheName => {
if (cacheName !== 'new-cache-name') {
return caches.delete(cacheName);
}
})
)
)
);
});
self.addEventListener('fetch', event => {
// 自定义逻辑
});
4. 总结
在 UniApp 的 H5 项目中，Service Worker 和 Workbox 可以通过以下方式实现：
- 安装 Workbox：生成和管理缓存文件。
- 注册 Service Worker：在 H5 端加载和运行。
- 配置缓存策略：根据需求缓存 HTML、静态资源和 API 数据。
- 优化体验：结合 UniApp 的框架特性，实现更流畅的页面切换和更快的加载速度。
尽管 UniApp 没有内置支持 Service Worker，但通过上述自定义配置可以轻松集成，并实现类似微信小程序的资源加载和离线访问机制。
