De nombreux navigateurs vous permettent d'activer et de promouvoir l'installation de votre progressive web app (PWA) directement dans son interface utilisateur. L'installation (parfois appelée "Ajouter à l'écran d'accueil") permet aux utilisateurs d'installer votre PWA sur leur appareil mobile ou de bureau. L'installation d'une PWA l'ajoute à l'environnement lanceur d'applications pour qu'il puisse fonctionner 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.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Lorsque vous envisagez de promouvoir l'installation, tenez compte de la façon dont les utilisateurs
utiliser votre PWA. Par exemple, si un ensemble d'utilisateurs utilise votre PWA plusieurs
fois par semaine, ces utilisateurs pourraient bénéficier de l'avantage
en lançant votre application depuis l'écran d'accueil d'un téléphone ou depuis le menu Démarrer d'un ordinateur
système d'exploitation. Certaines applications de productivité et de divertissement
de l'espace supplémentaire à l'écran créé en supprimant les barres d'outils du navigateur
dans les modes standalone ou minimal-ui installés.
Prérequis
Avant de commencer, vérifiez que votre PWA respecte la des exigences d'installation, qui inclure un fichier manifeste d'application Web.
Promouvoir l'installation
Pour montrer que votre progressive web app peut être installée et pour fournir une processus d'installation dans l'application:
- Écoutez l'événement
beforeinstallprompt. - Enregistrez l'événement
beforeinstallpromptpour qu'il puisse déclencher le flux d'installation. plus tard. - Prévenez l'utilisateur que votre PWA peut être installé, et fournissez-lui un bouton ou une autre pour lancer le processus 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 mettre à jour votre interface utilisateur pour
indiquer que l'utilisateur 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.`);
});
Processus d'installation dans l'application
Pour permettre une installation dans l'application, fournissez un bouton ou un autre élément d'interface
qu'un utilisateur peut cliquer ou appuyer pour installer votre application. Lorsque l'utilisateur clique sur l'élément ou
appuyé, appelez prompt() sur l'événement beforeinstallprompt enregistré (stocké dans le
deferredPrompt). Il montre à l'utilisateur une boîte de dialogue
d'installation modale, demandant
pour qu'il confirme 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 répond au choix de l'utilisateur.
Vous ne pouvez appeler prompt() qu'une seule fois sur l'événement différé. Si l'utilisateur
le ferme, vous devez attendre que l'événement beforeinstallprompt
se déclenche à nouveau, généralement juste après que la propriété userChoice
est résolu.
Détecter quand la PWA a été correctement installée
Vous pouvez utiliser la propriété userChoice pour déterminer si l'utilisateur a installé
depuis votre interface utilisateur. En revanche, si l'utilisateur installe votre PWA
à partir de la barre d'adresse ou d'un autre composant du navigateur, userChoice ne vous aidera pas.
À la place, écoutez l'événement appinstalled, qui se déclenche chaque fois que
quelle que soit la méthode utilisée.
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 le mode de lancement de la PWA
La requête média CSS display-mode indique comment la PWA a été lancée,
dans un onglet de navigateur ou en tant que PWA installée. Cela permet d'appliquer différentes
en fonction de la façon dont l'application a été lancée. Par exemple, vous pouvez le configurer
pour toujours masquer le bouton d'installation et afficher un bouton "Retour" lorsqu'il est lancé en tant que
installé la PWA.
Suivre le lancement de la PWA
Pour suivre la manière dont les utilisateurs lancent votre PWA, utilisez matchMedia() pour tester la
display-mode requête média. Cette option n'est pas encore disponible dans Safari sur iOS. Vous devez donc
mais plutôt navigator.standalone, qui 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
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, utilisez du CSS conditionnel:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
Modifier l'icône et le nom de votre application
Que faire si vous devez mettre à jour le nom de votre application ou fournir de nouvelles icônes ? Découvrez comment Chrome gère les mises à jour du fichier manifeste de l'application Web. pour voir quand et comment ces modifications se répercutent dans Chrome.