Tutoriel Progressive Web App : Créez votre première PWA

Fabriqué par Google lui-même et actuellement poussé sur des plates-formes populaires telles que Windows 10, PWA peut faire de nombreuses choses qui étaient auparavant exclusives aux applications natives, y compris des fonctionnalités telles que les notifications push, une interface d'application attrayante, des capacités hors ligne, des installations d'applications... vous l'appelez .

Et c'est pourquoi l'émergence des PWA n'est plus censée être momentanée, car il s'agit désormais d'un mouvement à grande échelle qui pourrait fondamentalement changer le Web tel que nous le connaissons. Pour les nouveaux arrivants, il n'est pas trop tard pour se familiariser avec cette technologie émergente car le processus de construction d'une PWA est désormais beaucoup plus simplifié qu'auparavant, adapté aux profanes intéressés comme vous.

Pour votre meilleur apprentissage, nous allons aujourd'hui créer une PWA entièrement fonctionnelle à l'aide de React, Node.js et Firebase.

Conditions préalables

• Node.js version >= 8.10
• version npm >= 5.6

Remarques : la version de npm ne devrait pas vraiment poser de problème car votre installation de Node.js est toujours livrée avec la dernière version du gestionnaire de packages npm .

1. Créez un SPA avec create-react-app

Tout d'abord, nous avons besoin de quelque chose de solide sur lequel travailler, et create-react-app est l'outil parfait à cet effet.

 npx créer-réagir-app mon-PWA
cd mon-pwa
début npm

Les commandes ci-dessus vous aideront à créer un environnement d'apprentissage basé sur React avec lequel vous pourrez travailler.

Servez-le via HTTPS

HTTPS est la nouvelle norme pour le Web et avec l'arrivée de PWA, il est devenu de plus en plus courant. Normalement, une PWA doit être servie sur HTTPS car les service workers eux-mêmes ne peuvent pas travailler sans elle ; mais puisque nous travaillons dans un environnement localhost, ce n'est pas nécessaire.

2. Faites-le fonctionner hors ligne

Par défaut, les techniciens de service de create-react-app doivent être préconfigurés pour gérer la mise en cache hors ligne et le chargement de contenu lorsque l'utilisateur n'a pas de connexion ou lors de visites ultérieures.

Un service worker est, en termes simples, un script JavaScript qui s'exécute sur un thread séparé de la page, et de ce fait, il n'a aucun accès à la structure DOM. Cette nouvelle approche donne lieu à des fonctionnalités plus progressives et améliorant les performances, car les techniciens de service gèrent désormais non seulement toutes les fonctionnalités typiques d'une PWA (capacités hors ligne, notifications push, etc.), mais ils jouent également un rôle important en soulageant les calculs lourds. de votre site Web sur un fil séparé.

Pour installer les service workers sur votre PWA, vous voudrez jeter un œil à /src/index.js .

Dans index.js , recherchez cette ligne

 serviceWorker.unregister()

Remplacez unregister() par register() et vos service workers seront automatiquement enregistrés lorsque vous exécuterez votre my-pwa en mode production . Il n'est pas recommandé d'activer les service workers en mode développement car cela peut conduire à des cas où la PWA ne charge que les actifs mis en cache et n'inclut pas les dernières modifications locales.

Pour exécuter votre my-pwa en mode production :

 construction d'exécution npm
construction de service npx 

Après cela, ouvrez Chrome et accédez à localhost:5000 , inspectez-le et vous verrez maintenant les travailleurs du service s'exécuter correctement dans l'onglet Application .

Et sous la catégorie Stockage du cache , vous souhaitez vérifier si le contenu hors ligne de votre site est correctement mis en cache.

Notes : Il existe une solution pour enregistrer vos service workers en mode hors production. Ceci est réalisé en supprimant la ligne process.env.NODE_ENV === 'production' de src/serviceWorker.js .

