PWA 安装信号：Web App Manifest 与可安装性条件

--- title: PWA 安装信号：Web App Manifest 与可安装性条件 keywords: - Web App Manifest - 可安装性 - maskable icon - display-mode - theme_color - 安装提示 description: 总结 PWA 的可安装性信号与必要条件，包含 Manifest 字段、Service Worker、HTTPS 与图标规范，解释安装提示与用户体验注意，并附参考。 categories: - 文章资讯 - 软件教程 --- # 概述 PWA 的安装体验依赖于清晰的可安装性信号：有效的 Manifest、注册的 Service Worker 与 HTTPS。图标与显示模式配置影响桌面与移动端的安装质量。 # 必要条件与字段 - HTTPS 与 Service Worker（含 fetch 事件）；Manifest 中包含 `name/short_name/start_url/scope/icons` 等［参考1］。 - 图标：提供多尺寸与 `purpose: maskable` 以适配设备圆角与裁剪；至少包含 `512x512` PNG［参考2］。 - 显示模式与颜色：`display: standalone` 或 `fullscreen`；`theme_color` 与 `background_color` 影响启动体验。 # 安装提示与 UX - 监听 `beforeinstallprompt`；提供非强打扰的安装引导；在用户拒绝后避免重复弹窗。 - 在安装后提供离线与启动速度优化，提升留存。 # 参考与验证 - ［参考1］web.dev：PWA 可安装性条件与清单字段说明：https://web.dev/articles/install-criteria - ［参考2］web.dev：Maskable 图标指南与生成器：https://web.dev/articles/maskable-icon - ［参考3］MDN 中文：Web App Manifest 与字段说明：https://developer.mozilla.org/zh-CN/docs/Web/Manifest # 关键词校验 关键词与 PWA 安装信号一致。