javascript PWA是什么_如何让网页像应用

12次阅读

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

javascript PWA是什么_如何让网页像应用

浏览器就会允许它被“添加到主屏幕”,并具备离线运行、推送通知、后台同步等类原生应用能力。

核心判断很简单:能装进手机桌面、能离线打开、有独立窗口、不显示地址栏,这四点都做到,才算真正意义上的 PWA。

manifest.json 配置必须存在且合法

这是 PWA 的“身份证”。没有它,iOS 和部分 Android 浏览器根本不会显示「添加到主屏幕」提示。

  • short_namename 都要填,且 short_name 不能超过 12 字符(iOS 截断严格)
  • icons 至少提供 192x192512x512 两档 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 延迟),常见位置是 写在

text=ZqhQzanResources