iOS PWA支持有限但需满足特定规则:必须声明apple-mobile-web-app-capable等meta标签、单独定义apple-touch-icon,且依赖用户手动“添加到主屏幕”;Lighthouse满分不等于真实可用,须手动测试离线加载、SW激活状态及安装流程。

核心判断很简单:能装进手机桌面、能离线打开、有独立窗口、不显示地址栏,这四点都做到,才算真正意义上的 PWA。
manifest.json 配置必须存在且合法
这是 PWA 的“身份证”。没有它,iOS 和部分 Android 浏览器根本不会显示「添加到主屏幕」提示。
-
short_name和name都要填,且short_name不能超过 12 字符(iOS 截断严格) -
icons至少提供192x192和512x512两档 PNG,路径必须可访问(推荐用绝对路径,如/icons/icon-192.png) -
start_url必须是相对根路径的可访问 URL,比如/或/app/,不能是./index.html -
display推荐设为"standalone"(隐藏浏览器 UI)或"minimal-ui"(仅留返回按钮),"browser"就不算 PWA
{
"short_name": "MyApp",
"name": "My Awesome Progressive Web App",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#4285f4",
"background_color": "#ffffff"
}
必须注册一个有效的 Service Worker
Service Worker 是 PWA 离线能力的核心。它是个 JS 脚本,但必须通过 HTTPS(或 localhost)加载,否则注册会静默失败。
- 注册代码必须放在页面顶层作用域(不能在模块里、不能被
async延迟),常见位置是写在











