PWA 未显示在 Android 应用程序抽屉中

Question

我们的用户一直报告我们的渐进式网络应用程序没有出现在他们的应用程序抽屉中。我在运行 Google Chrome 65 的三星 Galaxy S5 和 S6 上重现了这一点。我使用菜单“添加到主屏幕”，该图标显示在主屏幕上，但没有显示在“应用程序”抽屉或在应用程序管理器设置屏幕中。

这对我来说表明我的 PWA 没有得到“WebAPK”又名“改进的添加到主屏幕”处理，但我一生都无法弄清楚为什么。根据 Google 的链接，改进的 A2HS 已向 Chrome 59 中的所有用户推出。

这是我的manifest.json文件，其中name、short_name、scope和start_url已更改为示例值。

{
  "name": "Example",
  "short_name": "Example",
  "icons": [
    {
      "src": "icon.jpg",
      "sizes": "1024x1024",
      "type": "image/jpg"
    }
  ],
  "scope": "https://www.example.com/my-url/",
  "start_url": "https://www.example.com/my-url/",
  "display": "standalone",
  "background_color": "#626160",
  "theme_color": "#626160"
}

Answer 1

在您的情况下，您没有看到添加到主屏幕 (A2HS) 横幅，因为图标定义为 image/jpg。

无法安装网站：清单不包含合适的图标 - 需要至少 144 像素的 PNG 格式，必须设置尺寸属性，并且目的属性（如果设置）必须包含“任意”。

更多信息：

要使 WebAPK 在Web 应用程序安装横幅中列出，需要满足几个要求

当您的应用满足以下条件时，Chrome 会自动显示横幅：

有一个网络应用程序清单文件，其中包含：

• 短名称（在主屏幕上使用）
• 名称（在横幅中使用）
• 192x192 png 图标（图标声明必须包含 mime 类型的 image/png）
• 加载的 start_url
• 有一名 Service Worker 在您的网站上注册

通过 HTTPS 提供服务（使用 Service Worker 的要求）。符合 Chrome 定义的网站参与启发式（定期更改）。

从 Chrome 68 开始，您将需要处理“beforeinstallprompt”事件并在用户手势上调用提示（）以获取添加到主屏幕（A2HS），它不会自动发生。

为了绝对确保您将获得 WebAPK 而不是快捷方式，请确保以下几点：

• 您需要 GSM Core 才能安装为 WebAPK
• 可用的 Web 应用程序清单
• 在 Web 应用程序清单中提供了大小合适的图标
• Service Worker 注册成功
• 具有 fetch 事件的 Service Worker

鉴于上述所有内容都可以，APK 服务需要可用且可访问，因为 APK 是在服务器上生成并通过 GMS Core 安装的。如果您没有互联网连接，它可能会默认为主屏幕上的快捷方式。

在哪里可以安装 PWA？

PWA 目前可安装在Android上：

• 铬合金
• 三星
• 火狐浏览器，
• 歌剧，
• UC

并将很快在 iOS、Windows 10、macOS、ChromeOS 上推出。

参考：渐进式网络应用程序即将登陆所有 Chrome 平台

如何知道你是否有WebAPK或快捷方式？

• 如果 PWA 位于 Android 应用程序抽屉中 - 它是一个 WebAPK。

• 如果长按 PWA 的屏幕图标，您可以选择“卸载” - 那么它就是一个 WebAPK

• 如果您只看到“删除”选项 - 那么它就是一个快捷方式

测试你的 PWA

测试时应使用的两个标志

chrome://flags/#allow-insecure-localhost

chrome://flags/#bypass-app-banner-engagement-checks

您可以使用adb shell am start它来帮助启动 Chrome，同时启用这两个功能，而无需通过 UI。