把网页钉在桌面上：Web App Manifest 与添加到主屏

可视化演示

演示PWA清单文件结构、浏览器安装流程及四种显示模式对比，直观展示Web应用如何添加到主屏变为原生体验。

概念基座：一张“数字营业执照”

你想在城里最好的商场租一个固定摊位，物业会先要求你出示营业执照：店名叫什么、招牌长什么样、主营什么业务。没有这张纸，你只能推着小车在商场门口流动叫卖，风吹日晒，客源全靠运气。网页应用也是一样——没有 Manifest 时，用户只能在浏览器里输入网址、穿过层层链接“碰运气”找你；有了 Manifest，浏览器这位“商场管理员”才会把你登记为正式商户，给你一个像样的门面。

Web App Manifest 本质上是一份 JSON 小文件，用键值对写下“这家应用”的身份与外观：叫什么名字、用什么图标、从哪个页面启动、以什么方式呈现。它不包含任何业务逻辑，纯粹是一张“门面登记表”。这张表虽然简单，却是 PWA 大厦的第一块砖。完整的 PWA 依赖三件套：Manifest 负责身份与安装资格，Service Worker 像一位“驻店店员”负责离线缓存与推送，HTTPS 则是商场的安全门禁。三者齐备，网页才真正获得 App 级的体验。

执照内容看似只有七个格子，却是浏览器判断“能不能给你固定摊位”的第一依据。接下来，我们逐格填写这份执照——每一格填错，都会让你的“小店”在顾客眼中掉价。

核心字段：七个格子的填写技巧

执照的第一格是店名。name 是正式全名，写在执照最上方；short\_name 是桌面图标下的“小字”。这里有个常见的坑：如果简称太长，超出了桌面图标下方的空间，浏览器会直接截断成省略号，就像招牌上字太多挤成一团，顾客根本看不清你到底叫什么。所以简称最好控制在 12 个字符以内。

第二格是“正门地址” start\_url。用户点击图标后从这里进门，这个地址建议带点“小心机”——加上 ?source=manifest 之类的来源参数。这就像店门口装了一个计数器，你能清楚知道“这个招牌带来了多少客源”，方便做安装归因分析。第三格是营业模式 display，它决定店铺是“独立旗舰店”还是“商场里的开放柜台”，一共有四档：

选定营业模式后，再配上 background\_color 和 theme\_color 这对“装修色”，店铺外观就定稿了。接下来，就得请商场管理员来验收场地，决定是否允许你把招牌钉上顾客的桌面。

添加到主屏：把招牌钉上桌面

执照填好了，但商场管理员不会主动给你安排展位。他会先在后台做一轮“入场检查”，四项全绿，才会在顾客逛街时试探性地问一句：“要不要把这家店加到你的桌面？”这个过程在技术圈叫 A2HS（Add to Home Screen），也就是我们常说的“添加到主屏”。

入场检查有四个硬性条件，少任何一项，用户就永远看不到安装按钮。另外，Chrome 还要求用户与页面有过真实交互（比如点击或滚动）后才弹提示，避免页面一打开就强推弹窗惹人烦。聪明的开发者会监听 beforeinstallprompt 事件，把默认横幅拦截下来，换成自己设计得更好看的引导卡片——这就像你提前跟管理员约好，在顾客心情最好的时候递上邀请函，而不是在他刚路过时硬塞传单。

四道检查全过，招牌才能上桌。但请注意：iOS Safari 没有 beforeinstallprompt 事件，用户只能通过分享菜单手动“添加到主屏”，体验上天然少了一道“官方邀请”。所以招牌本身的质量，往往决定了这次入驻的第一印象——下一节，我们就来打磨这块招牌。

图标设计：打造一块扛得住裁剪的招牌

招牌是顾客对店铺的第一印象。Manifest 里的 icons 数组就是“招牌图样清单”，每个元素是一个图标条目，像一张设计稿的标注卡，写清了图样文件、尺码、材质和用途。同时，现代系统普遍支持 maskable（可蒙版）图标，系统会把图标裁成圆形或圆角矩形，就像商场统一招牌规格、把方形的设计稿剪成圆形挂起来一样。

多尺寸适配是另一个关键点：Android 的启动画面需要 512px 版本，桌面图标常用 192px，浏览器标签页要 32px 的 favicon。清单里放三到五个尺寸就够，多放无益反而增加下载负担。而 maskable 的“安全区”概念尤其重要——四周 10% 的区域会被蒙版裁掉，相当于 T 恤印刷的“出血区”，关键图案必须放在中心 80% 以内，否则就会被“领口和袖口”切掉。

招牌搞定后，我们来布置店门打开的第一眼。AI 时代，用图像生成模型批量产出多尺寸、带安全区的图标已经是常规操作——我们稍后在 Python 演示里会写一个“招牌质检员”。

启动体验：开门瞬间的迎宾灯

