PWA:如何以编程方式触发:“添加到主屏幕"?在 iOS Safari 上 [英] PWA: How to programmatically trigger : "Add to homescreen"? on iOS Safari

问题描述

我最近发布了一个服务器渲染的渐进式 Web 应用程序，到目前为止一切正常.然而，使用 chrome 的 Android 显示了一个横幅来下载这个很棒的应用程序，但它没有在 iOS 上.使用 Safari 时，用户需要点击几下才能进入添加到主屏幕"功能，这很糟糕.

I released a server rendered progressive web app recently and everything works great so far. However, Android using chrome shows a banner to download the app which is awesome, but it doesn't on iOS. Using Safari, a user needs a few clicks to get to the "Add to homescreen" feature which is bad.

所以我在这里，我对我的 PWA 感到满意，但我真的很想能够自己告诉用户这个应用程序可以添加到主屏幕.

So here I am, I'm satisfied with my PWA, but I would really love to be able to tell the user myself that this app can be added to homescreen.

据我所知，我看到 https://marvelapp.com/ 这样做是为了添加原型到主屏幕.

As far as I can remember, I saw https://marvelapp.com/ doing it to add a prototype to the homescreen.

推荐答案

iOS - Safari 目前不支持 Web 应用安装横幅，就像在 Android - Chrome 中一样.

iOS - Safari currently don't support Web app install banner, like in Android - Chrome.

Android 中也有无法以编程方式触发安装横幅，除非您捕获 beforeInstallPromot并用它来显示横幅.

There is no way to programatically trigger install banner in Android as well, except for the case when you catch the beforeInstallPromot and use that to show the banner.

在链接的答案中，您可以检查关于如何在应用横幅中显示以引导用户添加到主屏幕的替代选项.这里 是相同的一些代码示例，这是特定于 iOS 的(查看 #PROTIP 3).

In the linked answer, you can check on the alternate option on how to show in app banner to guide user to add to home screen. Here is some code example for the same, which is iOS specific(look under #PROTIP 3).

这篇关于PWA:如何以编程方式触发:“添加到主屏幕"?在 iOS Safari 上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！