WebStorm 中创建 sw.js 需用 Live Template 快速注入标准结构：新建文件命名 sw.js 后输入 sw + Tab 展开骨架；自定义 swi/swa/swf 模板补全 install/activate/fetch 事件，确保 self.addEventListener 正确；注册代码 navigator.serviceWorker.register('/sw.js') 必须手写并验证路径、HTTPS 及本地服务器环境。
直接生成 sw.js 文件模板，别手动敲
WebStorm 不自带 Service Worker 的文件模板，但可以快速创建并注入标准结构。新建文件时右键项目目录 → New → JavaScript File，输入文件名 sw.js（必须是这个名称或你注册时指定的路径），回车后立刻按 Ctrl+J 调出 Live Template 列表，输入 sw（部分版本需先启用）或手动选中预设的 service-worker 模板（若未显示，说明未启用或未安装相关插件）。更可靠的做法是：新建空 sw.js 后，在第一行输入 sw 再按 Tab —— 只要 Live Template 已正确定义且作用域包含 JavaScript，就会展开基础骨架。
Alt+Insert 在类/模块中无效？因为 Service Worker 不是类
Service Worker 是全局作用域脚本，不是类或对象，所以把光标放在任意位置按 Alt+Insert（Windows/Linux）或 Cmd+N（macOS）不会弹出 Constructor 或 Implement Methods。这个快捷键只对类体、接口、抽象类等有结构上下文的地方生效。在 sw.js 里它基本没用——除非你后续封装成 ES 模块类（比如 class MySW），但那就偏离了 SW 的运行机制。别浪费时间尝试，直接用模板或手写事件监听器更实际。
用 Live Template 补全核心事件监听器，避免拼错 self 和作用域
手动写 self.addEventListener('install', ...) 容易漏掉 self（不能用 window）、写成 oninstall（错误）、或忘记调用 event.waitUntil() 导致激活失败。推荐自建 Live Template：
- Abbreviation:
swi（install）、swa（activate）、swf（fetch） - Template text 示例（
swi）：self.addEventListener('install', event => { event.waitUntil( caches.open('${1:cache-name}').then(cache => cache.addAll(${2:['/']})) ); }); - Define 中必须勾选
JavaScript，不勾TypeScript（除非你在.ts中写 SW） - 务必启用
Reformat according to style，否则缩进混乱影响可读性
注册代码不能靠 Generate，得手写并检查路径和作用域
浏览器注册 SW 的代码（navigator.serviceWorker.register(...)）必须写在页面主 JS 中，且路径、作用域、HTTPS 状态都直接影响是否生效：
-
register('/sw.js')和register('./sw.js')效果不同：前者是根路径，后者相对当前 HTML 路径 - 如果项目部署在子路径（如
/my-app/），注册时得写register('/my-app/sw.js')，否则 404 - 本地开发用
http://localhost允许注册；但http://127.0.0.1或文件协议file://不行，必须走本地服务器（如 WebStorm 自带的 Python server 或serve） - 注册后刷新页面，打开 DevTools → Application → Service Workers，看是否显示 “Waiting” 或 “Active”，而不是灰显或报错
Failed to register a ServiceWorker
这些细节没法靠 IDE 自动生成，写完必须立刻验证路径与环境，否则卡在第一步就停住。
