Javascript PWA:如何以编程方式触发:“添加到主屏幕”?在 iOS Safari 上

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/51160348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 04:46:40  来源:igfitidea点击:

PWA: How to programmatically trigger : "Add to homescreen"? on iOS Safari

javascriptdownloadprogressive-web-apps

提问by Guillaume Le Mière

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.

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

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.

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

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

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

采纳答案by Anand

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

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

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

无法在 Android 中以编程方式触发安装横幅,除非您捕获 beforeInstallPromot 并使用它来显示横幅。

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. Hereis some code example for the same, which is iOS specific(look under #PROTIP 3).

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

回答by Alan

For now, Apple doesn't give the possibility to make this "Add to home screen" experience easy.

目前,Apple 无法让这种“添加到主屏幕”体验变得简单。

You can provide a tooltip explanation to your users though, for IOs users: enter image description here

不过,对于 IO 用户,您可以向用户提供工具提示说明: enter image description here

Details explained here: https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

详细说明在这里:https: //www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

PROTIP 3: Create an “Add to home screen” popup yourself!

技巧 3:自己创建一个“添加到主屏幕”弹出窗口!