用 HTML 构建你的 PWA：从可用到可用得上

在手机浏览器里像用原生App那样加载、缓存、推送，是越来越多 Web 项目追求的体验。PWA（渐进式 Web 应用）就是把 Web 的优势拧成可用的生产力工具。这份教程不讲大而全的架构，只带你用 HTML、CSS、JavaScript 搭出一个能离线运行、在应用菜单里被点开、还能收推送的 PWA，把关键步骤讲清并做实。

确定用途与边界

别上来就堆一堆 PWA 的标签，先想清楚它要解决什么具体问题。比如你要做一个菜谱收藏夹，就聚焦“收藏—浏览—离线查看”这几环；要做日程提醒，就要把推送服务与后台同步考虑进去。明确边界，再决定要不要缓存整个页面、哪些资源需要离线可用。

用 HTML 标准做骨架

以 HTML 为基础，用 <link rel="manifest" ...> 给应用上“身份证”，让浏览器识别并能进入应用菜单。示例里你可以只导出一个精简的 manifest.json，放关键信息：name、short_name、start_url、scope、icons，以及 service-worker 的指向。

<!-- 在 head 中添加 -->
<link rel="manifest" href="/manifest.json">

缓存与资源策略

资源缓存是 PWA 的心脏。用 Service Worker 在安装时做预缓存，或在 fetch 事件里做网络与缓存的决策，关键资源（图标、字体、CSS、核心 JS）要优先缓存，可按需加载的图片与大附件后载。使用 Cache API 和缓存策略（Cache First、Network First、Cache-Only）来权衡速度与离线可用性。

关键步骤：在 Service Worker 的 install 与 fetch 事件里写好缓存清单与策略，优先保证核心功能的可用性。

用户激活与生命周期

让页面在用户点击应用图标时获得最佳体验，需要在 Service Worker 的 activate 事件里清理旧缓存，确保离线时拿到最新版本。同时在 install 时把必要的资源注入到缓存，避免“离线看到旧内容”。

推送的“轻触点”设计

推送不是必须的 PWA 功能，但能显著提升触达感。实现需要在前端登记 service worker 为推送服务的接收者，服务器端需要有推送通道并发送 push payload。考虑到通知的触发点，建议把推送用于“新内容发布”“到期提醒”等轻量事件，避免信息轰炸。

离线可用性与容错

在离线场景下，关键功能要能运行。对不需要网络的页面与功能（如收藏列表、阅读、设置）要保证可用；对依赖网络的部分（如同步、加载更多）要给出本地容错方案，如延迟、局部加载或静默处理。

适配应用菜单与深色模式

为了让应用出现在手机应用菜单，需要完成 manifest 中的配置（包括 icons、scope），并在页面里提供合适的响应式设计与深色模式，提升在不同设备与系统设置下的可用性与一致性。

测试与发布

发布前在真实设备上做本地测试，检查点击图标后的跳转、缓存加载、推送通知的触发与拦截。用浏览器提供的开发者工具或日志监控 Service Worker 的行为，确保没有未处理的错误或未拦截的请求。

结语

PWA 的价值在于让 Web 项目在移动端的可用性达到接近原生的水平，同时保持轻量、可更新与可缓存的特性。按场景来设计功能边界，用 HTML 与 Service Worker 把关键链路打通，你会发现 Web 也能成为你工作流里可靠的那一环。