Install To Home Screen on iOS for PWA enabled app

ios angular progressive-web-apps

15,927

Solution 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

Solution 2

Update March 2020

While the add-to-homescreen prompt support is still not available on iOS, the pwacompat package (developed by the Google Chrome team), will allow you to easily generate the required assets(splash images and touch icons) for PWA support on iOS devices.

Installation:

npm i pwacompat

This will ensure that your PWA will be supported even in non-compliant devices/browsers, without the need to manually specify the link tags on your document's <head>. More specifically, for the case of Safari, the pwacompat package will do the following:

Sets apple-mobile-web-app-capable (opening without a browser chrome) for display modes standalone, fullscreen or minimal-ui

Creates apple-touch-icon images, adding the manifest background to transparent icons: otherwise, iOS renders transparency as black

Creates dynamic splash images, closely matching the splash images generated for Chromium-based browsers

You may read more about the package on their documentation.

On Android devices(or more specifically, Chrome mobile web browsers on Android devices), PWA-enable web apps will receive a prompt to encourage the user to add the PWA to the Home Screen. It may look something like this:

Image credits: Andy Osmani (Getting started with Progressive Web Apps)

On the other hand, 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:

Image credits: Expo

The following types of asset files (Touch icons, and Splash screens) are required for PWAs on iOS devices.

1) Touch Icons

On the header tag of your index.html, you will have to add <link rel="apple-touch-icon" sizes="192x192" href="/example.png">, like this:

<head>

    <link rel="apple-touch-icon" sizes="192x192" href="/example.png">

</head>

Do take note that the icons size should be at least 180x180 pixels or 192x192 pixel. You may read up on the good practices on the documentation.

2) Splash Screens

You will use the rel attribute apple-touch-startup-image to enable splash screens on iOS devies.

<head>

  <link
    rel="apple-touch-startup-image"
    media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
    href="example2.png"
  />

</head>

Here is a working example by Evan Bacon of the full list of tags will need for the touch icons

You may also 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 🙃

Solution 3

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 });
}

Solution 4

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.

View more solutions

15,927

Author by

ustad

Updated on June 24, 2022

Comments

ustad about 2 years

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?
ustad about 5 years

Thanks so much @Robinyo, I'll definitely try that. In my past research, I was reading conflicting documentation on the meta tags. Some say take it out as it causes issues since the manifest.json is all that is needed and some say put it in. I'll give it a shot and report back. Thanks again!
ustad about 5 years

So the above meta tags will allow the pwa app to be installed on the homescreen but only when you go through a few steps which the user would have to do manually... is there a way to get Safari/Chrome on iOS to automagically prompt the user?
Rahul Vyas over 3 years

how did you displayed prompt on iOS ?