实现离线优先需注册service worker，在install中预缓存html/css/js等核心资源，fetch中对文档请求优先返回缓存并后台更新，对脚本样式缓存优先 fallback网络，activate时清理旧缓存并跳过等待。
要让网页应用支持离线优先，核心是编写一个能拦截网络请求、缓存关键资源并在无网络时返回缓存内容的 Service Worker 脚本。关键不在于写得多复杂，而在于缓存策略清晰、激活时机合理、更新逻辑可靠。
注册并安装 Service Worker
先在主页面的 JavaScript 中注册脚本，确保只在 HTTPS 或 localhost 环境下运行：
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
});
}
注册后，浏览器会下载并尝试安装 sw.js。在脚本中监听 install 事件，预缓存核心静态资源（如 HTML、CSS、JS、图标）：
const PRECACHE_URLS = [
'/',
'/index.html',
'/styles/main.css',
'/scripts/app.js',
'/icons/icon-192.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(PRECACHE_URLS))
);
});
拦截请求并优先返回缓存
在 fetch 事件中实现“离线优先”：对匹配的请求，先查缓存；命中则直接返回，未命中再发起网络请求，并把响应存入缓存供下次使用：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
if (event.request.destination === 'document') {
// 页面主文档请求：始终优先缓存（即使过期也返回），再后台更新
event.respondWith(
caches.match(event.request).then(cached => {
if (cached) return cached;
return fetch(event.request).then(response => {
if (response.status === 200) {
caches.open(CACHE_NAME).then(cache => cache.put(event.request, response.clone()));
}
return response;
});
})
);
} else if (event.request.destination === 'script' || event.request.destination === 'style') {
// JS/CSS：缓存优先，但允许失效后回退网络
event.respondWith(
caches.match(event.request).then(cached => {
return cached || fetch(event.request);
})
);
}
});
处理 Service Worker 更新与缓存清理
新版本 SW 安装成功后不会立即接管页面，需手动跳过等待并激活；同时旧缓存应被清理，避免残留：
- 监听
activate事件，在新 SW 激活时删除旧缓存 - 调用
self.skipWaiting()让新 SW 尽快生效（适合开发或强更新场景） - 在页面中监听
controllerchange事件，提示用户刷新以应用更新
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
});
调试与注意事项
Service Worker 行为不易调试，建议：
- 在 Chrome DevTools 的 Application → Service Workers 面板中勾选 “Update on reload” 和 “Offline”，方便测试
- 避免在 SW 中使用
console.log，改用self.postMessage或查看 “Application > Service Workers > Logs” - HTML 文件必须参与缓存（不能仅靠网络），否则离线时无法加载根页面
- 动态 API 请求不适合预缓存，可结合 Stale-While-Revalidate 策略按需缓存
离线优先不是一劳永逸，而是围绕用户真实访问路径设计缓存粒度和更新节奏。从首页、核心样式脚本开始，逐步扩展到关键数据接口，比一次性全量缓存更可控、更可靠。
