Manifest 与安装资格
manifest 提供名称、图标、start_url、display;安装提示由浏览器资格决定,不保证触发。
核心机制与实现
响应式与 PWA 的核心是让布局、网络、安装能力和离线数据在不同设备上优雅退化。每个能力都要定义最低可用路径、缓存一致性和失败恢复,而不是只追求 Lighthouse 分数。
本篇的主题“Manifest 与安装资格”要拆成四个问题:输入从哪里来、谁拥有它、什么时候产生副作用、失败后如何恢复。先画出输入 → 派生 → 视图/副作用的链,再决定 API;这样可以避免把框架语法当成业务状态模型。
ts
const media = matchMedia('(prefers-reduced-motion: reduce)')
const online = navigator.onLine
window.addEventListener('online', () => syncQueue())逐行阅读上面的最小例子:第一行建立可观察或可配置的输入,第二行定义派生/事件边界,最后一行才把结果交给视图或副作用。实际项目中还要补上类型、取消、清理和错误状态,不能只验证成功路径。
本节专属实验:验证在线与离线转换
在 DevTools 中切换 Offline,分别记录页面启动、写入队列、恢复网络和 Service Worker 更新时的状态。每次状态转换都要有用户可见反馈,不能只依赖缓存命中。
js
window.addEventListener('online', () => console.log('online'))
window.addEventListener('offline', () => console.log('offline'))预期:离线写入进入可重放队列,恢复后按幂等策略发送;新旧 worker 版本同时存在时必须明确控制更新和回滚。
可运行实验
- 在窄屏、键盘、慢网和离线条件下跑同一条用户任务。
- 对静态资源、导航请求和写操作分别选择缓存策略,记录命中与失效。
- 验证安装、更新、回滚、队列重放和减少动态效果设置。
实验记录至少包含:环境版本、输入序列、预期结果、实际结果、失败截图或日志,以及修复后再次运行的结果。
练习
- 用自己的话画出本篇概念的依赖图,并标出一个可能产生重复执行或竞态的节点。
- 写一个最小测试覆盖成功、失败、取消/卸载三条路径;测试应断言可观察结果,而不是内部实现调用次数。
- 给出一个选择当前方案而不是替代方案的理由,并写下替代方案何时更合适。
下一步
完成练习后阅读本章答案。