PWA通过Service Worker实现离线缓存与推送通知，提升Web应用体验。1. 使用Cache First、Network First等策略缓存资源，确保断网可用；2. 通过Push API和Notification API实现消息推送，需获取用户权限并订阅推送服务；3. 注意HTTPS部署、缓存版本管理及订阅信息存储，避免频繁打扰用户。掌握Service Worker生命周期与缓存机制是关键。
在现代Web开发中，Progressive Web App（PWA）通过离线缓存与推送通知功能，极大提升了用户体验。这些特性让网页应用具备接近原生App的能力，比如断网可用、后台消息提醒等。实现这些核心功能的关键是Service Worker。
离线缓存：使用Service Worker管理资源缓存
Service Worker 是一个运行在浏览器后台的脚本，独立于页面，能够拦截网络请求并控制缓存策略。
常见缓存策略包括：- Cache First：优先从缓存读取，无缓存再请求网络，适合静态资源（如CSS、JS、图片）
- Network First：优先请求网络，失败后使用缓存，适合动态内容
- Stale While Revalidate：立即返回缓存内容，同时后台更新缓存，兼顾速度与数据新鲜度
示例代码注册Service Worker并实现基础缓存：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg))
.catch(err => console.log('SW registration failed:', err));
}
在 sw.js 中监听 install 事件进行预缓存：
立即学习“Java免费学习笔记（深入）”；
const CACHE_NAME = 'v1';
const urlsToCache = ['/', '/style.css', '/app.js'];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
return response || fetch(event.request);
})
);
});
推送通知：实现用户消息唤醒
推送通知依赖 Push API 和 Notification API，允许应用在关闭状态下接收服务器消息并弹出提醒。
实现步骤如下：
- 获取用户授权：调用 Notification.requestPermission() 获取通知权限
- 订阅推送服务：通过 PushManager 订阅，生成唯一的推送端点（endpoint）
- 服务器发送推送：使用第三方服务（如Firebase Cloud Messaging或Web Push库）向端点发送消息
- 客户端处理推送：Service Worker 监听 push 事件并显示通知
在主页面请求权限并订阅：
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
navigator.serviceWorker.getRegistration().then(reg => {
reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: '你的VAPID公钥'
}).then(sub => console.log('Push subscription:', sub));
});
}
});
在 sw.js 中监听推送事件：
self.addEventListener('push', event => {
const data = event.data.json();
const options = {
body: data.body,
icon: '/icon.png'
};
event.waitUntil(
self.registration.showNotification(data.title, options)
);
});
注意事项与最佳实践
PWA 的离线与推送能力强大，但也需注意实际使用中的细节。
关键点包括：- 确保网站通过 HTTPS 提供服务，Service Worker 只能在安全上下文中注册
- 合理设计缓存版本策略，利用 activate 事件清理旧缓存
- 推送订阅信息需保存到服务器，用于后续定向发送消息
- 避免频繁推送打扰用户，提供关闭通知的选项
基本上就这些。掌握 Service Worker 的生命周期和缓存机制，结合推送服务，就能构建真正离线可用、可交互的Web应用。不复杂但容易忽略的是权限管理和缓存更新逻辑，需要仔细测试。
