离线优先架构通过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 应用。关键是明确哪些资源必须预缓存，哪些可以按需缓存，并根据业务需求选择合适的缓存更新机制。
