SuperAPI AI 工具集

service-worker

前端与建站

查看项目

更新于 10-16 06:01

技能介绍

用途

Service Worker 作为浏览器与网络之间的可编程网络代理,主要用于三类场景:审计重复访问性能、为 Web 应用添加离线支持、评估 PWA(渐进式 Web 应用)就绪度。它能够消除静态资源的重复服务器往返,将重复访问的加载时间缩短 50–90%,并让应用在弱网或完全离线的网络环境下仍可运行,这对移动端或低带宽连接的用户尤为关键。

主要能力

  • 在应用主 JavaScript 入口点注册 Service Worker。
  • 使用 install 事件预缓存关键静态资源。
  • 按资源类型选择缓存策略:cache-first(缓存优先)、network-first(网络优先)、stale-while-revalidate(陈旧内容同时重新验证)。
  • 实现 activate 事件,在更新时清理旧缓存。
  • 检查是否已注册 Service Worker,以及它是否缓存静态资源、API 响应或提供离线回退。
  • 为静态资源和导航请求添加 Service Worker 注册调用并实现合适的缓存策略。
  • 解释 Service Worker 如何拦截网络请求,以及不同缓存策略在新鲜度与速度之间的权衡。
  • 代码审查:检查 Service Worker 文件及其注册,标记缺失的 install/activate 生命周期处理器、缺少缓存版本控制、缺失 fetch 处理器,以及任何可能导致陈旧内容被无限期提供的模式。

使用方式

该技能以检查清单条目的形式提供,包含 Check(检查)、Fix(修复)、Explain(解释)、Code Review(代码审查)四个环节。完整实现细节、代码示例和框架特定指南见 references/rule.md。规则页面地址为 https://frontendchecklist.io/rules/performance/service-worker。

适用场景

适用于需要优化重复访问性能、添加离线支持或评估 PWA 就绪度的 Web 应用,尤其是面向移动端或低带宽连接用户的项目。

限制

关于具体框架的集成方式、浏览器兼容性范围、缓存容量限制等细节,资料中暂未提供。