响应式与 PWA 知识手札

本手札把布局、Service Worker、离线数据、安装能力和发布质量连接起来，所有能力都保留降级路径。

阅读起点

前置：HTML、CSS、JavaScript、Fetch、Promise 和浏览器 DevTools。按下面章节顺序阅读，主线围绕可运行的成功、失败和恢复实验展开。

全书顺序

第1章：响应式布局与可访问输入。 本章通过成功、离线、失败和恢复实验建立连续因果链。

1. 触摸、键盘与 prefers
2. 容器查询与流式布局
3. 图片、字体与网络预算

第2章：Service Worker 生命周期与缓存。 本章通过成功、离线、失败和恢复实验建立连续因果链。

1. install、activate、fetch：先建立一个可控的 Worker
2. Cache-first、network-first 与 stale-while-revalidate
3. 更新、清理与回滚：避免半更新站点

第3章：安装、离线与同步。 本章通过成功、离线、失败和恢复实验建立连续因果链。

1. Manifest 与安装资格
2. 离线队列与幂等
3. 兼容矩阵与发布监控

第4章：离线数据、队列与冲突。 本章通过成功、离线、失败和恢复实验建立连续因果链。

1. Background Sync 与降级
2. 同步冲突与版本
3. 离线写队列与重放
4. 离线数据安全与清理

第5章：安装、Manifest 与系统能力。 本章通过成功、离线、失败和恢复实验建立连续因果链。

1. 能力检测与替代
2. 安装提示与用户手势
3. Manifest 与安装条件
4. 通知权限与点击恢复

第6章：PWA 性能、无障碍与发布质量。 本章通过成功、离线、失败和恢复实验建立连续因果链。

1. 离线状态的可访问反馈
2. PWA 性能预算
3. Service Worker 安全边界
4. 安装更新与回滚测试

深入阅读

先验证布局与输入，再验证 Service Worker 生命周期、离线队列、权限和更新回滚；最后用浏览器 DevTools 检查安装、缓存、无障碍和失败恢复。

开始阅读：第一章