Chrome 如何支持 PWA？安装、离线和缓存边界是什么？

Chrome 支持 PWA，靠的不是某个“打包开关”，而是浏览器把 Web App Manifest、Service Worker、HTTPS、安装入口和权限能力串在一起。页面先要像普通网站一样可访问，再通过 manifest 告诉 Chrome 应用名称、图标、启动地址、显示模式和主题色；Service Worker 负责接管部分网络请求，让核心资源可以缓存，弱网或离线时仍有可用界面。

追问

Chrome 判断网站能不能安装成 PWA 看什么？

通常要有 HTTPS、有效 manifest、合适尺寸图标，以及可被 Service Worker 控制的页面。安装提示还会结合用户访问行为，不是文件写好就立刻弹窗。

Manifest 里最容易漏掉什么？

常见漏项是 start_url、scope、display 和 192/512 尺寸图标。scope 配错会让用户从图标打开后跳回普通浏览器标签页。

离线能力是不是把所有接口都缓存起来？

不是。HTML 壳、CSS、JS、图标适合预缓存；用户数据、价格、库存、权限状态更适合网络优先或短缓存。

更新 PWA 时有什么坑？

Service Worker 更新不是刷新就立即生效，新 worker 要等旧页面关闭后才接管，除非主动调用 skipWaiting 和 clients.claim。

最小实现需要哪些代码？

页面注册 Service Worker，worker 在 install 阶段缓存核心资源，fetch 阶段兜底返回缓存。生产还要加版本号和清理旧缓存。

js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}