web-dev-qa-db-fra.com

Est-il possible de créer un bouton in-app qui déclenche la bannière d'installation de PWA "Ajouter à l'écran d'accueil"?

Je comprends qu'avec une application Web progressive, les navigateurs mobiles affichent correctement une bannière invitant les utilisateurs à "installer" l'application sur leur écran d'accueil.

Je cherchais un moyen de déclencher cette invite à partir de l'application, mais je n'ai rien trouvé.

Existe-t-il une ligne de JavaScript pouvant être utilisée à tout moment pour appeler la bannière d'installation Prompt? Quelque chose que je pourrais ajouter à un bouton d'installation dissimulé dans un écran d'aide, par exemple?

Il peut être difficile pour certains utilisateurs de trouver l'option "Ajouter à l'écran d'accueil" s'ils ont raté l'invite d'installation de la bannière. Je voudrais leur donner un bouton sur lequel ils peuvent cliquer pour être invité à nouveau.

javascriptservice-workerprogressive-web-apps
18
Adam D

Chrome (ou tout navigateur prenant en charge PWA) déclenche l'événement beforeinstallprompt pour la bannière d'installation de l'application Web , que vous pouvez déclenchez à un moment plus opportun lorsque vous pensez que l'utilisateur ne le manquera pas/convaincu de l'ajout de votre site à la page d'accueil. À partir de Chrome version 68, capturer beforeinstallprompt et gérer l’invite d’installation par programmation sont obligatoires et aucune bannière ne sera affichée automatiquement.

Au cas où l'utilisateur aurait manqué l'invite/refusé d'ajouter à l'écran d'accueil, l'événement ne peut pas être déclenché manuellement par notre code. Ceci est intentionnellement laissé de cette façon pour éviter que les pages Web ennuyent les utilisateurs à Demander à l'utilisateur d'ajouter à l'écran d'accueil. En pensant à la perspective des utilisateurs, cela prend tout son sens.

Oui, il y a des cas où l'utilisateur manque l'option accidentellement et il peut ne pas connaître l'option de menu du navigateur pour "Ajouter à l'écran d'accueil" et il serait agréable pour nous de déclencher la même chose. Mais malheureusement, ce n'est pas une option. Au moins pour le moment et personnellement, je ne vois pas cela changer beaucoup compte tenu de la façon dont les développeurs peuvent abuser s’il est laissé aux développeurs l’inviter.

Autre option: Si l'utilisateur a manqué l'invite d'installation ou même choisi de ne pas l'installer sur l'écran d'accueil, donnez un peu de temps et quand vous pensez qu'il commence pour aimer votre site (en fonction des conversions), vous pouvez lui montrer une page complète ou une demi-page Div. type d’instructions d’installation permettant d’ajouter votre site à l’écran d’accueil à partir du menu du navigateur. Il peut contenir des images ou des animations GIF montrant à l'utilisateur comment ajouter des éléments à l'écran d'accueil à partir du menu. Avec cela, il devrait être explicite pour la plupart des utilisateurs, sinon tous.

Ici est un exemple de code pour la même chose, qui est spécifique à iOS (regardez sous #PROTIP 3).

En prime, vous pouvez afficher des promotions telles que des réductions ou des fonctionnalités ajoutées lorsque l'utilisateur ajoute à l'écran d'accueil, ce qui convaincra l'utilisateur de le faire. PWA dispose d'un moyen de rechercher si le site est utilisé depuis l'écran d'accueil ou le navigateur.

Pour le développement/test: Si vous souhaitez que cette bannière apparaisse plusieurs fois à des fins de développement/test, vous pouvez définir le flux ci-dessous dans votre Chrome pour le même,

chrome://flags/#bypass-app-banner-engagement-checks
21
Anand

Dans mobile Chrome sur Android, vous pouvez accéder à "Ajouter à l'écran d'accueil" à partir du menu du navigateur. (Des options similaires peuvent également exister pour Safari/Firefox sur mobile sur Android/iOS.) L'application Web Le fichier manifeste est lu et l'application est ajoutée comme ce serait le cas avec la fonction Prompt d'origine.

Bien que JavaScript ne puisse pas être utilisé manuellement pour appeler l'invite, une solution de contournement consisterait à fournir à l'écran des instructions indiquant aux utilisateurs comment ouvrir manuellement le menu et les ajouter pour leur agent utilisateur spécifique.

enter image description here

enter image description here

2
AnthumChris

Il existe des événements déclenchés par les navigateurs qui aident à résoudre le problème de la gestion de l'installation des PWA. Ce n'est pas encore un standard Web, mais c'est une bonne approche.

  • 'beforeinstallprompt' est déclenché juste avant l'affichage de l'invite et
  • 'appinstalled' est lancé juste après la fin de l'installation.

Ainsi, vous pouvez intercepter l'événement 'beforeinstallprompt', l'empêcher de se produire pour que la bannière n'apparaisse pas, le cacher pendant que vous voulez qu'il apparaisse, et enfin créer un bouton sur lequel un utilisateur clique pour déclencher le message différé précédent. événement à volonté.

Vous trouverez ci-dessous un lien sur la manière d’y parvenir:

https://web.dev/installable/discover-installable/codelab-make-installable

0
Emmanuel Mahuni

Eh bien, rien ne vous empêche de stocker la valeur deferredPrompt dans une variable et de l’utiliser plus tard. Ensuite, vous pouvez afficher une boîte personnalisée et si l'utilisateur la ferme, vous n'avez toujours pas exécuté deferredPrompt.Prompt () et pouvez l'utiliser ultérieurement. Je stocke le mien à Redux. Si l'utilisateur ferme l'invite d'installation, j'utilise le deferredPrompt dans le menu hamburger pour l'installer à tout moment.

Écouter l'installation et stocker l'événement en tant qu'invite

 const beforeInstallListener = e => {
        // Prevent Chrome 76 and later from showing the install Prompt
        e.preventDefault();
        // Stash the event so it can be triggered later.
        dispatch(setAndroidDeferredPrompt(e));
        dispatch(showAndroidPromptDownload(true));
    };
    window.addEventListener("beforeinstallprompt", beforeInstallListener);

Crée une fonction qui utilise ce deferredPrompt pour inviter l'utilisateur

    const installToAndroid = async () => {
    dispatch(showAndroidPromptDownload(false));
    deferredPrompt.Prompt(); // Wait for the user to respond to the Prompt
    const choiceResult = await deferredPrompt.userChoice;

    if (choiceResult.outcome === "accepted") {
        console.log("User accepted the PWA Prompt");
    } else {
        closeAndroidPromptWithoutDownload();
        console.log("User dismissed the PWA Prompt");
    }
    dispatch(setAndroidDeferredPrompt(null));
};

Rappelez-vous que si l'utilisateur clique sur la bannière à installer, la commande deferredPrompt.Prompt () est appelée et cela ne fonctionnera plus. Par conséquent, je garde un contrôle pour voir si deferredPrompt existe et je rappelle qu’il doit être défini sur null si l’utilisateur a appelé .Prompt ().

{deferredPrompt && <button onClick={() => installPWA(deferredPrompt)}>Installer til hjemskjerm</button>}

Cela a été fait avec React Hooks, Redux et LocalStorage (où je stocke un état pwa.reducer.js)

0
jeyloh