iOS PWA支持有限但需满足特定规则:必须声明apple-mobile-web-app-capable等meta标签、单独定义apple-touch-icon,且依赖用户手动“添加到主屏幕”;Lighthouse满分不等于真实可用,须手动测试离线加载、SW激活状态及安装流程。
核心判断很简单:能装进手机桌面、能离线打开、有独立窗口、不显示地址栏,这四点都做到,才算真正意义上的 PWA。
这是 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 是 PWA 离线能力的核心。它是个 JS 脚本,但必须通过 HTTPS(或 localhost)加载,否则注册会静默失败。
async 延迟),常见位置是 写在