Comment intégrer Ajouter à l'écran d'accueil dans votre PWA
Publié: 2021-05-13Table des matières
Ajouter à l'écran d'accueil (A2HS en abrégé) est fondamental pour l'expérience Progressive Web Apps car il permet une expérience d'application native complète, qui inclut le lancement d'applications à partir de l'écran d'accueil de l'utilisateur.
Lecture recommandée : PWA vs Native : qu'est-ce qui vous convient le mieux ?
Étant une fonctionnalité si vitale pour votre PWA, vous ne pouvez sûrement pas ne pas l'intégrer, c'est pourquoi aujourd'hui dans le tutoriel SimiCart PWA, nous allons passer en revue les raisons pour lesquelles A2HS est nécessaire, comment il est utilisé et comment créer un PWA Compatible A2HS, à la fois sur mobile et sur ordinateur.
Navigateurs compatibles
A2HS est très proche d'être une fonctionnalité universelle entre les navigateurs. Actuellement, il est actuellement pris en charge par Mobile Chrome/Android Webview (à partir de la version 31), Opera pour Android (à partir de la version 32) et Firefox pour Android (à partir de la version 58). Pour une vue plus détaillée, consultez le site Web de CanIUse.
PWA Ajouter à l'écran d'accueil en action
Lorsque vous rencontrez un site sur lequel PWA Ajouter à l'écran d'accueil est activé (A2HS-Enabled), une bannière notifiant que le site peut être ajouté à votre écran d'accueil peut être vue au bas de l'interface utilisateur :
Il s'agit de la promotion d'installation par défaut fournie par le navigateur , qui se produit lorsque certains critères d'installation sont remplis. La notification elle-même s'affichera la première fois qu'un utilisateur visitera votre site Web, puis de nouveau après environ 90 jours.
Comment rendre votre application Web compatible A2HS sur mobile
Critères installables
Pour que votre application Web soit installable, elle doit :
- pas déjà installé
- répond à une heuristique d'engagement de l'utilisateur (l'utilisateur doit interagir avec la page pendant au moins 30 secondes)
- être servi à partir d'une connexion sécurisée (HTTPS)
- faire inscrire un travailleur de service
- avoir un fichier manifeste correctement configuré
- Et surtout, le navigateur utilisé doit prendre en charge l'événement
beforeinstallprompt. Pour une liste complète des navigateurs prenant en charge l'événementbeforeinstallprompt, reportez-vous à CanIUse.
Commencer
À des fins de démonstration, dans cet article, nous utiliserons le projet create-react-app comme base pour créer une PWA installable. create-react-app est une simple commande React pour créer une application d'une seule page.
Remarque : create-react-app nécessite au moins node >= 10.16 et npm >= 5.6
Ouvrez votre invite de commande Node.js et exécutez les commandes suivantes :
npx créer-réagir-app pwa-a2hs cd pwa-a2hs début de fil
Créer un fichier manifeste
Généralement situé au plus profond du dossier racine d'une application Web, votre manifeste Web est un fichier contenant toutes les informations nécessaires à votre site Web, telles que le titre de votre application, les chemins d'accès aux différentes icônes, la couleur d'arrière-plan, etc., au format JSON. Un fichier manifeste Web est crucial pour une application Web fonctionnelle car il permet une présentation correcte de votre application Web à différentes étapes de l'expérience utilisateur.
Nous vous recommandons d'utiliser un générateur de manifeste pour générer automatiquement le fichier, ainsi que des icônes de taille optimisée pour votre application.
En utilisant le générateur de manifeste, vous pouvez avoir un fichier manifest.zip avec le contenu comme suit :
Et votre manifest.webmanifest devrait ressembler à ceci :
{
"theme_color": "#f69435",
"background_color": "#f69435",
"affichage": "autonome",
"portée": "/",
"start_url": ".",
"nom": "PWA-A2HS",
"short_name": "PWA",
"description": "Démo PWA pour la fonctionnalité A2HS",
"Icônes": [
{
"src": "/icon-192x192.png",
"tailles": "192x192",
"type": "image/png"
},
{
"src": "/icon-256x256.png",
"tailles": "256x256",
"type": "image/png"
},
{
"src": "/icon-384x384.png",
"tailles": "384x384",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"tailles": "512x512",
"type": "image/png"
}
]
} Copiez maintenant le contenu de vos fichiers manifestes générés dans le dossier /public/ , supprimez le fichier manifest.json par défaut dans ce dossier et passez à l'étape suivante.
Liez le HTML au manifeste
Lorsque vous avez terminé de configurer votre fichier manifeste, enregistrez-le dans le répertoire racine de votre site Web afin qu'il puisse être appelé ultérieurement avec un chemin relatif, c'est-à-dire /manifest.webmanifest . Pour terminer la configuration de votre fichier manifeste, référencez-le dans votre en-tête HTML ( \pwa-a2hs\public\index.html ), comme ceci :
<tête>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<méta
nom="description"
content="Site Web créé avec create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
<title>PWA A2HS</title>
</head>Configurer le flux d'installation
Un manifeste d'application Web ne suffit pas pour rendre votre application Web installable. Vous devrez effectuer une configuration supplémentaire pour rendre votre application Web installable et ainsi la rapprocher un peu plus d'une PWA.
Créer un agent de service
Le service worker intercepte vos requêtes réseau et active diverses fonctionnalités de type application pour lesquelles PWA est célèbre. Créez un fichier service-worker.js dans pwa-a2hs\public et remplissez-le avec le contenu suivant :
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
réponse de retour || récupérer(event.request);
})
);
}); Ici, nous devrons écouter l'événement de fetch car il est crucial pour votre expérience d'ajout à l'écran d'accueil, sans lui, votre application React ne pourra pas répondre aux exigences d'installation.
Enregistrez vos travailleurs de service
Et pour que notre service-worker.js fonctionne, il va falloir l'enregistrer en insérant ce code à la fin du <body> de notre index.html :
//index.html
<script>
if ('serviceWorker' dans le navigateur) {
// Enregistre un service worker hébergé à la racine du
// site utilisant la portée par défaut.
navigator.serviceWorker.register('/service-worker.js').then(function(inscription) {
console.log('L'inscription du service worker a réussi :', registration);
}, /*catch*/ fonction(erreur) {
console.log('Échec de l'enregistrement du service worker :', erreur);
});
} autre {
console.log('Les service workers ne sont pas pris en charge.');
}
</script>Il est temps de le tester !
Votre PWA devrait maintenant être installable. Actualisez votre frontend et vous devriez voir un bouton d'installation sur votre barre des tâches (bureau) ou une petite bannière de notification (mobile).
En cliquant sur Installer , vous obtiendrez un raccourci PWA comme celui-ci sur votre bureau/écran d'accueil :
Il y a plus dans l'expérience A2HS
Ce qui précède n'est qu'un ajout de base à l'expérience de l'écran d'accueil à l'aide de la promotion d'installation fournie par le navigateur. Pour monter d'un cran, vous pouvez également enregistrer l'événement beforeinstallprompt pour déclencher manuellement le flux d'installation avec différents modèles pour promouvoir l'installation de PWA.
Avec un bouton d'installation personnalisé, vous pouvez éviter de perturber le parcours de l'utilisateur en ciblant les utilisateurs spécifiques qui bénéficieront de l'installation d'une application. Et en réfléchissant à l'endroit et à l'endroit où placer l'interface utilisateur de promotion, votre PWA est susceptible de faire mieux que vos concurrents et d'obtenir ainsi de bien meilleurs taux de conversion d'applications.