PWA: 如何通过编程触发 iOSSafari 上的“添加到主屏幕”

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

所以我很满意我的 PWA，但我真的很想告诉用户这个应用程序可以添加到主屏幕。

在我的记忆中，我看到 https://marvelapp.com/正在为主屏幕添加一个原型。

92334 次浏览
小开
最佳答案

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

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.

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).

小开

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

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

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

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

小开

Please note that Chrome (on Android) is the only browser that auto-prompts the user to install your PWA. You should handle iOS & other Android browsers manually. Statistics say (updated 2021) that the top 3 mobile browsers are Chrome, Safari & Samsung internet (<6%).

You can use this code to help you prompt:

// helps you detect mobile browsers (to show a relevant message as the process of installing your PWA changes from browser to browser)
var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i);
},
Samsung: function () {
return navigator.userAgent.match(
/SAMSUNG|Samsung|SGH-[I|N|T]|GT-[I|N]|SM-[A|N|P|T|Z]|SHV-E|SCH-[I|J|R|S]|SPH-L/i,
);
},
Windows: function () {
return (
navigator.userAgent.match(/IEMobile/i) ||
navigator.userAgent.match(/WPDesktop/i)
);
},
any: function () {
return (
isMobile.Android() ||
isMobile.BlackBerry() ||
isMobile.iOS() ||
isMobile.Opera() ||
isMobile.Windows()
);
},
};


// use this to check if the user is already using your PWA - no need to prompt if in standalone
function isStandalone(): boolean {
const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
if (document.referrer.startsWith("android-app://")) {
return true; // Trusted web app
} else if ("standalone" in navigator || isStandalone) {
return true;
}
return false;
}

As for installing instructions:

Chrome - auto
Safari - Press "Share" icon then "Add to home"
Samsung internet - An "Install" icon will be shown on the top bar (I didn't quite understand if the app should be registered in Samsung Store for it to show) OR press "Menu" on the bottom bar then "Add/install to home"
Other browsers - Press menu on the bottom/top bar then "Add/install to home"

提交答案