JavaScript 中 Fetch 怎么结合缓存 API（Cache API）实现离线优先的网络请求-js教程-PHP中文网

实现“离线优先”需通过 service worker 配合 cache api：先注册 sw（https/localhost 下调用 navigator.serviceworker.register），在 install 阶段预缓存核心资源，在 fetch 事件中优先读缓存、再网络请求并缓存响应，最后在 activate 阶段清理旧缓存。

javascript 中 fetch 怎么结合缓存 api（cache api）实现离线优先的网络请求

Fetch 本身不处理缓存，要实现“离线优先”，必须配合 Cache API，在 Service Worker 环境中拦截请求、先查缓存、再 fallback 到网络。关键不在 Fetch 怎么写，而在 Service Worker 怎么配。

注册并激活 Service Worker 是前提

主页面需显式注册 SW 脚本，且仅在 HTTPS 或 localhost 下生效：

调用 navigator.serviceWorker.register('/sw.js')，路径需与页面同源
确保服务器返回 Content-Type: text/javascript
SW 生命周期为 install → waiting → active；只有进入 active 状态后，fetch 事件才开始生效
开发阶段可加 self.skipWaiting() 跳过 waiting，让新 SW 立即接管

安装阶段预缓存静态资源

在 install 事件中打开缓存空间，把 HTML、CSS、JS、图标等核心静态资源存入 Cache Storage：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

使用 caches.open('v1') 创建命名缓存（如 'v1'）
调用 cache.addAll([...urls]) 批量添加；任一资源失败，整个缓存操作会回滚
只缓存体积小、稳定性高、首次加载必需的资源，避免因个别 404 导致 install 失败

fetch 事件中执行离线优先策略

这是核心逻辑：每次页面发起 fetch 请求时，SW 拦截并按顺序尝试响应：

先用 caches.match(event.request) 查当前缓存，命中则直接返回 Response
未命中时调用 fetch(event.request) 发起真实网络请求
建议对响应做 cache.put(event.request, response.clone()) 存入缓存（注意 clone，否则 body 只能读一次）
若网络也失败，可 fallback 到自定义离线页（如 new Response('<h1>离线中</h1>', { headers: { 'Content-Type': 'text/html' } })）