Install To Home Screen on IOs for PWA enabled app

问题

I've added the pwa modules (or schematic) and I've setup my manifest.json file correctly. On an Android device, my service workers are engaged, I get the install to home screen prompt and the address bar disappears and I can see the native look and feel. However, on Chrome/Safari IOs there is no prompt. Is there anything I need to do programmatically/additionally?

回答1:

iOS

My PWA's index.html includes the following iOS specific meta tags:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Brew">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-ipad.png" type="image/png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-ipad-retina.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-iphone-retina.png" type="image/png">

<link rel="mask-icon" href="assets/images/icons/safari-pinned-tab.svg" color="#5bbad5">

The "apple-mobile-web-app-capable" and the "apple-mobile-web-app-title" meta tags are required by Safari to show the 'Add to Home' screen:

Ref: PWA Tips and Tricks

回答2:

Unlike on Android devices (or more specifically, Chrome mobile web browsers on Android devices), iOS does not support that PWA installation prompt. Users can only add it as a PWA by tapping it on the 'Add to Homescreen' button. For those who are wondering, the OP is referring to this feature.

However, you may check out this blog for the list of PWA features supported on iOS.

Of course, there is that conspiracy theory whereby Apple is intentionally slowing down the adopting of PWAs due to the possiblity of competition with their native App Stores, which is a huge source of revenue for the company. I leave it for you to decide if that is really true 🙃

回答3:

I use JavaScript in both iOS and on android to check if the app is in standalone mode and display a prompt on iOS and non-chrome browsers in android. I just let chrome do it's thing as it's efficient enough. On iOS, only safari supports service worker installs for now.

回答4:

Here is a code snippet for detecting if the app is on IOS and triggering a popup to add to home screen:

// Detects if device is on iOS 
const isIos = () => {
  const userAgent = window.navigator.userAgent.toLowerCase();
  return /iphone|ipad|ipod/.test( userAgent );
}
// Detects if device is in standalone mode
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);

// Checks if should display install popup notification:
if (isIos() && !isInStandaloneMode()) {
  this.setState({ showInstallMessage: true });
}

来源：https://stackoverflow.com/questions/56007571/install-to-home-screen-on-ios-for-pwa-enabled-app