免费在线Service Worker代码生成器，可视化配置缓存策略、离线页面、推送通知，一键生成production-ready的SW代码。无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用可视化配置PWA Service Worker，支持缓存策略、离线页面、推送通知，一键生成生产级代码
零依赖 · 可离线使用📋 基本配置
🗂️ 缓存策略配置
🔧 功能选项
⏱️ 过期配置
📤 生成结果
什么是Service Worker？
Service Worker是浏览器在后台运行的脚本，独立于网页，可拦截网络请求、管理缓存、处理推送通知，是构建PWA(渐进式Web应用)的核心技术。
生成的Service Worker代码可以直接用吗？
可以。生成的代码遵循Workbox最佳实践，包含install、activate、fetch事件处理，支持多种缓存策略，可直接部署到生产环境。
支持哪些缓存策略？
支持5种策略：Cache First(缓存优先)、Network First(网络优先)、Stale While Revalidate(后台更新)、Cache Only(仅缓存)、Network Only(仅网络)。
如何添加离线回退页面？
在配置中开启离线页面选项，工具自动在fetch事件中添加离线回退逻辑，网络不可用时显示指定离线页面。
支持推送通知吗？
支持。开启推送通知选项后，生成的代码包含push事件监听和notificationclick事件处理。
数据安全吗？
完全安全。所有配置和代码生成在浏览器本地完成，不会上传任何数据到服务器。
需要安装Workbox吗？
不需要。选择Workbox CDN模式自动从CDN加载，选择原生模式则生成零依赖纯JS代码。
Service Worker生成器能做什么？
Service Worker生成器是一款免费在线PWA开发工具，帮助开发者通过可视化界面快速配置Service Worker的缓存策略、离线回退、推送通知等功能，一键生成production-ready的代码。支持Workbox和纯原生两种实现方式，无需手动编写复杂的SW逻辑，大幅降低PWA开发门槛。
核心功能
- 可视化缓存策略：5种缓存策略（缓存优先/网络优先/后台更新/仅缓存/仅网络），按URL模式灵活配置
- 预缓存管理：安装时预缓存关键资源URL列表，确保首次加载后即可离线访问
- 离线回退：网络不可用时自动显示离线页面，提供友好的用户体验
- 推送通知：自动生成push事件监听和notificationclick处理代码
- 双模式输出：Workbox CDN模式（功能丰富）和原生JS模式（零依赖），按需选择
使用教程
1. 在基本配置区设置缓存名称、选择实现方式（Workbox或原生JS）。
2. 在缓存策略区添加URL匹配规则，为不同类型资源选择合适的缓存策略（如图片用缓存优先，API用网络优先）。
3. 在功能选项区开启需要的功能：预缓存、离线回退、推送通知、后台同步等。
4. 配置过期参数（最大缓存条目数和天数），防止缓存无限增长。
5. 点击"生成代码"获取Service Worker代码，复制或下载sw.js文件。点击"生成注册代码"获取页面注册SW的代码片段。使用Ctrl+Enter快速生成，Ctrl+Shift+C复制结果。
应用场景
场景1：PWA离线应用
前端开发者将Web应用转为PWA时，使用本工具快速生成Service Worker代码，实现离线访问、缓存管理和安装提示，无需深入学习SW API。
场景2：性能优化
网站运维人员通过配置缓存策略优化资源加载速度，静态资源缓存优先减少网络请求，API数据网络优先保证实时性，后台更新策略兼顾速度和新鲜度。
场景3：消息推送
后端开发者需要实现Web推送通知时，开启推送通知选项即可获得完整的push事件处理代码，支持自定义通知标题、内容和图标。
场景4：移动端优化
移动端H5应用在网络不稳定时需要提供离线体验，通过Service Worker的离线回退和缓存策略，确保弱网和断网场景下仍可正常使用。
扩展知识
Service Worker是PWA的核心技术，运行在浏览器后台的独立线程中，生命周期包括install、activate、fetch三个核心事件。Workbox是Google推出的SW工具库，封装了常用缓存策略和最佳实践，大幅简化SW开发。缓存策略选择原则：不常变化的资源(字体/图片)用Cache First，频繁更新的内容(API)用Network First，可容忍短暂过期的数据用Stale While Revalidate。Service Worker必须在HTTPS环境下运行（localhost例外），且注册后需刷新页面才能生效。