Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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.

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

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

over 4 years ago · Santiago Trujillo Denunciar

0

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://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!

over 4 years ago · Santiago Trujillo Denunciar

0

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"
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda