如何从 PWA 应用程序主屏幕 Link 中删除 Chrome 徽标(Android O 预览)

How to Remove Chrome Logo from PWA App Home Screen Link (Android O Preview)

我刚刚更新到 Android O Preview 并安装了一些 PWA。在主屏幕上,图标旁放置了一个微型 Chrome 徽标。这在 OS 更新之前是不存在的。

理想情况下,我希望 PWA 在主屏幕上看起来像一个常规应用程序,因为它启用了服务工作者。

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

这是简单的安全措施,因为 PWA 是文学性的打开浏览器 window 并且小图标表示使用的是哪个浏览器:

Starting with Android Oreo, every shortcut added from Chrome (and potentially other browsers as well, but they are not working now) will have a Chrome badge at the lower right corner of the icon.

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

With WebAPK enabled, icons are back to normal as we were used in Android before Oreo

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

除了 Chrome 将 Chrome 徽章添加到 App 图标的问题外,以上答案不准确,该问题在以下更新中有所更改。

在进入问题之前,以下是将网络应用程序添加到主屏幕的方式。

1) 作为一个简单的快捷方式(类似于书签),当用户的网络浏览器没有 service worker 支持时(which all recent versions of major browsers have support now),目标网络 URL 没有配置有效的 manifest.json 和 service worker 文件(这可以在 chrome 开发人员工具中的 Application-> Manifest 和 Service worker 选项卡中验证)。在这种情况下,添加到主屏幕的不是 APK,书签类快捷方式由带有徽章的特定版本 Chrome 表示。

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

以上answer/linked文章有什么不准确的地方,

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

2) PWA 并没有因为支持 WebApk 而被放弃。WebApk 是 PWA 解决方案的一部分,它通过构建可安装的 APK 文件来获得类似本机应用程序的行为来补充 PWA。 Chrome for Android 使用 WebApk 构建 .apk 文件。 Here is official read me file.

因此,如果您正在构建 PWA,您仍然可以放心,您不会落后于 outdated/abandoned/being 废弃的技术。它仍然在不断地积极进步,在 2018 年 3 月(iOS 11.3)获得了对 service worker 的 iOS 支持,使其成为 PWA 游戏中最后一个主要的浏览器供应商。

请注意,如果 phone 未启用 google 播放帐户,则所有 pwa 将仅作为书签安装。这发生在我们使用新的 phone 来测试我们的 pwa

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

  1. 使用 https 而不是 http(很容易被忽略)。
  2. 一个或多个service worker.
  3. 一个manifest文件。

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

  • 没有提供有效的 apple-touch-icon

For ideal appearance on iOS when users add a progressive web app to the home screen, define an apple-touch-icon. It must point to a non-transparent 192px (or 180px) square PNG. Learn More.

  • 清单有一个可屏蔽的图标

A maskable icon ensures that the image fills the entire shape without being letterboxed when installing the app on a device. Learn more..

还有一点关于 HTTP 不会自动重定向到 HTTPS,但在修复以上两点后,一切都神奇地活跃起来,我的 Chrome 以及 Edge 正确显示应用程序安装提示为以及图标没有 Chrome/Edge 图标。

仅供参考,可屏蔽图标 link 建议使用以下应用程序:https://maskable.app/editor

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