顾客点下桌面图标的那一刻，页面还没来得及渲染，屏幕上会出现一个短暂的“启动画面”。很多开发者误以为那是一张提前做好的图片，其实它是系统用 manifest 里的三样素材现场拼装出来的——就像酒店门童在你推门的瞬间点亮迎宾灯，灯光、招牌、店名三个元素瞬间组成第一印象。

这三个素材缺一不可：背景色要尽量贴近页面实际背景，这样从启动画面到页面渲染的过渡才不会“闪一下白屏”；图标要选 512px 的大图，放大后依然清晰；名称用完整的 name 而不是简称，显得正式。由于启动画面是现场拼装的，想改它只需改 manifest 字段，但也正因为如此，它受缓存周期影响，改了不能立刻看到效果。

启动体验是店铺的“黄金三秒”，决定了用户是否愿意留下来。不过也要认清现实：即使体验再接近原生 App，已安装的 PWA 本质仍是“快捷入口加离线能力”，推送、内存占用等与原生应用仍有差距。产品预期摆正了，接下来才是日常运营——执照的更新与维护。

工程实践：开店后的运维手册

店铺开张后，执照不是一劳永逸的。部署 manifest 时，用一行 <link rel="manifest" href="/manifest.json"> 把它挂到页面上，文件可以放在站点根目录或 CDN；上线前用 Lighthouse 的 PWA 审计做一轮“体检”，就像请第三方质检员来店里打分。

在多品牌、多站点的场景下，manifest 通常由构建脚本或后端动态生成，同一套模板注入不同品牌的名称与配色。AI 时代还有一个新玩法：用大语言模型（LLM）对 manifest 做合规审查，检查字段完整性、图标是否齐备、display 取值是否合法——相当于给执照审核配了一位“AI 监理”，把人工 Review 的漏检率降下来。更新策略同样值得重视：浏览器对 manifest 有约 24 小时的缓存窗口，也就是说，改完执照后最迟一天内会生效，但已经钉在用户桌面上的旧招牌不会自动更换。

从办执照、填字段、钉招牌、装迎宾灯，到日常运维，一条完整的“店铺入驻”链路已经打通。现在，轮到 AI 从业者思考：如何把这条路真正用到自己的产品里，让 AI 应用也拥有一扇随时可敲的门。

AI 应用场景

Python 演示

import json # 营业执照必填栏：少一项都拿不到固定摊位REQUIRED_FIELDS = ["name", "short_name", "start_url", "display", "icons"] def validate_manifest(manifest):    report = {}    for field in REQUIRED_FIELDS:        report[field] = field in manifest and bool(manifest[field])    icons = manifest.get("icons", [])    sizes = [i.get("sizes", "") for i in icons]    report["icon_192"] = any(s.startswith("192") for s in sizes)    report["icon_512"] = any(s.startswith("512") for s in sizes)    report["https"] = manifest.get("start_url", "").startswith("https://")    report["display_ok"] = manifest.get("display") in ("standalone", "fullscreen", "minimal-ui")    return report def install_check(report):    missing = [k for k, v in report.items() if not v]    return len(missing) == 0, missing def main():    sample_manifest = {        "name": "Todo PWA",        "short_name": "Todo",        "start_url": "https://todo.example.com/?source=manifest",        "display": "standalone",        "background_color": "#ffffff",        "theme_color": "#818CF8",        "icons": [            {"src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png"},            {"src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png"}        ]    }    report = validate_manifest(sample_manifest)    ok, missing = install_check(report)    for key in sorted(report):        print(f"{key:>10} : {'OK' if report[key] else 'MISSING'}")    print("INSTALLABLE" if ok else "NOT_INSTALLABLE -> " + ",".join(missing)) if __name__ == "__main__":    main()

1. REQUIRED_FIELDS = [...]定义“执照必填栏”，这些字段缺一不可。
2. report[field] = field in manifest and bool(manifest[field])逐格核对：字段既要存在，又不能是空值。
3. sizes = [i.get("sizes", "") for i in icons]从图标清单里抽出所有尺码，准备做规格检查。
4. report["icon_192"] = any(s.startswith("192") for s in sizes)确认至少有一块 192px 的招牌，满足桌面图标需求。
5. report["https"] = manifest.get("start_url", "").startswith("https://")安全门禁检查，非 HTTPS 一律不给入驻资格。
6. report["display_ok"] = manifest.get("display") in (...)营业模式必须取合法四档之一，乱填会直接判不合格。
7. missing = [k for k, v in report.items() if not v]收集所有不合格项，方便定位“缺哪道检查”。
8. print(f"{key:>10} : {'OK' if report[key] else 'MISSING'}")打印格式化质检单，一眼看清哪里亮红灯。
9. if __name__ == "__main__":提供可执行入口，命令行直接运行即出报告。

常见误区

面试题