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

Question

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.

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.

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

There is no such thing as a silly question :) Yes, I searched, and found a lot of documentation regarding the manifest.json file to enable the user to be prompted by the browser, but nothing regarding programmatically triggering this action from the website. — glemiere, Jul 03 '18 at 17:55
@GuillaumeLeMière I've looked before, and the best I've found is https://dockyard.com/blog/2017/09/27/encouraging-pwa-installation-on-ios, but I'm also very interested if there's a native prompt for it — m0meni, Jul 03 '18 at 17:56
Nice article @m0meni! Is there any other solution than just telling the user which manipulation to do to your knowledge ? Because this is exactly what I wanted to avoid lol. — glemiere, Jul 03 '18 at 18:02
@GuillaumeLeMière not as far as I know, which is why I'm also eagerly watching this question haha. I think the answer is that it's not yet implemented natively on safari as it only got PWA support one point release ago, but also I want to remain cautiously optimistic and hope I'm wrong. — m0meni, Jul 03 '18 at 18:04
Meh, I was fearing the same thing, they barely started to support web workers at the beginning of this year :/ They're not likely to support the prompt very soon, they love their AppStore review too much. Well, let's see if someone comes with some kind of hack #PrayForPWA — glemiere, Jul 03 '18 at 18:06

score 71 · Accepted Answer · edited Jul 08 '23 at 13:51

71

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

There is no way to programmatically 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).

edited Jul 08 '23 at 13:51

greybeard

2,249
8
30
66

answered Jul 03 '18 at 18:30

Anand

9,672
4
55
75

1

While the linked SO answer was related to PWAs in general and therefore allowed to only note a link to an external solution for iOS, this question here was specifically related to the iOS-PWA-problem. So your answer is a link-only-answer and becomes useless as soon as the linked website is going offline. The relevant steps to solve the issue should be contained in this answer. – Martin Schneider Feb 12 '20 at 19:52
2

is this still true/relevant in 2020? does anyone know? – AhrenFullStop May 19 '20 at 03:11
2

Yes. It's still true. – Anand May 20 '20 at 13:52
@Anand I got a prompt today for a web app “add to home screen” on iOS. I’m not sure if Apple chi angled their policy due to the recent App Store drama or if the developer used something such as “setTimeout” with JavaScript. I was stunned to actually see the prompt for a PWA on iOS. – Simeon Ikudabo Aug 18 '20 at 20:54
2

@simeon can you share the web URL? That will be interesting to checkout. I'll be happy to find and share what's implemented in that pwa. – Anand Aug 19 '20 at 02:35
Yeah, this dynamic is really sad but it's a reality. I think Apple holding out on a simple thing like this could push out PWA adoption for years. Pity, but they're the Gorilla in the playground I suppose :( – Andrew Einhorn Apr 07 '21 at 11:59
Can we please keep the conversational musings to Hacker News or literally anywhere else. It's hard to find nuggets of useful information in amongst everyone treating this post like their personal blog. – Kye Mar 05 '23 at 07:37
@Kye I don't understand what exact conversation of this answer/thread you want to keep off this site ? Go ahead and suggest edit or report what ever violates site policy, if it bothers you. – Anand Mar 08 '23 at 20:02
For those who want keep tracking on this, here is a guy that keeps testing and updating the iOS PWA compatibility https://firt.dev/notes/pwa-ios/ – calebeaires Mar 25 '23 at 16:41
2

url to netguru.co example code is broken – jpep1 Jun 03 '23 at 14:23

score 41 · Answer 2 · edited Aug 15 '22 at 21:28

41

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:

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!

edited Aug 15 '22 at 21:28

mrexodia

648
12
20

answered May 23 '20 at 16:08

Alan

9,167
4
52
70

1

Same link without web archive : https://www.netguru.com/blog/pwa-ios – Daweb Dec 14 '22 at 13:37

score 5 · Answer 3 · answered Sep 30 '21 at 20:38

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"

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

3 Answers3

Linked