离线优先架构通过Service Worker实现，优先从本地缓存加载资源以提升用户体验。1. 注册Service Worker并安装时预缓存核心静态资源；2. fetch事件中优先返回缓存响应，未命中则发起网络请求并可选缓存结果；3. activate阶段清理旧缓存版本；4. 对API请求采用stale-while-revalidate策略，结合IndexedDB存储动态数据，确保网络不稳定时仍能展示最新可用数据。该模式保障了应用的高可用与快速响应能力。
在现代 Web 应用开发中，使用 Service Worker 实现离线优先的架构可以显著提升用户体验，尤其是在网络不稳定或完全离线的场景下。通过 html5 的 Service Worker 技术，我们可以拦截网络请求并管理资源缓存，实现“离线优先”的加载策略。
什么是离线优先（Offline-First）架构
离线优先是一种设计思想：应用默认假设设备处于离线状态，优先从本地缓存读取资源，仅在网络可用时才尝试更新数据。这种模式确保了快速响应和高可用性。
Service Worker 作为浏览器中的独立脚本，运行在主线程之外，能够控制页面的网络请求，是实现离线优先的核心技术。
注册并安装 Service Worker
要在项目中启用 Service Worker，首先需要在主页面（如 index.html）中注册它：
立即学习“前端免费学习笔记（深入）”；
if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(registration => { console.log('SW registered: ', registration); }) .catch(registrationError => { console.log('SW registration failed: ', registrationError); }); }); }
这段代码在页面加载完成后尝试注册根目录下的 sw.js 文件作为 Service Worker 脚本。
缓存策略：缓存优先，网络回退
在 sw.js 中，我们可以通过监听 install 和 fetch 事件来实现离线优先的缓存逻辑。
以下是典型的实现方式：
const CACHE_NAME = 'offline-first-v1'; const urlsToCache = [ '/', '/styles/main.css', '/scripts/app.js', '/images/logo.png' ]; // 安装阶段：预缓存关键资源 self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) ); }); // 激活阶段：清理旧缓存（可选） self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(keys => { return Promise.all( keys.filter(key => key !== CACHE_NAME) .map(key => caches.delete(key)) ); }) ); }); // 网络请求拦截：优先返回缓存，否则发起网络请求 self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { // 如果命中缓存，直接返回 if (response) { return response; } // 否则发起网络请求 return fetch(event.request).then(networkResponse => { // 可选择将新资源加入缓存（适用于动态内容） if (networkResponse && networkResponse.status === 200) { const responseClone = networkResponse.clone(); caches.open(CACHE_NAME).then(cache => { cache.put(event.request, responseClone); }); } return networkResponse; }); }) ); });
上述策略的特点是：
- 在 install 阶段预加载核心静态资源，保证首次离线可用
- fetch 时优先检查缓存，命中则立即返回，实现“离线优先”
- 未命中时走网络，并可选择性缓存新内容用于下次访问
- activate 阶段清理旧缓存，避免冗余
处理动态内容与 API 数据
对于 API 请求等动态数据，也可以采用类似的策略，例如：
- 对非关键数据使用缓存+后台刷新策略（stale-while-revalidate）
- 对关键数据设置超时机制，失败时展示最后缓存版本
- 结合 IndexedDB 存储结构化数据，增强离线能力
例如，只缓存特定路径的 API 请求：
if (event.request.url.startsWith('https://api.example.com')) { // 使用 stale-while-revalidate 策略 event.respondWith( caches.match(event.request).then(cached => { const networkFetch = fetch(event.request).then(resp => { if (resp.status === 200) { caches.open('api-cache').then(cache => { cache.put(event.request, resp.clone()); }); } return resp; }); return cached || networkFetch; // 缓存优先，无则网络 }) ); }
基本上就这些。通过合理配置 Service Worker 的缓存策略，你可以构建出真正健壮、快速响应且支持离线使用的 Web 应用。关键是明确哪些资源必须预缓存，哪些可以按需缓存，并根据业务需求选择合适的缓存更新机制。