Service Worker 离线兜底页面与资源占位策略实践

概述离线兜底可避免空白页面。本文提供 navigate 请求的兜底与占位图策略。兜底与占位self.addEventListener('install', e => { e.waitUntil(caches.open('fallback').then(c => c.addAll(['/offline.html','/placeholder.png']))); }); self.addEventListener('fetch', event => { const url = new URL(event.request.url); if (event.request.mode === 'navigate') { event.respondWith((async () => { try { return await fetch(event.request); } catch { return await caches.match('/offline.html'); } })()); } else if (url.pathname.endsWith('.png')) { event.respondWith((async () => { try { return await fetch(event.request); } catch { return await caches.match('/placeholder.png'); } })()); } });