Fetch 配合 Cache API 可在 Service Worker 中实现离线缓存：1. 注册 SW 并确保其激活；2. install 阶段预缓存静态资源；3. fetch 阶段缓存优先并后台更新；4. activate 阶段清理旧缓存并接管页面。
Fetch 配合 Cache API 可以在 Service Worker 中实现可靠的离线缓存策略，核心是拦截网络请求、优先从缓存读取、按需更新缓存。
注册并激活 Service Worker
确保页面加载时注册 Service Worker，它是使用 Cache API 的前提：
// main.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg))
.catch(err => console.error('SW registration failed:', err));
});
}注意：sw.js 必须放在站点根目录或其子目录下（作用域限制），且开发时建议用无痕模式避免旧 SW 缓存干扰。
在 Service Worker 中缓存静态资源
在 install 事件中预缓存关键静态文件（如 HTML、CSS、JS、图标），供离线直接使用：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
// sw.js
const CACHE_NAME = 'v1-static';
const STATIC_ASSETS = [
'/',
'/index.html',
'/style.css',
'/app.js',
'/logo.png'
];
<p>self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(STATIC_ASSETS))
.then(() => self.skipWaiting())
);
});</p>- cache.addAll() 会全部成功才提交缓存，任一失败则整个安装失败；可改用逐个 fetch + put 实现更细粒度控制
-
self.skipWaiting()让新 SW 立即激活，跳过等待旧 SW 控制页面的阶段（适合开发调试）
拦截请求并实现缓存优先策略
在 fetch 事件中判断请求是否命中缓存，优先返回缓存内容，再后台更新：
self.addEventListener('fetch', event => {
const { request } = event;
<p>// 只对 GET 请求做缓存处理（POST/PUT 等通常不缓存）
if (request.method !== 'GET') return;</p><p>event.respondWith(
caches.match(request).then(cachedResponse => {
// 缓存命中：直接返回，并在后台更新缓存
if (cachedResponse) {
event.waitUntil(
fetch(request).then(networkResponse => {
if (networkResponse.ok) {
return caches.open(CACHE_NAME)
.then(cache => cache.put(request, networkResponse.clone()));
}
}).catch(() => {/<em> 网络失败，不中断缓存响应 </em>/})
);
return cachedResponse;
}</p><pre class="brush:php;toolbar:false;"> // 缓存未命中：走网络，成功后存入缓存
return fetch(request)
.then(networkResponse => {
if (networkResponse.ok) {
return caches.open(CACHE_NAME)
.then(cache => {
cache.put(request, networkResponse.clone());
return networkResponse;
});
}
return networkResponse;
});
})); });
- 缓存匹配基于完整 URL 和 request.mode（如 'navigate'、'cors'），确保缓存 key 一致
-
networkResponse.clone()是必须的——Response body 只能读取一次，需克隆一份写入缓存，一份返回给页面 - 对 HTML 页面建议单独处理（如用
Stale-While-Revalidate或 fallback 到缓存的 shell），避免白屏
清理旧缓存 & 处理版本升级
每次更新缓存名（如 v2-static）后，需在 activate 阶段清理旧缓存：
const ALL_CACHES = ['v1-static', 'v2-static', 'api-cache'];
<p>self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys => {
return Promise.all(
keys.map(key => {
if (!ALL_CACHES.includes(key)) {
return caches.delete(key);
}
})
);
}).then(() => self.clients.claim()) // 确保新 SW 立即接管所有页面
);
});</p>-
self.clients.claim()让新 SW 立即控制当前页面（尤其对未刷新的已打开页有效） - 生产环境建议用动态缓存名（如加入哈希或时间戳），配合构建工具自动生成缓存列表
Cache API 不是 localStorage 的替代品，它专为网络请求响应设计，配合 Fetch 和 Service Worker 能真正支撑 PWA 的离线体验。关键在于合理划分缓存策略：静态资源预缓存，API 数据按需缓存，HTML 做好 fallback，再配合版本管理和清理机制，就能稳定运行。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
