De nombreux navigateurs vous permettent d'activer et de promouvoir l'installation de votre progressive web app (PWA) directement dans l'interface utilisateur de votre PWA. L'installation (parfois appelée "Ajouter à l'écran d'accueil") permet aux utilisateurs d'installer facilement votre PWA sur leur appareil mobile ou de bureau. L'installation d'une PWA l'ajoute au lanceur d'applications de l'utilisateur, ce qui permet de l'exécuter comme n'importe quelle autre application installée.
En plus de l'expérience d'installation fournie par le navigateur, vous pouvez fournir votre propre flux d'installation personnalisé, directement dans votre application.
Lorsque vous envisagez de promouvoir l'installation, il est préférable de réfléchir à la façon dont les utilisateurs utilisent généralement votre PWA. Par exemple, si un ensemble d'utilisateurs utilise votre PWA plusieurs fois au cours d'une semaine, ils peuvent bénéficier de la possibilité supplémentaire de lancer votre application depuis l'écran d'accueil d'un téléphone ou depuis le menu Démarrer dans le système d'exploitation d'un ordinateur de bureau. Certaines applications de productivité et de divertissement bénéficient également de l'espace supplémentaire à l'écran créé en supprimant les barres d'outils du navigateur de la fenêtre dans les modes standalone ou minimal-ui installés.
Prérequis
Avant de commencer, assurez-vous que votre PWA répond aux exigences d'installation, ce qui implique généralement de disposer d'un fichier manifeste d'application Web.
Promouvoir l'installation
Pour indiquer que votre progressive web app peut être installée et fournir un flux d'installation personnalisé dans l'application:
- Écoutez l'événement
beforeinstallprompt. - Enregistrez l'événement
beforeinstallpromptafin de pouvoir l'utiliser pour déclencher le flux d'installation ultérieurement. - Alertez l'utilisateur que votre PWA peut être installée, et fournissez un bouton ou un autre élément pour lancer le flux d'installation dans l'application.
Écouter l'événement beforeinstallprompt
Si votre progressive web app répond aux critères d'installation requis, le navigateur déclenche un événement beforeinstallprompt. Enregistrez une référence à l'événement et mettez à jour votre interface utilisateur pour indiquer qu'il peut installer votre PWA.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
Flux d'installation dans l'application
Pour permettre une installation dans l'application, fournissez un bouton ou un autre élément d'interface sur lequel l'utilisateur peut cliquer pour installer votre application. Lorsque l'utilisateur clique sur l'élément, appelez prompt() au niveau de l'événement beforeinstallprompt enregistré (stocké dans la variable deferredPrompt). Une boîte de dialogue modale d'installation s'affiche pour demander à l'utilisateur de confirmer qu'il souhaite installer votre PWA.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt, and can't use it again, throw it away
deferredPrompt = null;
});
La propriété userChoice est une promesse qui se résout selon le choix de l'utilisateur.
Vous ne pouvez appeler prompt() qu'une seule fois pour l'événement différé. Si l'utilisateur l'ignore, vous devrez attendre que l'événement beforeinstallprompt soit à nouveau déclenché, généralement immédiatement après la résolution de la propriété userChoice.
Détecter à quel moment la PWA a été installée correctement
Vous pouvez utiliser la propriété userChoice pour déterminer si l'utilisateur a installé votre application depuis votre interface utilisateur. Toutefois, si l'utilisateur installe votre PWA à partir de la barre d'adresse ou d'un autre composant du navigateur, userChoice ne l'aidera pas. À la place, écoutez l'événement appinstalled. Il se déclenche chaque fois que votre PWA est installée, quel que soit le mécanisme utilisé pour l'installer.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
Détecter comment la PWA a été lancée
La requête média CSS display-mode indique comment la PWA a été lancée, soit dans un onglet du navigateur, soit en tant que PWA installée. Cela permet d'appliquer différents styles en fonction de la manière dont l'application a été lancée. Par exemple, vous devez toujours masquer le bouton d'installation et fournir un bouton "Retour" lorsque vous la lancez en tant que PWA installée.
Suivez le lancement de la PWA
Pour suivre la façon dont les utilisateurs lancent votre PWA, testez la requête média display-mode à l'aide de matchMedia(). Safari sur iOS ne prend pas encore en charge cette fonctionnalité. Vous devez donc vérifier navigator.standalone. Il renvoie une valeur booléenne indiquant si le navigateur s'exécute en mode autonome.
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
Suivre les changements de mode d'affichage
Pour savoir si l'utilisateur passe de standalone à browser tab, écoutez les modifications apportées à la requête média display-mode.
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
Mettre à jour l'UI en fonction du mode d'affichage actuel
Pour appliquer une couleur d'arrière-plan différente à une PWA lorsqu'elle est lancée en tant que PWA installée, utilisez un CSS conditionnel:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Modifier l'icône et le nom de votre application
Comment procéder si vous devez modifier le nom de votre application ou fournir de nouvelles icônes ? Consultez Comment Chrome gère les mises à jour du fichier manifeste d'application Web pour savoir quand et comment ces modifications sont répercutées dans Chrome.