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

myss37ts  于 2023-01-15  发布在  Go
关注(0)|答案(7)|浏览(228)

我刚刚更新到Android O预览版,安装了一些PWA。在主屏幕上,一个微型的Chrome徽标放在图标旁边。在操作系统更新之前,这个图标是没有的。
理想情况下,我希望PWA在主屏幕上看起来像一个普通的应用程序,因为它启用了服务工作者。
是否可以通过app.yaml或manifest.json中的一些设置来删除此错误?

ecfsfe2w

ecfsfe2w1#

上面的答案是不准确的,除了部分Chrome有添加Chrome徽章到应用程序图标的问题,这是在以下更新中更改。

在深入了解问题所在之前,先来看看如何将Web应用程序添加到主屏幕。

1)就像一条捷径(如书签),当用户的Web浏览器不支持service worker时(所有最新版本的主要浏览器现在都支持),目标Web URL未配置有效的manifest.json和service worker文件(这可以在chrome开发者工具中的应用程序-〉清单和服务工作者标签中验证).在这种情况下,添加到主屏幕的不是APK,书签类型的快捷方式由带有徽章的特定版本Chrome表示。
2)作为已安装的APK:当目标URL具有有效的Manifest.json、服务工作程序并且使用了一个受支持的Chrome版本时,Chrome for Android将使用WebAPK构建并签署一个.APK文件,文件包名称以“org.chromium.webapk”开头。Read here有关APK生成和PWA分发的详细信息,请单击此处。

以上答案/链接文章中哪些内容不准确,

1)Chrome徽章不是一项安全措施。Chrome团队为创建为书签/URL快捷方式的Web应用添加了徽章,因为在某些特定版本中未使用WebApk。徽章是一种简单的视觉表现形式,后来被撤回。
2)**PWA不会因WebApk而被放弃。**WebApk是PWA解决方案的一部分,它通过构建可安装的APK文件来实现类似原生应用的行为,从而对PWA形成补充。Android版Chrome使用WebApk构建.apk文件。Here is official read me file.
因此,如果你正在建立一个PWA,你仍然可以放心,你不会落后于过时/被遗弃/被遗弃的技术。它仍然是一个不断进步的积极,它得到了iOS的支持服务工人在3月-2018(iOS 11.3),使其成为最后一个主要的浏览器供应商搭载PWA游戏。

56lgkhnf

56lgkhnf2#

请注意,如果手机没有启用Google Play帐户,那么所有的pwa将只作为书签安装。这发生在我们使用新手机测试我们的pwa

xcitsw88

xcitsw883#

这是一项简单的安全措施,因为PWA是书面打开浏览器窗口,小图标表示使用的是哪个浏览器:
从Android Oreo开始,每一个从Chrome添加的快捷方式(可能还有其他浏览器,但它们现在不工作)都会在图标的右下角有一个Chrome徽章。
无论如何,PWA似乎被抛弃了,因为新的WebAPK功能明显更强大,而且实际上支持普通图标
启用WebAPK后,图标恢复正常,就像我们在奥利奥之前在Android中使用的那样
报价来源:https://medium.com/@firt/android-oreo-takes-a-bite-out-of-progressive-web-apps-30b7e854648f

cunj1qz1

cunj1qz14#

有时我们只是错过了以下之一,这阻止了我们将其作为PWA添加到移动的:
1.使用https代替http(很容易被忽略)。
1.一个或多个service worker

  1. manifest文件。
mzsu5hc0

mzsu5hc05#

2021年,我在Android 11和Chrome 92上遇到了这种情况,于是我四处查看,生成了一份Lighthouse审计报告,并被告知以下两件事需要绿色化:

  • 不提供有效的苹果触摸图标

当用户向主屏幕添加渐进式Web应用时,为了在iOS上获得理想的外观,请定义apple-touch-icon。它必须指向非透明的192 px(或180 px)方形PNG. Learn More

  • 清单具有可屏蔽图标

一个可屏蔽图标确保图像填充整个形状,而不会在设备上安装应用程序时被信箱化。Learn more.
还有一点是关于HTTP不自动重定向到HTTPS,但在修复了上面两点后,一切都神奇地活了起来,我的Chrome以及Edge正确地显示应用程序安装提示以及图标sans的Chrome/Edge图标。
仅供参考,可屏蔽图标链接建议使用以下应用程序:https://maskable.app/editor

643ylb08

643ylb086#

除了其他答案。用户也需要足够的空间,在他们的设备上,否则它将被安装为书签。这发生在我身上。

0lvr5msh

0lvr5msh7#

在我的例子中,这是因为我的 *-maskable.png图标(PWA将在其闪屏上使用的图标版本)具有32位色深。
它有这个32位颜色深度,因为我的 * 其他 * 图标(其他大小,浏览器标签,书签等)有一个透明的背景,因此必须是32位。
但是可屏蔽的PNG不能有透明的背景,它必须有一个纯色背景(即白色),并且是24位色深。
上面的工具都没有为我强调这个问题:(

相关问题