Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

955
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda