PWA核心是安全可信、可装可离、体验无缝：必须HTTPS（Service Worker运行前提），Manifest定义安装与外观（start_url需200、display设standalone隐藏地址栏），Service Worker管控生命周期与缓存策略实现离线交互。
要真正把 PWA 技术融会贯通，不能只记概念，得从“浏览器如何信任你”和“用户何时感知不到它是网页”这两个真实场景出发。核心就三点：安全可信、可装可离、体验无缝——所有技术都围绕这三件事展开。
HTTPS 是门槛，不是装饰
它不只是锁图标，而是 Service Worker 的运行前提。没有 HTTPS，navigator.serviceWorker 就是 undefined，后续全部失效。本地开发可用 localhost（浏览器特例），但上线必须真实证书。Let’s Encrypt 免费且自动化，别用自签名或 HTTP 代理绕过——那等于没建地基。
Web App Manifest 决定“像不像 App”
它不参与逻辑，但直接控制用户第一眼印象和操作路径：
- start_url 必须可访问且返回 200，否则安装会静默失败
- display: "standalone" 或 "minimal-ui" 才能隐藏地址栏；设成 "browser" 就退回普通标签页
- icons 至少提供 192×192 和 512×512 两种尺寸，Android 和 iOS 对图标裁剪逻辑不同，maskable 图标更稳妥
- 文件必须是 UTF-8 编码的 JSON，结尾不能有多余逗号，MIME 类型应为 application/manifest+json
Service Worker 是真正的执行中枢
它不是“加个缓存脚本”，而是一套有生命周期、有作用域、有独立上下文的运行机制：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 注册时机：必须在页面 load 后注册，且路径需在 manifest 的 scope 范围内（默认为 sw.js 所在目录）
- install 阶段：只执行一次，适合预缓存核心静态资源（HTML/CSS/JS/关键图标）
- activate 阶段：清理旧缓存版本，避免新旧缓存混用导致白屏或错版
-
fetch 事件：决定每个请求走缓存还是网络，常见策略有：
– 网络优先（先试网，失败再读缓存）
– 缓存优先（先读缓存，后台更新）
– 仅缓存（如离线 fallback 页面） - 它无法访问 DOM，也不能直接调用 localStorage，要用 Cache API 或 IndexedDB 存数据
离线不是“能打开”，而是“能做事”
真正融会贯通的标志，是你能回答：断网时用户点按钮，发生了什么？
- 点击触发 fetch 请求 → Service Worker 拦截 → 查缓存 → 返回已缓存 HTML → 渲染页面
- 页面 JS 运行 → 发起 API 请求 → SW 拦截 → 若无对应缓存，可返回 fallback 响应或提示“暂不可用”
- 用户提交表单 → JS 存入 IndexedDB → SW 监听 sync 事件 → 网络恢复后自动重发
这时候你才真正把 PWA 从“能装的网页”，变成了“有状态、可恢复、有反馈”的应用。
