PWA : Comment déclencher par programme : "Ajouter à l'écran d'accueil" ? sur iOS Safari

Question

J'ai récemment publié une application Web progressive rendue par le serveur et tout fonctionne bien jusqu'à présent. Cependant, Android utilisant Chrome affiche une bannière pour télécharger l'application, ce qui est génial, mais ce n'est pas le cas sur iOS. Avec Safari, l'utilisateur a besoin de quelques clics pour accéder à la fonction "Ajouter à l'écran d'accueil", ce qui est mauvais.

Je suis donc satisfait de ma PWA, mais j'aimerais vraiment pouvoir dire moi-même à l'utilisateur que cette application peut être ajoutée à l'écran d'accueil.

D'aussi loin que je me souvienne, j'ai vu https://marvelapp.com/ pour ajouter un prototype à l'écran d'accueil.

Answer 1

IOS - Safari ne prend actuellement pas en charge la bannière d'installation des applications Web, comme c'est le cas dans Android - Chrome.

Il y a aucun moyen de déclencher par programme La bannière d'installation dans Android aussi, sauf dans le cas où vous attrapez le beforeInstallPromot et l'utilisez pour afficher la bannière.

Dans la réponse liée, vous pouvez vérifier l'option alternative sur la façon d'afficher une bannière dans l'application pour guider l'utilisateur à ajouter à l'écran d'accueil. Ici Voici un exemple de code pour la même chose, qui est spécifique à iOS (regardez sous #PROTIP 3).

Answer 2

Pour l'instant, Apple ne donne pas la possibilité de rendre cette expérience "Ajouter à l'écran d'accueil" facile.

Vous pouvez cependant fournir une info-bulle explicative à vos utilisateurs, pour les utilisateurs d'IOs :

Les détails sont expliqués ici : https://www.netguru.com/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

dans la section : PROTOCOLE 3 : Créez vous-même un popup "Ajouter à l'écran d'accueil" !

Answer 3

Veuillez noter que Chrome (sur Android) est le seul navigateur qui invite automatiquement l'utilisateur à installer votre PWA. Vous devez gérer manuellement les navigateurs iOS et les autres navigateurs Android. Statistiques indiquent (mise à jour 2021) que les 3 principaux navigateurs mobiles sont Chrome, Safari et Samsung internet (<6%).

Vous pouvez utiliser ce code pour vous aider rapidement :

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

Quant aux instructions d'installation :

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"