Question

我已经创建了PWA，并且移动版Chrome允许使用适当的图标添加到主屏幕。 Firefox还允许安装到主屏幕，但没有图标？

我的index.html包含：

<link rel="manifest" href="/manifest.json" />

我的manifest.json看起来像这样：

{
  "short_name": "coolapp",
  "name": "coolapp",
  "icons": [
    {
      "src": "assets/pwa/android-launchericon-36-36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-48-48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-72-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-96-96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-128-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-144-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/android-launchericon-192-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/pwa/splash-128-128.png",
      "sizes": "128x128",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "orientation": "portrait"
}

因此该图标对两者均适用，直到我添加了“ beforeinstallprompt”处理，现在该图标仅适用于Chrome，而不适用于Firefox。我是否也正确地指出“ beforeinstallprompt”永远不会调用FF，而只会调用Chrome？在FF上，浏览器中会出现一个带有+的主屏幕图标，供用户安装到主屏幕-但它的安装方式不像Chrome，而是应用程序（它更像是快捷方式，而Chrome需要经过整个过程）

Answer 1

'beforeinstallprompt'仅在Chrome中可用，是的。

尽管PWA通过Firefox和Opera在Android上运行，但只有Chrome具有适当的独立支持。如您所说，通过Firefox或Opera安装的PWA只会在您的主屏幕上显示为快捷方式。但是，它仍然可以用作PWA，但由于它不在应用程序抽屉中，因此看起来很正常。

创建的PWA-适用于Chrome的主页图标有效，但不适用于Firefox

1 个答案: