把目录站装进手机桌面：PWA、service worker 和 manifest 该怎么收着用
把
导航站这几年有个明显变化：越来越多的站开始提示「添加到主屏幕」。加了之后图标在桌面上，点开是全屏的，没有地址栏，跟个 App 差不多。技术上门槛不高，一个 manifest 文件加一个 service worker 就能跑起来。但我见过好几个站加上去之后出问题，出的问题还都不是安装那一步，而是缓存那一步。
图片来源：网络，版权归原作者所有，侵权请联系删除
先想清楚你要的是图标还是离线
这两件事经常被人捆在一起做，其实可以拆开。只要一个 manifest 文件（Web App Manifest），浏览器就允许把站点添加到桌面，图标、名称、启动画面都能定，不需要 service worker 参与。真正需要 service worker 的是离线可用和缓存控制，也就是「断网还能打开」。
目录站想清楚这点很重要。如果你的条目页必须实时（比如价格、库存、站点是否失效），做离线缓存反而是给自己找麻烦；如果只是想让用户从桌面点进来，那 manifest 就够了，风险小得多。
最容易犯的错：把 HTML 也一起缓存了
service worker 最常见的新手配置是 Cache First，所有请求先查缓存。静态资源这么配没问题，但 HTML 也这么配，就会出两件事：用户打开的是三天前的列表页，搜索引擎拿到的是缓存里的旧副本，新条目迟迟不出现。
比较稳的分工是这样：
| 资源类型 | 策略 | 说明 |
|---|---|---|
| 带 hash 的 JS/CSS/字体 | Cache First | 内容变了文件名就变，缓存一年也没关系 |
| 站点图标、SVG | Cache First | 同上，属于几乎不变的资源 |
| 列表页、条目页 HTML | Network First 或不缓存 | 要的是新鲜度，别拿速度换 |
| 接口返回的 JSON | Network First，超时回落 | 断网时给旧数据，有网时一定要新的 |
还有两个坑，代码层面看不出来，上线一段时间后才暴露。一是缓存名（cacheName）没跟着改，浏览器认为 sw 文件没有变化，旧缓存一直不失效；二是新 sw 安装后没有调用 self.skipWaiting() 和 clients.claim()，用户要关掉所有标签页才切换过去，你会收到一堆「我这儿还是旧的」反馈。另外别缓存非 200 的响应，404 和 302 进了缓存就很难清干净。
scope 和注册时机
service worker 只能控制它注册路径下面的页面。很多人把 sw.js 放在 /static/ 或者 /js/ 下面，结果它只能管住那个目录，首页根本不受控制。放在站点根目录是最省事的选择。
注册时机建议放在页面 load 之后，别在 head 里抢首屏带宽。代码大概是这个样子：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
});
}sw.js 这个文件本身一定要设成不缓存或者是极短缓存，否则浏览器拿不到新版本，你的更新永远推不下去。这一点在 CDN 后面尤其容易漏。
manifest 里几项和搜索有关的内容
manifest 里 name、short_name、icons（至少准备 192 和 512 两档，512 那张标 purpose: "any maskable" 免得被系统裁掉）、start_url、display 是基本项。start_url 别填一个带 noindex 的页面，也别填一个会 302 的地址，否则从桌面点进来第一跳就浪费掉。
有人会在 start_url 后面加 ?utm_source=pwa 之类的参数来区分来源，这没问题，统计上很好用，但记得 canonical 仍然指向干净的地址，别让这个参数版本单独被索引。
它给我带来排名了吗
没有。和 AMP 一样，PWA 从来不是排名因素，谷歌也没说过「装到桌面」会给什么加成。它的价值在复访：桌面上有个图标，用户点开的成本比打开浏览器输网址低很多，这个收益对导航站尤其真实，因为导航站靠的就是日常反复访问。
所以我的建议是分三档做：只想有图标，就加 manifest；想要弱网体验好一点，加一个只缓存静态资源的 sw；确实有离线场景（比如机场、地铁里查收藏的站点），再考虑缓存 HTML，但要配好缓存版本和清除入口。别一上来就全量离线化，那套东西的维护成本比想象中高。