JavaScript如何实现PWA应用_怎样实现离线访问和推送通知
PWA核心由Web App Manifest、Service Worker和HTTPS构成：Service Worker实现离线缓存（需HTTPS环境，注册后刷新两次生效），Push API+Notification API实现推送通知（依赖VAPID密钥与后端服务）。
JavaScript 实现 PWA（Progressive Web App）核心靠三件套：Web App Manifest、Service Worker 和 HTTPS。离线访问靠 Service Worker 缓存资源，推送通知则依赖 Push API + Notification API + 后端消息服务（如 Firebase Cloud Messaging）。下面分两块讲清楚关键实现步骤。
让网页支持离线访问
离线能力由 Service Worker 控制，它是一个在后台运行的脚本，能拦截网络请求并返回缓存内容。
- 注册 Service Worker：在主 JS 文件（如 main.js）中检查浏览器支持后注册：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg))
.catch(err => console.error('SW registration failed:', err));
});
}
- 编写 sw.js 实现缓存策略：常用“缓存优先 + 网络更新”模式（Stale-While-Revalidate）：
const CACHE_NAME = 'pwa-v1';
const urlsToCache = ['/', '/index.html', '/styles.css', '/app.js'];
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request)
.then(cached => cached || fetch(e.request))
.catch(() => caches.match('/offline.html')) // 可选：提供离线页面
);
});
- 注意点：Service Worker 只在 HTTPS（或 localhost）下生效；缓存版本需手动更新 CACHE_NAME 或用 Workbox 自动管理；首次加载不会触发 install，刷新后才生效。
添加推送通知功能
推送需要用户授权、生成设备唯一标识（Push Subscription）、后端发送消息，前端监听事件并展示通知。
- 请求用户授权并获取订阅信息：
// 检查是否支持 Push API
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.ready.then(reg => {
reg.pushManager.getSubscription().then(sub => {
if (sub) return sub;
return reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array('YOUR_VAPID_PUBLIC_KEY')
});
}).then(sub => {
// 将 subscription 对象发送到你的后端保存
fetch('/api/subscribe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(sub)
});
});
});
}
- 在 Service Worker 中处理推送事件：
self.addEventListener('push', e => {
const data = e.data?.json() || {};
const options = {
body: data.body || '你有一条新消息',
icon: '/icons
/icon-192.png',
badge: '/icons/badge.png'
};
e.waitUntil(self.registration.showNotification(data.title || 'PWA 提醒', options));
});
self.addEventListener('notificationclick', e => {
e.notification.close();
e.waitUntil(clients.openWindow('/'));
});
/icon-192.png',
badge: '/icons/badge.png'
};
e.waitUntil(self.registration.showNotification(data.title || 'PWA 提醒', options));
});
self.addEventListener('notificationclick', e => {
e.notification.close();
e.waitUntil(clients.openWindow('/'));
});- 关键准备项：需生成 VAPID 密钥对（用 web-push 工具），后端用私钥签名发送推送；Chrome/Firefox 要求站点为 HTTPS；iOS Safari 目前不支持 Push API（仅支持 Safari 的 Web Push，机制不同）。
补充：快速验证和调试技巧
开发阶段建议借助 Chrome DevTools 的 Application 面板：
- 在 Application → Manifest 查看 Web App Manifest 是否解析成功（需有 manifest.json 并在 HTML 中 link）；
- 在 Application → Service Workers 可强制 skip waiting、update on reload、unregister；
- 在 Application → Clear storage 一键清除缓存与 SW 注册状态；
- 用 Network → Offline 模拟断网，测试页面是否正常加载。
不复杂但容易忽略：每次修改 sw.js 后必须刷新两次——第一次触发新 SW 安装，第二次让它激活并接管页面。
