网页app模式启动指网页在ios/android主屏幕图标打开时以全屏类原生方式运行，需manifest.json与meta标签协同实现：必须配置viewport控制缩放、apple-mobile-web-app-capable="yes"启用ios全屏、apple-mobile-web-app-status-bar-style指定状态栏样式，且强制要求https。
什么是“网页APP模式启动”
所谓网页APP模式启动，指的是让网页在 iOS 或 Android 设备上通过主屏幕图标打开时，不显示地址栏、导航栏，以全屏类原生应用的方式运行。这靠的是 manifest.json + meta 标签组合实现，不是单靠 HTML 就能搞定——但 HTML 是入口，必须正确声明。
必须加的 <meta> 标签有哪些
只加一两个 meta 标签就指望 APP 模式生效，是常见失败原因。以下三项缺一不可，且顺序和值必须严格：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">—— 控制缩放是基础，否则 iOS 会拒绝进入全屏模式 -
<meta name="apple-mobile-web-app-capable" content="yes">—— iOS 专属开关，content必须是yes，写成true或空值无效 -
<meta name="apple-mobile-web-app-status-bar-style" content="default">—— 决定状态栏颜色（default/black/black-translucent），不加也可能导致部分 iOS 版本 fallback 到浏览器模式
Android 的 PWA 全屏行为依赖 manifest.json，这些 meta 标签对 Android 影响有限，但 iOS 离不开它们。
manifest.json 文件怎么配才被识别
HTML 中必须用 <link rel="manifest" href="/manifest.json"> 引入，且路径要能被直接访问（比如在浏览器里输入 https://yoursite.com/manifest.json 能看到 JSON 内容）。常见失效原因是：
- 文件 MIME 类型不对：服务器必须返回
Content-Type: application/manifest+json或至少application/json；Nginx/Apache 需显式配置，否则 Chrome 会静默忽略 -
start_url和scope不匹配：比如start_url: "/app/"但实际部署在根路径，会导致安装后白屏 -
display值必须是standalone或fullscreen；minimal-ui已被现代浏览器废弃，不会触发 APP 模式 - 图标尺寸缺失：至少提供
192x192和512x512两种 PNG，且purpose: "any"（iOS Safari 对图标purpose有要求）
为什么加了还是跳转到 Safari/Chrome
最常被忽略的点：HTTPS 是硬性前提。HTTP 站点无论怎么配 manifest 和 meta，iOS 和 Chrome 都拒绝启用 APP 模式。另外：
- iOS 16.4+ 要求网站必须被用户「手动添加到主屏幕」才会触发
apple-mobile-web-app-capable行为；仅靠链接点击不会自动全屏 - Chrome on Android 会检查
manifest是否满足「可安装性」：页面需有合法 HTTPS、注册 Service Worker、且用户与页面有至少 30 秒交互（避免误装） - 缓存干扰：改完
manifest.json后，旧版本可能被缓存；可在manifest文件名加哈希（如manifest.a1b2c3.json）并更新<link>，或临时禁用缓存调试
真正起效时，用户从主屏幕点击图标打开，URL 栏消失，窗口大小等于视口，且 window.navigator.standalone === true（仅 iOS 可靠）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
