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

【问题标题】：PWA not showing in Android apps drawerPWA 未显示在 Android 应用程序抽屉中
【发布时间】：2018-03-26 23:00:06
【问题描述】：

我们的用户一直报告说我们的 Progressive Web App 没有显示在他们的应用程序抽屉中。我在运行 Google Chrome 65 的三星 Galaxy S5 和 S6 上复制了此内容。我使用菜单“添加到主屏幕”，该图标显示在主屏幕上，但未显示在“应用程序”抽屉中或在应用程序管理器设置屏幕中。

这表明我的 PWA 没有得到“WebAPK”又名“Improved Add to Home Screen”的处理，但我终生无法弄清楚原因。根据 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"
}

【问题讨论】：

标签： android google-chrome progressive-web-apps

【解决方案1】：

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

无法安装站点：清单不包含合适的图标 - 需要至少 144 像素的 PNG 格式，sizes 属性必须设置，并且如果设置了 purpose 属性，则必须包含“any”。

更多信息：

要让Web App Install Banners 中列出的 WebAPK 有几个要求

当您的应用符合以下标准：

有一个网络应用清单文件：

短名称（在主屏幕上使用）

名称（用于横幅）

192x192 png 图标（图标声明必须包含 mime 类型的 image/png）

加载的 start_url

在您的网站上注册了一名服务人员

通过 HTTPS 提供服务（使用 service worker 的要求）。遇到一个由 Chrome 定义的网站参与启发式（这通常是更改）。

从 Chrome 68 开始，您需要处理“beforeinstallprompt” 事件并在用户手势上调用 prompt() 以获取添加到主屏幕 (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 上提供。

参考：Progressive Web Apps coming to all Chrome platforms

如何知道您是否有 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。

【讨论】：

需要明确的是，使用 Chrome 开发工具 -> 应用程序 -> 清单 -> 添加到主屏幕时会出现该消息（“无法安装站点”）。（我只是在 A2HS 中使用 Chrome 的面向用户的菜单。）
你说得对，我的问题是有一个 JPG 图标，而我应该有一个 PNG 图标。特别不幸的是，Lighthouse 没有在其 PWA 审计中标记这一点。我已经为此提交了一个错误。 github.com/GoogleChrome/lighthouse/issues/4876
我正在为 wordpress 博客使用 SuperPWA 插件。对于某些手机，例如华为 P9 和 Vivo V4 型号，PWA 作为快捷方式安装。以及某些模式，例如 Huawei Rio L01 它被安装为 WebApk；小米手机的chrome浏览器没有安装PWA的提示。我的目标是将 PWA 作为 WebAPK 安装在所有类型的 Android 设备上。我该如何解决这个问题？
如果用户没有登录他们的谷歌账户，PWA 将不会安装。它将被保存为书签。所以请确保用户已经登录。

【解决方案2】：

即使根据 Matija 响应设置所有要安装的 WebAPK，您仍然可能会获得一个快捷方式。

这发生在 2020 年 11 月 23 日。唯一的区别是我们使用 3G 数据 而不是 WiFi。

在同一设备上通过 WiFi 进行的相同过程导致 WebAPK 安装。似乎 Google 可能会根据设备的可用连接速度来决定 WebAPK 与快捷方式。请记住这一点。

如果更多人可以通过 Chrome 86.0.4240.198 确认以下观察结果，那就太好了：
Android 7.0 版 没有任何用户使用 Chrome 进行签名 p>

【讨论】：