答案：PWA核心逻辑依赖Service Worker实现离线运行与缓存管理。通过注册Service Worker，预缓存静态资源，激活时清理旧缓存，拦截fetch请求优先返回缓存内容，结合Cache API和Fetch API实现缓存优先策略，并可选集成后台同步与推送通知，提升弱网环境下的可用性。
构建一个渐进式Web应用（PWA）的JavaScript核心逻辑，关键在于实现离线运行、资源缓存、后台同步和可安装性。这主要依赖Service Worker、Cache API、Fetch API以及适当的事件监听机制。以下是核心模块的实现思路。
注册并激活Service Worker
Service Worker 是 PWA 的核心，负责拦截网络请求、管理缓存和推送通知。
在主页面的 JavaScript 中注册 Service Worker：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.log('SW registration failed:', err));
});
}
确保 sw.js 文件位于根目录或正确路径，否则浏览器无法正确作用域控制。
立即学习“Java免费学习笔记（深入）”；
实现缓存策略
在 sw.js 中编写缓存逻辑，通常包括预缓存静态资源和动态缓存网络请求。
常用策略：Cache First、Network First、Stale While Revalidate。
const CACHE_NAME = 'pwa-cache-v1';
const PRECACHE_URLS = ['/', '/styles.css', '/app.js', '/image/logo.png'];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(PRECACHE_URLS))
.then(() => self.skipWaiting())
);
});
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys =>
Promise.all(
keys.filter(key => key !== CACHE_NAME)
.map(key => caches.delete(key))
)
).then(() => self.clients.claim())
);
});
install 阶段预加载必要资源，activate 阶段清理旧缓存并接管所有客户端页面。
拦截请求并返回缓存内容
通过 fetch 事件实现资源响应逻辑，优先从缓存读取，网络作为后备。
self.addEventListener('fetch', event => {
// 只处理同源请求
if (event.request.url.startsWith(self.location.origin)) {
event.respondWith(
caches.match(event.request).then(cached => {
const fallback = fetch(event.request).then(resp =>
caches.open(CACHE_NAME).then(cache => {
cache.put(event.request, resp.clone());
return resp;
})
);
return cached || fallback;
})
);
}
});
这个策略是“缓存优先，网络回退”，适合静态资源。对于API数据，可使用网络优先或带超时的策略。
支持后台同步与推送（可选增强）
提升用户体验，可在 Service Worker 中添加消息同步和推送能力。
例如，注册后台同步：
// 在主JS中触发同步
navigator.serviceWorker.ready.then(reg => {
reg.sync.register('send-pending-data');
});
// 在 sw.js 中监听
self.addEventListener('sync', event => {
if (event.tag === 'send-pending-data') {
event.waitUntil(sendPendingData());
}
});
结合 IndexedDB 存储临时数据，再通过 sync 机制在网络恢复后提交。
基本上就这些。核心逻辑围绕 Service Worker 展开，配合合理的缓存策略和网络兜底机制，就能让应用在弱网甚至离线状态下正常运行。不复杂但容易忽略细节，比如缓存版本管理和请求匹配规则。
