Progressive Web Apps : inviter à installer et mesurer l'installation

1. Bienvenue

Dans cet atelier, vous allez prendre une PWA installable existante et y ajouter un bouton d'installation personnalisé dans l'application. Il s'agit du cinquième d'une série d'ateliers de programmation complémentaires pour l'atelier sur les progressive web apps. L'atelier de programmation précédent s'intitulait De l'onglet à la barre des tâches. Il existe trois autres ateliers de programmation dans cette série.

Points abordés

  • Créer un bouton d'installation de PWA intégré personnalisé

À savoir

  • JavaScript

Ce dont vous avez besoin

2. Préparer l'atelier

Commencez par cloner ou télécharger le code de démarrage nécessaire pour effectuer cet atelier de programmation :

Si vous clonez le dépôt, assurez-vous d'être dans la branche pwa04--prompt-measure-install. Le fichier ZIP contient également le code de cette branche.

Ce code de base nécessite Node.js 14 ou version ultérieure. Une fois le code disponible, exécutez npm ci à partir de la ligne de commande dans le dossier du code afin d'installer toutes les dépendances dont vous aurez besoin. Ensuite, exécutez npm start pour démarrer le serveur de développement de l'atelier de programmation.

Le fichier README.md du code source fournit une explication pour tous les fichiers distribués. De plus, voici les principaux fichiers existants que vous utiliserez tout au long de cet atelier de programmation :

Fichiers clés

  • js/main.js : fichier JavaScript de l'application principale

3. Configurer le bouton d'installation

Avant d'ajouter les invites d'installation et de capturer les événements d'installation, vous devez effectuer une configuration. Commencez par créer un fichier js/lib/install.js et ajoutez le code suivant :

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

Ensuite, dans js/main.js, en bas de l'événement DOMContentLoaded, ajoutez le code suivant :

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

Explication

Ce code configure une classe d'installation qui sera utilisée à l'étape suivante et l'associe à l'application en cours d'exécution.

4. Ajouter des écouteurs d'invite d'installation

Pour que le bouton d'installation déclenche réellement l'installation de votre PWA, vous devez capturer l'invite d'installation. Une fois l'invite d'installation capturée, vous devez la réinitialiser. Pour ce faire, écrivez du code pour effectuer les opérations suivantes dans constructor dans la classe Install dans js/lib/install.js :

Capturer l'invite d'installation

  • Écoutez l'événement beforeinstallprompt sur window.
  • Empêcher le déclenchement de l'événement
  • Capturer la requête
  • Afficher le déclencheur du bouton d'installation

Réinitialiser l'invite lors de l'installation

  • Écoutez l'événement appinstalled sur window.
  • Réinitialiser l'invite capturée
  • Masquer le déclencheur du bouton d'installation

5. Déclencher l'installation à partir d'un bouton intégré à l'application

Une fois l'invite capturée, le bouton d'installation de la PWA doit pouvoir la déclencher. Pour ce faire, ajoutez le code suivant à la classe Install dans js/lib/install.js :

  • Méthode async pour déclencher l'installation qui
    • Utilise la requête capturée pour inviter à l'installation
    • await : choix de l'utilisateur concernant l'invite
    • Réinitialiser la requête
    • Masquer le bouton d'installation si l'utilisateur a accepté l'invite d'installation
  • Ajoutez un écouteur d'événement click au bouton d'installation dans le constructor de la classe qui appelle le déclencheur d'installation.

6. Félicitations !

Vous venez d'apprendre à déclencher l'installation d'une PWA à partir de votre propre bouton d'installation intégré à l'application.

Le prochain atelier de programmation de la série est Exploiter tout le potentiel de votre PWA.