如何从 PWA 应用主屏幕链接中删除 Chrome 徽标（Android O 预览版）

Posted 2023-02-16

【中文标题】如何从 PWA 应用主屏幕链接中删除 Chrome 徽标（Android O 预览版）

【英文标题】：How to Remove Chrome Logo from PWA App Home Screen Link (Android O Preview)

【发布时间】：2017-10-19 00:08:18

【问题描述】：

我刚刚更新到 android O Preview 并安装了一些 PWA。在主屏幕上，图标旁边会放置一个微型 Chrome 徽标。这在操作系统更新之前不存在。

理想情况下，考虑到 PWA 已启用服务工作者，我希望 PWA 在主屏幕上看起来像一个常规应用。

是否可以通过 app.yaml 或 manifest.json 中的某些设置来删除它？

【参考方案1】：

上面的答案并不准确，除了Chrome在App图标中添加Chrome徽章的问题，这在以下更新中有所改变。

在解决问题之前，先来看看如何将网络应用添加到主屏幕。

1) 作为一个简单的快捷方式（如书签），当用户的 Web 浏览器没有 Service Worker 支持时 (which all recent versions of major browsers have support now)，目标 Web URL 没有有效的清单.json 和配置的服务工作者文件（这可以在 chrome 开发人员工具中的应用程序-> 清单和服务工作者选项卡中进行验证）。在这种情况下，添加到主屏幕的不是 APK，书签类型的快捷方式由带有徽章的特定版本的 Chrome 表示。

2) 作为已安装的 APK：当目标 URL 具有有效的 Manifest.json、使用服务工作者和支持的 Chrome 版本之一时，Chrome for Android 使用 WebAPK 构建和签名一个 .包名称以“org.chromium.webapk”开头的 APK 文件。 Read here 在此处了解有关 apk 生成和 PWA 分发的更多详细信息。

以上答案/链接文章中的不准确之处，

1) 镀铬徽章不是安全措施。 Chrome 团队为创建为书签/URL 快捷方式的 Web 应用程序添加了徽章，因为它在某些特定版本中没有使用 WebApk。徽章是一种简单的视觉表示，后来被撤回。

2) PWA 不会被 WebApk 所取代。WebApk 是 PWA 解决方案的一部分，它通过构建可安装的 APK 文件来获得与本机应用类似的行为来补充 PWA。 WebApk 用于由 Chrome for Android 构建 .apk 文件。 Here is official read me file.

因此，如果您正在构建 PWA，您仍然可以放心，您不会落后于过时/被遗弃/被遗弃的技术。它仍然在不断取得积极进展，它在 2018 年 3 月（ios 11.3）获得了对 service worker 的 iOS 支持，使其成为 PWA 游戏中最后一个主要的浏览器供应商。

【讨论】：

同意。抱歉不清楚/误导性的答案。我可以以某种方式将“已接受”标记切换到您的帖子吗？

Chrome 是唯一支持 WebApk 的 Web 浏览器是否正确，因为所有其他浏览器（Firefox、Edge、Opera）的 PWA 在右下角都包含一个小的浏览器徽标，并且没有列出作为设置中的已安装应用程序？

现在是这样。 WebAPK 是此处列出的 Chrome-Android（不适用于运行 Chrome 的任何其他操作系统）开源项目的一部分。虽然 Firefox 似乎没有关于在 Android 中支持它的官方声明，但我们希望有一天能看到它。 Safari 在 iOS 中有自己的添加到主屏幕的方式，它没有任何关于它如何做的文档，目前，iOS 中没有其他浏览器支持添加到主屏幕，除了 safari。 Microsoft 有自己的方式为 windows (pwabuilder.com) 打包 PWA。 github.com/brave/browser-android-tabs/tree/master/chrome/….

简而言之，只有各自的操作系统作者定义了他们如何为他们的平台打包 PWA 的方式，这是有道理的。向所有浏览器供应商公开这一点是我们可以预期在未来几个月/几年内看到的。

我还是一头雾水... android中什么情况下会添加图标，如何/可以避免？

【参考方案2】：

请注意，如果手机未启用 google play 帐户，则所有 pwa 将仅作为书签安装。这发生在我们使用新手机测试我们的 pwa 时

【讨论】：

天哪，我一直被困在这个问题上，感觉就像永远一样。在这里、商店和 Browserstack 上通过新设备进行了测试，所有这些都出于明显的原因退出了 Google Play。这个答案应该得到更多的关注，在任何地方都找不到这个记录。谢谢！

谢谢。这拯救了我的一天。添加另一个提示：您可以使用 Google 帐户登录，安装 PWA，然后从设备中删除该帐户。 Android 将按预期保留 PWA 图标。登录前不要安装PWA，因为它不会更新图标，只需登录，安装并删除帐户即可。

【参考方案3】：

这是一种简单的安全措施，因为 PWA 会打开浏览器窗口，小图标表示使用的是哪个浏览器：

从 Android Oreo 开始，从 Chrome 添加的每个快捷方式（以及 可能还有其他浏览器，但它们现在不工作）将 在图标的右下角有一个 Chrome 徽章。

无论如何，PWA 似乎被放弃了，因为新的 WebAPK 功能明显更强大，实际上支持普通图标

启用 WebAPK 后，图标恢复正常 奥利奥之前的安卓

报价来源：https://medium.com/@firt/android-oreo-takes-a-bite-out-of-progressive-web-apps-30b7e854648f

【参考方案4】：

有时我们只是错过了以下一项，这会阻止我们将其作为 PWA 添加到移动设备：

使用https 而不是http（很容易被忽略）。 一个或多个service worker。 manifest 文件。

【讨论】：

我的 React 应用程序缺少服务人员，这就是为什么我看到 chrome 图标被添加到我的应用程序图标中的原因。 CRA 默认停止运送服务人员，所以我不得不手动将其添加到工作中。 create-react-app.dev/docs/making-a-progressive-web-app

【参考方案5】：

2021 年，我在 Android 11 和 Chrome 92 上发生了这种情况，所以我环顾四周，生成了一份 Lighthouse 审计报告，并被告知以下两件事需要绿色：

不提供有效的 apple-touch-icon

当用户将渐进式 Web 应用程序添加到主屏幕时，为了在 iOS 上获得理想的外观，请定义 apple-touch-icon。它必须指向不透明的 192 像素（或 180 像素）方形 PNG。 Learn More.

清单有一个可屏蔽的图标

在设备上安装应用程序时，可屏蔽图标可确保图像填充整个形状而不会被加黑。 Learn more..

还有一点关于 HTTP 不会自动重定向到 HTTPS，但是在修复了上述两点之后，一切都神奇地恢复了，我的 Chrome 和 Edge 正确显示了应用程序安装提示，并且图标没有Chrome/Edge 图标。

仅供参考，可屏蔽图标链接建议使用以下应用：https://maskable.app/editor

【参考方案6】：

对其他答案的补充。用户还需要在他们的设备上有足够的空间，否则它将被安装为书签。这发生在我身上。

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review