Si vous souhaitez approfondir cela et créer vos propres travailleurs de service à partir de zéro et ne pas vous fier aux configurations préconfigurées de React, nous vous avons. Dans ce didacticiel, nous vous montrons comment créer une première application Web progressive hors ligne à partir d'une simple application Web.

3. Configurer l'ajout à l'écran d'accueil

Si tout a été correctement fait jusqu'à présent, vous devriez voir une petite icône d'installation (+) lors du lancement de la version de production de votre my-pwa .

Puisque tout se fait automatiquement pour vous, vous vous demandez probablement comment tout cela a été rendu possible. Ne vous inquiétez pas, c'est pourquoi nous sommes ici.

Pour préparer votre PWA A2HS (Ajouter à l'écran d'accueil), nous avons besoin d'un manifest.json . Le manifest.json fourni avec votre create-react-app est un fichier JSON très basique qui détermine la manière dont les icônes de votre application apparaissent à l'utilisateur et définit son apparence d'écran de démarrage. Pour les personnaliser, modifiez le fichier existant dans /public/manifest.json .

 {
  "short_name": "Ma première PWA",
  "name": "Créer une PWA simple",
  "Icônes": [
    {
      "src": "favicon.ico",
      "tailles": "64x64 32x32 24x24 16x16",
      "type": "image/x-icone"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "tailles": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "tailles": "512x512"
    }
  ],
  "start_url": ".",
  "affichage": "autonome",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

La plupart des choses ici sont assez explicites, mais si vous souhaitez approfondir le manifest.json et les événements qui mènent à une installation PWA, nous avons écrit un article à ce sujet. N'oubliez pas de le vérifier.

Notes : Pour que le manifest.json fonctionne, vous devrez l'inclure dans index.html . Par défaut, create-react-app devrait déjà l'avoir fait pour vous.

 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Lorsque vous avez enregistré votre PWA auprès des techniciens de service et un manifest.json approprié, une beforeinstallpromt sera déclenchée une fois que l'utilisateur lancera votre application, lui demandant la permission d'installer votre PWA sur l'écran d'accueil de l'utilisateur.

Vous devez cependant noter que nous ne faisons qu'effleurer la surface du processus A2HS (Ajouter à l'écran d'accueil) et qu'il reste encore beaucoup à apprendre. Nous pensons que la meilleure façon d'apprendre quelque chose est de le construire à partir de zéro, c'est pourquoi nous avons préparé pour vous un petit guide sur cette fonctionnalité spécifique de PWA. Le guide vous guidera à travers plusieurs parties importantes des événements d'installation d'une PWA.

Alternativement, si vous vous sentez paresseux et démotivé, nous sommes également là pour vous aider. Notre générateur de manifeste est conçu pour automatiser tout ce processus pour vous.

4. Configurez les notifications push

Les navigateurs ont parcouru un long chemin dans leur prise en charge des notifications push. Récemment, Chrome a même introduit des déclencheurs de notification pour permettre l'affichage des notifications en mode avion. C'est un énorme pas en avant pour les notifications push.

Et maintenant, vous devez vous demander où est cette partie qui utilise Firebase dans ce tutoriel. Eh bien, c'est ça. Dans cette partie, vous découvrirez le processus d'intégration des notifications push dans une PWA à l'aide de Firebase, en particulier la fonctionnalité Cloud Messaging qui permet l'envoi de messages à l'aide de requêtes HTTPS.

Mais comme tout le processus est un peu long, et aussi pour vous aider à mieux suivre l'ensemble, nous avons préparé pour vous notre propre tutoriel d'intégration des notifications push. Avec ce didacticiel, vous ne devriez pas avoir de problèmes lorsque vous essayez d'envoyer des notifications push à un jeton d'utilisateur ou à un groupe d'utilisateurs.

Conclusion

Et c'est tout pour une PWA complète. N'hésitez pas à nous poser des questions si vous vous sentez coincé dans une partie du didacticiel et nous ferons de notre mieux pour y répondre !

Lire la suite:
Comment intégrer PWA dans Magento 2