html怎么创建Cache API缓存管理_html Cache API请求响应缓存管理【速查】-html教程-PHP中文网

cache api只能在service worker线程中使用，页面主线程调用caches.open()会因安全限制抛出securityerror或返回undefined；必须通过https（或localhost）注册service worker，并在install事件中用event.waituntil()包裹caches.open()与cache.addall()操作。

html怎么创建cache api缓存管理_html cache api请求响应缓存管理【速查】

Cache API 不能在 HTML 页面脚本里直接创建或管理缓存——它只能在 Service Worker 线程中运行，页面主线程调用 caches.open() 会抛出 SecurityError 或返回 undefined。

为什么 `caches.open()` 在页面里调用失败

浏览器明确禁止在主线程（即普通 <script></script> 标签或模块脚本）中访问 caches 全局对象。这不是兼容性问题，而是安全限制：Cache API 设计上必须与 Service Worker 绑定，确保缓存操作发生在受控、隔离的后台线程中。

常见错误现象：

控制台报错：SecurityError: caches is not available in this context
或静默失败：caches 为 undefined，调用 caches.open() 报 TypeError: Cannot read property 'open' of undefined

正确前提只有两个：

Service Worker 已注册成功：navigator.serviceWorker.register('/sw.js')（路径需同源，且协议为 HTTPS 或 localhost）
sw.js 文件已部署，并能在浏览器中直接访问（例如打开 https://yoursite.com/sw.js 应返回 JS 内容，状态码 200）

如何在 Service Worker 中创建并预填充缓存

缓存创建本身很简单，但关键在于时机和可靠性。最常用的是在 install 事件中调用 caches.open() 并写入资源，但必须用 event.waitUntil() 包裹整个异步链，否则缓存操作会被中断。

示例（sw.js）：

self.addEventListener('install', event => {
  const cacheName = 'static-v1';
  const filesToCache = [
    '/',
    '/index.html',
    '/app.js',
    '/style.css',
    '/logo.png'
  ];

  event.waitUntil(
    caches.open(cacheName)
      .then(cache => cache.addAll(filesToCache))
      .catch(err => console.error('Preload failed:', err))
  );
});

注意点：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

cache.addAll() 是原子操作：列表中任意一项 404、跨域无 CORS、或非 GET 请求，整个调用都会 reject，缓存不会写入任何内容
路径必须是根相对路径（如 '/app.js'），不能用 './app.js' 或 'app.js'
HTML 文件本身要显式列出；它内部引用的资源（如 <script src="app.js"></script>）不会被自动递归抓取

`fetch` 事件中怎么安全读写缓存

缓存真正起作用是在 fetch 事件里拦截请求、匹配已有缓存、或回退到网络。这里最容易踩坑的是请求体消费和匹配精度。

典型安全写法：

self.addEventListener('fetch', event => {
  const { request } = event;

  // 只对 GET 请求做缓存处理（POST/PUT 不该进 Cache Storage）
  if (request.method !== 'GET') return;

  // 按 destination 分流，避免污染
  if (request.destination === 'document') {
    event.respondWith(
      caches.match(request)
        .then(cached => cached || fetch(request))
    );
  } else if (['script', 'style', 'image', 'font'].includes(request.destination)) {
    event.respondWith(
      caches.match(request)
        .then(cached => cached || fetch(request).then(res => {
          // 只缓存成功响应（200–299）
          if (res.status >= 200 && res.status  {
                cache.put(request, res.clone());
                return res;
              });
          }
          return res;
        }))
    );
  }
});

关键细节：

request.clone() 必须在 cache.put() 前调用，否则原始 Response body 已被读取，再 clone 就是空流
cache.match() 默认严格匹配 URL 字符串（含 query 参数顺序），/api/data?id=1&name=test ≠ /api/data?name=test&id=1
若服务端对带参数的静态资源做版本控制（如 /main.css?v=2.1），建议在缓存前标准化 URL，或改用 ignoreSearch: true 选项