PWA在Android上无法安装到主屏幕是怎么回事？

司马洛熙提问于 2026-03-19 01:24:22 阅读 27

移动

我用Vue写了个PWA应用，iOS上能正常添加到主屏幕，但在Android Chrome里点“安装”没反应，控制台也没报错。manifest.json里"display": "standalone"也设置了，到底还缺啥？

这是我的manifest配置：

{
  "name": "My PWA App",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

PWA移动

我来解答赞 3 收藏

反馈

1 条解答

Good“誉琳 Lv1

Android上PWA安装不了，基本就这几个坑：

1. 图标尺寸不全 - 你只配置了192x192，必须再加512x512的，而且最好加上purpose属性：

"icons": [

  {

    "src": "/icon-192.png",

    "sizes": "192x192",

    "type": "image/png",

    "purpose": "any maskable"

  },

  {

    "src": "/icon-512.png",

    "sizes": "512x512",

    "type": "image/png",

    "purpose": "any maskable"

  }

]

2. Service Worker没生效 - PWA安装需要SW正确注册且缓存了资源。在main.js里加一下：

if ('serviceWorker' in navigator) {

  navigator.serviceWorker.register('/sw.js')

    .then(reg => console.log('SW registered'))

    .catch(err => console.error('SW failed', err));

}

3. HTTPS问题 - 生产环境必须用HTTPS，localhost除外

4. start_url路径 - 建议明确写成完整路径或者 "./"

检查一下Chrome的Application面板，看看Manifest和Service Worker是不是都显示绿色勾。DevTools里也有个"Installability" tab会告诉你为什么不显示安装按钮。

2026-03-19 02:00