Firefox通过Service Worker实现离线缓存与推送通知：支持HTTPS注册、独立线程运行；提供预缓存、网络优先回填、缓存优先失效回退三种缓存策略；依托Autopush网关和Push API实现桌面通知。
如果您在使用Firefox浏览器访问支持渐进式Web应用（PWA）的网站时，发现页面能在无网络状态下正常加载、资源秒开或收到桌面通知，则背后起关键作用的正是Firefox对Service Workers的支持。以下是关于Firefox中Service Workers实现离线缓存与推送通知的核心技术解析：
一、Firefox中Service Worker的运行机制
Firefox自60版本起全面支持Service Worker，其运行环境严格遵循W3C标准，但具备Firefox特有的调度策略与调试工具集成。它作为独立于网页主线程的后台脚本，在Firefox中由Gecko引擎专属线程托管，不共享页面DOM或window对象，仅可通过postMessage与主页面通信。该机制确保即使标签页崩溃或关闭，已激活的Service Worker仍可持续处理fetch、push、sync等事件。
1、Firefox要求Service Worker脚本必须通过HTTPS提供（localhost除外），否则注册立即失败。
2、注册时需显式调用navigator.serviceWorker.register()，Firefox会将脚本解析为字节码并缓存至磁盘，避免重复编译开销。
3、Firefox在安装阶段默认启用skipWaiting()行为，若脚本中未显式调用self.skipWaiting()，新版本Service Worker将等待所有受控页面关闭后才激活。
二、Firefox离线缓存实现方案
Firefox通过Cache Storage API实现持久化缓存，其缓存数据存储于独立的SQLite数据库中，与普通HTTP缓存隔离，且支持跨会话保留。缓存策略可灵活组合，以下为三种兼容Firefox的主流实现方式：
三、方案一：预缓存静态资源（Install阶段）
此方式在Service Worker首次安装时将核心HTML、CSS、JS及图标等资源写入命名缓存，适用于首屏必需资源。Firefox对此类缓存命中率极高，且自动规避ETag与Last-Modified校验。
1、在sw.js中定义缓存名称与资源列表：const CACHE_NAME = 'firefox-pwa-static-v1'; const PRECACHE_URLS = ['/index.html', '/app.css', '/main.js', '/icon-192.png'];
2、监听install事件并打开缓存：self.addEventListener('install', e => e.waitUntil(caches.open(CACHE_NAME).then(cache => cache.addAll(PRECACHE_URLS))));
3、Firefox在install完成前阻塞activate，确保缓存原子性写入。
四、方案二：网络优先+回填缓存（Fetch阶段）
该策略优先发起网络请求，成功后将响应存入缓存供后续复用，适合内容频繁更新的资源。Firefox对fetch(event.request)返回的Response流式读取优化显著，降低内存峰值。
1、在fetch事件中判断请求类型：if (event.request.destination === 'document' || event.request.destination === 'script') { ... }
2、发起网络请求并克隆响应存入缓存：fetch(event.request).then(res => { caches.open('dynamic-cache').then(cache => cache.put(event.request, res.clone())); return res; });
3、Firefox自动忽略no-store响应头，但仍尊重max-age与s-maxage指令。
五、方案三：缓存优先+失效回退（Stale-While-Revalidate）
此模式先返回缓存内容以保障即时响应，再异步发起网络请求更新缓存。Firefox在后台线程中执行revalidate逻辑，不影响主线程渲染。
1、匹配缓存并立即返回：caches.match(event.request).then(cached => cached || fetch(event.request));
2、在fetch完成回调中更新缓存：fetch(event.request).then(networkRes => caches.open('stale-cache').then(cache => cache.put(event.request, networkRes)));
3、Firefox对同一请求的并发fetch调用自动去重，避免重复网络请求。
六、Firefox推送通知技术实现
Firefox使用Autopush服务作为推送网关，其Push API实现符合RFC 8030标准，要求用户明确授予权限，并依赖Firefox账户同步推送端点。通知触发完全由Service Worker的push事件驱动，无需页面处于前台。
1、页面中申请权限：Notification.requestPermission().then(status => { if (status === 'granted') { /* 获取pushManager订阅 */ } });
2、获取推送订阅信息：navigator.serviceWorker.ready.then(reg => reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array('...') }));
3、Service Worker中监听push事件并显示通知：self.addEventListener('push', e => { const data = e.data.json(); e.waitUntil(self.registration.showNotification(data.title, { body: data.body, icon: data.icon })); });
