企业官网建设流程全解析

如何做网站建设,手机网站方案,网页开发需要学什么,建设企业网站的公司JavaScript 服务工作者#xff08;Service Worker#xff09;线程中 Cache 和 CacheStorage 的主要区别#xff1a;特性CacheCacheStorage定义表示一个具体的缓存实例#xff0c;用于存储请求-响应对。是所有缓存#xff08;Cache 对象#xff09;的容器#xff0c;提供…JavaScript 服务工作者Service Worker线程中Cache和CacheStorage的主要区别特性CacheCacheStorage定义表示一个具体的缓存实例用于存储请求-响应对。是所有缓存Cache 对象的容器提供对多个命名缓存的访问和管理。接口类型Cache接口CacheStorage接口获取方式通过caches.open(cache-name)返回一个 Promise解析为 Cache 实例。通过全局变量caches即self.caches直接访问其类型为 CacheStorage。-主要方法-add(request)-addAll(requests)-put(request, response)-match(request)-delete(request)-keys()-open(cacheName)→ 返回 PromiseCache-has(cacheName)→ 检查是否存在-delete(cacheName)→ 删除整个缓存-keys()→ 获取所有缓存名称作用范围单个命名缓存如v1-assets内的操作。管理多个命名缓存的整体集合。类比类似于一个“文件夹”中的内容操作。类似于“文件系统根目录”可创建/删除/列出多个“文件夹”缓存。使用场景添加、查找或删除特定资源的缓存条目。创建新缓存、清理旧版本缓存、列出当前所有缓存等生命周期管理。提示在 Service Worker 中caches是一个全局属性等价于self.caches其类型就是CacheStorage。通过它你可以打开具体的Cache实例进行细粒度操作。例如// caches 是 CacheStorage 实例 const cache await caches.open(my-cache); // cache 是 Cache 实例 await cache.put(/app.js, new Response(console.log(cached)));Cache 与 CacheStorage 全部方法对比表类别方法签名返回值类型功能说明CacheStorage通过caches访问open(cacheName)PromiseCache打开指定名称的缓存若不存在则创建并返回新 Cache 实例。has(cacheName)Promiseboolean检查是否存在指定名称的缓存。delete(cacheName)Promiseboolean删除指定名称的整个缓存成功删除返回true否则false。keys()Promisestring[]返回当前所有缓存名称的数组。Cache通过caches.open()获取match(request, options?)PromiseResponse | undefined在缓存中匹配一个请求返回对应的响应或 undefined。matchAll(request?, options?)PromiseResponse[]匹配所有符合条件的响应可选请求和选项。add(request)Promisevoid抓取指定请求并将其响应存入缓存等价于fetch put。addAll(requests)Promisevoid批量抓取多个请求并缓存其响应原子操作任一失败则全部不缓存。put(request, response)Promisevoid将指定请求-响应对直接存入缓存需注意响应可读流只能消费一次。delete(request, options?)Promiseboolean从缓存中删除匹配的请求-响应对删除成功返回true。keys(request?, options?)PromiseRequest[]返回缓存中所有或匹配的请求对象数组。 补充说明options参数可选可包含ignoreSearch: 忽略 URL 查询字符串?a1。ignoreMethod: 忽略请求方法默认只匹配 GET。ignoreVary: 忽略Vary响应头。prefixMatch: 非标准部分浏览器可能支持前缀匹配。注意事项Cache.add()和addAll()会发起真实网络请求因此需确保资源可访问。Cache.put()要求传入的Response对象是未被使用过的因为 Body 是不可重用的流。所有方法均为异步返回Promise。CacheStorage是缓存的“顶层容器”而Cache是具体缓存的“操作接口”。 示例速览// CacheStorage 操作 await caches.has(v1); // 检查是否存在 const cache await caches.open(v1); // 获取 Cache 实例 await caches.delete(old-v1); // 删除旧缓存 const names await caches.keys(); // [v1, assets] // Cache 操作 await cache.add(/index.html); await cache.put(/api/config, new Response(JSON.stringify({}))); const res await cache.match(/index.html); await cache.delete(/temp-file); const requests await cache.keys();此表覆盖了截至2025 年Web 标准中Cache和CacheStorage接口的全部官方方法。CacheStorage() 也有match方法Qwen3-Max没有CacheStorage接口本身没有match()方法。✅ 正确理解match()是Cache接口的方法用于在某个具体缓存Cache 实例中查找匹配的请求。CacheStorage即全局的caches不直接提供match()方法因为它管理的是多个命名缓存Cache 对象的集合而不是缓存条目本身。 常见误解澄清你不能这样写// ❌ 错误CacheStorage 没有 match 方法 const response await caches.match(/some-url);但你可以遍历所有缓存手动实现类似功能或者更常见的是先打开特定缓存再 match// ✅ 正确方式先 open 一个 Cache再 match const cache await caches.open(my-cache); const response await cache.match(/some-url);或者在 Service Worker 的fetch事件中通常使用self.addEventListener(fetch, (event) { event.respondWith( caches.match(event.request) // ← 注意这是全局快捷方式 ); });⚠️ 这里caches.match(request)看起来像是 CacheStorage 的方法但实际上它是CacheStorage接口的一个便捷别名convenience method 补充说明caches.match()到底是什么根据 MDN 和 W3C 规范CacheStorage确实定义了一个match()方法所以结论更新如下✅CacheStorage确实有match()方法但它不是用来查单个缓存而是在所有已创建的缓存中按顺序查找第一个匹配项。✅ 官方方法签名来自规范caches.match(request, options?)作用遍历当前 origin 下所有缓存按创建顺序实际是实现定义返回第一个匹配该请求的响应。等价于const keys await caches.keys(); for (const key of keys) { const cache await caches.open(key); const res await cache.match(request, options); if (res) return res; } return undefined; 更新后的完整答案接口是否有match()方法行为Cache✅ 有在当前缓存实例中匹配请求。CacheStorage✅ 有常被忽略在所有命名缓存中查找第一个匹配项。✅ 所以CacheStorage确实有match()方法但它的用途和Cache.match()不同。 使用建议如果你知道资源在哪个缓存如assets-v1用cache.match()更高效。如果不确定缓存在哪个名字里比如清理旧缓存后只剩最新版可以用caches.match()全局查找。在 Service Worker 的fetch事件中caches.match(event.request)是常见模式正是调用了CacheStorage.match()。 参考资料MDN: CacheStorage.match()W3C Service Workers Spec - CacheStorage✅总结是的CacheStorage有match()方法用于跨所有缓存查找第一个匹配项。此前认为“没有”是常见误解。