Sublime Text 可作为高效 PWA 编辑器，需正确编写 sw.js、配置构建流程，并配合 Chrome DevTools 调试；注册 Service Worker 须在 HTTPS 或 localhost 下进行，缓存策略推荐 Cache First 或 Stale-While-Revalidate，静态资源用哈希/时间戳版本控制，HTML 用 Network First + fallback，API 数据可存 Cache Storage；调试时启用 DevTools 的 “Update on reload” 和 “Offline”，验证缓存命中；本地开发可用 npx http-server 或 SublimeServer 插件启服务。
Sublime Text 本身不是运行环境，不能直接调试 Service Worker 或模拟离线行为，但它完全可以作为 PWA 开发的高效编辑器——关键在于写对代码、配好构建流程、再配合浏览器 DevTools 验证。
Service Worker 基础文件编写（用 Sublime 写）
在 Sublime 中新建 sw.js，放在项目根目录或与 index.html 同级。内容需严格遵循 Service Worker 规范：
- 必须是 HTTPS（本地开发可用
localhost） - 注册脚本要放在
标签中，且建议在底部或使用defer - 缓存策略建议从
Cache First或Stale-While-Revalidate入手，避免一上来就全量缓存 HTML
示例注册代码（写在 index.html 里）：
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered:', reg.scope))
.catch(err => console.error('SW registration failed:', err));
}
离线缓存策略设计（Sublime 里可结构化管理）
缓存分三类，Sublime 中建议用注释区块区分，方便维护：
- 静态资源缓存：CSS、JS、字体、图标等，版本号建议用时间戳或哈希值（可配合构建工具生成）
-
页面模板缓存：HTML 文件建议用
Network First+ fallback，避免缓存过期导致白屏 -
API 数据缓存：JSON 接口可用 Cache Storage 存储，搭配请求头判断是否过期（如
Cache-Control）
小技巧：在 Sublime 中用 Ctrl+Shift+P → Insert Date（装了相应插件后）快速插入时间戳，辅助版本控制。
Sublime 配合 Chrome DevTools 调试 SW
写完 sw.js 后，别在 Sublime 里“猜”它有没有生效：
- 打开 Chrome，访问你的页面（
http://localhost:8000等） - F12 → Application → Service Workers，勾选 “Update on reload” 和 “Offline”
- 刷新页面，看左侧是否显示激活的 SW；点 “skipWaiting” 强制更新，点 “Unregister” 清理旧版
- Network 面板中查看资源是否来自
from ServiceWorker，确认缓存命中
常见问题：修改 sw.js 后没更新？—— 检查文件是否真被保存（Sublime 右下角看编码/换行符），且确保注册路径正确（/sw.js ≠ ./sw.js）。
自动化与本地服务（让 Sublime 开发更顺）
Sublime 不自带服务器，但可快速接入轻量方案：
- 终端执行
npx http-server -p 8000（推荐，支持 CORS 和缓存头） - Sublime 安装插件 SublimeServer，右键 → “Start Server”，自动唤起浏览器
- 需要模拟 API？加个
mocks/目录放 JSON 文件，用 http-server 的-c-1关闭缓存，方便测离线 fallback
提醒：Service Worker 的 install 和 activate 事件只在首次注册或脚本内容变更时触发，改了逻辑记得手动 unregister 或硬性刷新。
基本上就这些。Sublime 轻快、专注、不干扰，写 PWA 正合适——重点不在编辑器多智能，而在你写的 SW 是否健壮、缓存是否合理、离线体验是否真实可用。
