service worker 不能直接预渲染 dom，只能通过 postmessage 将缓存的 html 或 json 数据推送给主页面，由页面完成 dom 更新；其核心是协同而非渲染。
Service Worker 本身不能直接预渲染 DOM，因为它无权访问 document、window 或任何 DOM API。所谓“DOM 预渲染”必须由主页面（即客户端）完成；Service Worker 的角色是在离线状态下准备数据、触发时机、传递上下文，再通过 postMessage 把关键信息（如缓存的 HTML 片段、JSON 数据、状态标识）安全可靠地推送给页面，由页面决定如何更新 DOM。
核心逻辑不是“Service Worker 渲染”，而是“Service Worker 协同页面做离线 DOM 更新”。
如何用 postMessage 实现离线 DOM 预渲染
Service Worker 在离线时无法发起新请求，但可以立即返回已缓存的内容——比如预存的 HTML 模板、结构化 JSON、或服务端直出的静态片段。postMessage 是它把这类内容“交还”给页面的唯一通道。
- 页面注册 Service Worker 后，主动建立
MessageChannel或监听message事件 - Service Worker 在
fetch事件中识别导航请求（request.destination === 'document'），若网络不可用且缓存命中，不返回响应，而是将缓存内容通过client.postMessage()推送过去 - 页面收到消息后，用
innerHTML、template.innerHTML或框架的响应式机制（如 Vue 的v-html、React 的dangerouslySetInnerHTML）注入 DOM
例如：用户刷新 /profile 页面时断网，Service Worker 检测到该请求，从 caches.match('/profile.html') 取出缓存 HTML 字符串，再发给当前 client：
// service-worker.js
self.addEventListener('fetch', event => {
const { request } = event;
if (request.destination !== 'document') return;
event.respondWith(
fetch(request).catch(() =>
caches.match('/profile.html').then(cached => {
if (cached) {
// 不直接返回，而是通知页面自行渲染
event.waitUntil(
clients.matchAll({ type: 'window' }).then(clients => {
clients.forEach(client => {
client.postMessage({
type: 'PRE_RENDER_HTML',
url: '/profile',
html: cached.clone().text(), // 注意：需提前确保缓存的是 text 响应
timestamp: Date.now()
});
});
})
);
return new Response('', { status: 204 }); // 空响应，避免页面跳转失败
}
})
)
);
});
对应页面监听并更新：
// main.js（页面中）
if ('serviceWorker' in navigator) {
navigator.serviceWorker.addEventListener('message', event => {
const { data } = event;
if (data.type === 'PRE_RENDER_HTML' && data.url === window.location.pathname) {
document.getElementById('app').innerHTML = data.html;
document.title = '离线 - ' + (new DOMParser().parseFromString(data.html, 'text/html').title || '我的页面');
}
});
}
关键前提与注意事项
- 缓存内容必须是可执行的 HTML 字符串：不能只缓存 JSON，除非你提前约定好模板引擎（如 Mustache）和数据结构，并在页面中同步实现渲染逻辑
-
HTML 中的相对路径要可重用：建议缓存时统一转为绝对路径，或页面加载后自动修正
<link>、<script></script>、<img>的src/href -
避免 XSS 风险：若缓存内容来自服务端直出，确保已做过输出编码；若含用户数据，务必在页面注入前做二次校验或使用
DOMPurify过滤 -
Service Worker 无法保证消息必达：
client.postMessage()只在 client 处于活跃状态（可见 tab）时有效；后台 tab 可能收不到。因此更适合“用户主动刷新/进入页面”场景，而非后台静默更新 -
不要依赖
event.waitUntil()延长页面生命周期来等待 DOM 渲染：那是 Service Worker 自身生命周期控制，与页面 DOM 无关
更实用的替代思路：预渲染 + 状态标记
比起强行推送 HTML，更健壮的做法是：
- Service Worker 缓存一个轻量级 JSON 对象，包含标题、关键字段、离线时间戳等
- 页面收到
postMessage后，用已有组件（如<profilecard :data="offlineData"></profilecard>）局部更新，而非整页innerHTML - 同时设置
document.body.dataset.offline = 'true'，让 CSS 控制离线样式（如灰阶、提示条）
这样既规避了 HTML 注入风险，又保持了框架响应性和可维护性。
不复杂但容易忽略：真正起作用的从来不是 Service Worker 渲染了什么，而是它把什么及时、准确、安全地交到了页面手上。
