Comment créer une application WEB progressive (PWA) à partir de zéro avec des connaissances de base en programmation? Guide étape par étape

Forbes, Twitter, Uber, Le Equipe, Telegram ou Instagram sont quelques-uns des géants qui se sont avancés et ont créé leurs propres PWA, ou applications progressives comme on les appelle communément. Ce scénario suggère la possibilité que des sites Web conventionnels soient oubliés .

C’est normal, les sites Web tels que nous les connaissons ont évolué de plus en plus jusqu’à devenir des répliques moins puissantes que les applications natives. Une PWA est essentiellement le produit de cette évolution , qui a maintenant trouvé un moyen d’offrir une expérience similaire à celle de l’application mobile depuis n’importe quel navigateur.

Si vous ne voulez pas être traîné par le temps, il est important que vous commenciez à penser à rendre votre site Web progressif, ou du moins le plus proche possible de celui-ci , car cela commencera à peser sur le classement le plus tôt possible.

Qu’est-ce qu’une application Web progressive et en quoi est-elle différente d’une application native?

Une application évolutive est un outil programmé et écrit dans des langages Web tels que HTML5, JavaScripts et CSS, mais qui se comporte comme une application mobile , en préservant les caractéristiques de celles-ci telles que disposer d’un stockage sur l’appareil, ce qui lui permet d’être utilisé sans connexion à L’Internet.

Les différences entre progressif et natif ne sont pas nombreuses, puisque le premier essaie justement de ressembler au second , mais nous pouvons en identifier plusieurs qui nous font préférer l’un à l’autre:

• Multiplateforme: la principale différence entre l’un et l’autre est le fait que l’application native ne peut être utilisée que sur l’appareil sur lequel elle est installée, donc pour l’utiliser sur un autre, vous devrez la télécharger à partir de zéro. L’application web pour sa part est multiplateforme puisque vous pouvez y accéder depuis n’importe quel navigateur comme s’il s’agissait d’un site web.
• Poids: actuellement on peut trouver des applications natives aussi lourdes qu’un programme informatique, donc cela dépend de la puissance. D’autre part, les sites Web progressifs dépassent rarement 1 Mo en poids.
• Mises à jour rapides: si une application est très volumineuse, à chaque mise à jour, cela prendra quelques minutes. Une application progressive est plus polyvalente en ce sens car, étant si légère, ses mises à jour sont effectuées en quelques secondes.

Composants d’une PWA Que faut-il pour en créer une?

Une application progressive est essentiellement composée de quatre parties; le manifeste, les techniciens de service, l’icône et le serveur. Chacun d’eux a un rôle fondamental dans la structure de l’ensemble de l’outil .

Manifeste d’application

Le manifeste d’une application PWA est un fichier JSON dans lequel toutes les méta-informations de l’application sont spécifiées . C’est là que la couleur du thème, le nom, la couleur d’arrière-plan, l’icône et ces détails sont indiqués.

Travailleur de service

C’est peut-être l’élément le plus important. Comme nous l’avons mentionné précédemment, il s’agit d’un élément programmatique qui offre des solutions pour l’échange d’informations entre le réseau et le cache du navigateur . En outre, ils enregistrent également des informations à charger lorsqu’il y a une connexion, ce qui permet à l’application d’être exécutée sans Internet.

Icône

L’icône n’est rien de plus que l’image qui permettra d’identifier votre application parmi les autres applications web du marché, vous devez la concevoir vous-même car ce sera la particularité du web .

HTPPS

Enfin, il faudra disposer d’un serveur sécurisé avec son certificat SSL correspondant. Les navigateurs n’exécuteront jamais une PWA hébergée sur HTPP comme de nombreux sites Web aujourd’hui. La chose la plus importante à propos d’une application progressive est sa sécurité, et les navigateurs le garantiront .

De quoi aurons-nous besoin pour programmer cette application Web progressive?

Nous arrivons au moment de vérité où nous devrons nous mettre au travail pour créer notre application web évolutive. Ce ne sera rien de plus qu’un simple prévisionniste météorologique qui vous indiquera la température, l’humidité et la pression atmosphérique .

Pour le créer, il sera nécessaire que nous nous conformions d’abord à quelques exigences importantes que nous devrons respecter avant de commencer la programmation. Ce sont les suivants:

• Une clé API Dark Sky : les données de notre application météorologique proviendront directement de cette API, vous devez donc en récupérer une clé. Ceux-ci sont entièrement gratuits pour les petits projets à but non lucratif comme celui que nous allons créer.
• Connaissance de la programmation : nous n’allons pas vous tromper, pour comprendre ce que nous allons vous dire, vous devez au moins comprendre la programmation web et le plus essentiel des langages HTML5, CSS et JavaScripts.

Étapes pour créer une application Web progressive qui fonctionne avec et sans Internet

Nous sommes arrivés là où nous voulions aller. Il est temps pour vous de commencer à programmer votre première application progressive , une application très simple qui vous donnera les connaissances nécessaires pour en créer une plus complète et plus puissante à l’avenir. Faites attention et suivez attentivement toutes les étapes:

Obtenez l’API Dark Sky

Comme nous l’avons mentionné précédemment, la première chose à faire est d’ obtenir une clé API Dark Sky , qui sera celle qui fournira les données météorologiques à notre application progressive. Pour ce faire, vous devez vous rendre directement sur https://darksky.net/dev , vous inscrire et demander la clé.

Une fois que vous l’avez, vous devez vérifier qu’il fonctionne parfaitement. Pour ce faire, vous devez prendre le lien suivant et remplacer l’endroit où il est dit «ClaveAqui» par la clé API que vous venez d’acheter. Si tout se passe bien, vous devriez pouvoir voir les prévisions de New York sans problème.

https://api.darksky.net/forecast/ClaveAqui/40.7720232,-73.9732319

Obtenez le code de l’application

Il s’agit en fait d’un laboratoire de test, nous avons donc récupéré un référentiel directement auprès de Developers Google pour que vous puissiez exécuter ce test guidé. Pour obtenir ce référentiel, vous devez utiliser Glitch, une plate-forme très utile qui permet aux développeurs d’échanger des informations sans problème.

Ce que vous devez faire est ce qui suit:

• Allez sur Glitch.com et dans le coin supérieur droit de l’écran, cliquez sur «Nouveau projet» puis là où il est dit «Cloner depuis Git Repo».
• Cela ouvrira une petite fenêtre dans laquelle vous devrez coller l’adresse suivante https://github.com/googlecodelabs/your-first-pwapp.gitet cliquer sur «OK».

• Dans ce référentiel se trouvent toutes les informations dont vous avez besoin. Vous devez maintenant aller dans le fichier .env et modifier l’endroit où il est dit DARKSKY_API_KEY = «Key Here» et mettre votre clé d’API Dark Sky là où il est dit «Key Here».

• Vous devez maintenant cliquer sur «Afficher votre application» pour voir l’application en action.

Audit avec Lighthouse

En gros avec ce code le PWA est terminé, mais il y a encore des bugs que nous devons nous corriger nous-mêmes et que nous découvrirons grâce à cet audit . Cet outil dispose d’une section spécialement conçue pour effectuer des audits de sites Web progressifs comme celui que nous créons et pour cela nous devons faire ce qui suit:

• Ouvrez votre projet dans un nouvel onglet de votre navigateur Chrome.
• Ouvrez ensuite Chrome DevTools et accédez à l’onglet Audits. Ici, la plate-forme affiche une liste de catégories d’audit que vous devez tout laisser activées.
• La prochaine chose à faire est de cliquer sur Exécuter les audits et après quelques secondes, Lighthouse vous donne un rapport de la page.

Dans ce cas, nous nous concentrerons uniquement sur les résultats de la section PWA, qui sont ceux qui nous intéressent. Cela posera sûrement les problèmes suivants:

• ❗ FAILED: La page actuelle ne répond pas avec un 200 lorsqu’elle est hors ligne.
• ❗FAILED:start_url ne répond pas avec un 200 lorsqu’il est hors ligne.
• ❗ FAILED: n’enregistre pas un technicien de service qui contrôle la page etstart_url
• ❗ ÉCHEC: le manifeste de l’application Web ne répond pas aux exigences d’installation.
• ❗ ECHEC: non configuré pour un écran d’accueil personnalisé.
• Â ECHEC: ne définit pas de couleur de thème pour la barre d’adresse.

Maintenant, notre mission dans le prochain tutoriel est de faire approuver tout cela, afin que nous puissions faire fonctionner notre Web progressif avec et sans connexion Internet, être installable et avoir un manifeste d’application décent .

Créer un manifeste d’application

La raison pour laquelle l’application a échoué dans le manifeste est qu’elle n’en a fondamentalement pas, nous devrons donc la créer, bien que dans votre cas, vous devrez simplement modifier le code de base d’un manifeste que nous avons préparé pour vous .

{
 "name": "Clima",
 "short_name": "Clima",
 "icons": [{
  "src": "/images/icons/icon-128x128.png",
   "sizes": "128x128",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-144x144.png",
   "sizes": "144x144",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-152x152.png",
   "sizes": "152x152",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-256x256.png",
   "sizes": "256x256",
   "type": "image/png"
  }, {
   "src": "/images/icons/icon-512x512.png",
   "sizes": "512x512",
   "type": "image/png"
  }],
 "start_url": "/index.html",
 "display": "standalone",
 "background_color": "#3E4EB8",
 "theme_color": "#2F3BA2"
}

Pour ajouter ce manifeste à votre application. Ensuite, nous devons informer le navigateur de notre manifeste en ajoutant <link rel="manifest"... à chaque page de notre application. Ajoutez maintenant la ligne suivante à l’élément <head>dans le fichier index.html.

<! - CODELAB: Add link rel manifest -> 
<link  rel = "manifest"  href = "/manifest.json" >

Plus tard, vous devrez ajouter une méta description à notre application . Pour cela il faut simplement ajouter la ligne de code suivante à l’en-tête de l’application:

<meta  name = "description"  content = "Une simple application météo" >

Enfin, nous définissons la couleur de la barre d’adresse de notre application progressive , pour laquelle vous devez copier la ligne de code suivante dans le <head> de votre application.

<! - CODELAB: Ajouter meta theme-color -> 
<meta  name = "theme-color"  content = "# 2F3BA2"  />

Rendre le Web hors ligne

Vient maintenant l’une des parties les plus compliquées de tout le guide, car nous allons entrer dans une programmation difficile et rapide pour créer correctement notre service worker , un élément que nous avons mentionné précédemment comme essentiel pour toute application progressive.

Ce que tous les utilisateurs attendent d’une application, c’est qu’elle puisse être utilisée sans connexion Internet, de sorte qu’il nous soit facile d’accéder au contenu sans être sur un réseau . C’est tout aussi important dans une application progressive, il est donc impératif que le dinosaure Chrome ne quitte jamais.

Ce que nous allons faire ici, c’est une page hors ligne personnalisée. Ainsi, lorsque quelqu’un entre dans l’application et n’a pas de connexion, c’est celui qui s’affiche à la place du dinosaure ennuyeux. Pour cela, nous allons créer notre premier service worker .

Si vous ne les connaissez pas très bien, nous vous recommandons de le faire. C’est un tout nouvel univers dans le monde de la programmation pour vous, il est donc très pratique que vous vous y spécialisiez. De cette façon, vous grandirez professionnellement en apprenant des connaissances de pointe qui vous permettront d’avoir une longueur d’avance sur votre guilde .

La première chose que nous allons faire est d’enregistrer le service worker, pour lequel vous devrez ajouter la ligne de code suivante au fichier d’index de l’application progressive :

// CODELAB: enregistrer le technicien de service. 
if  ( 'serviceWorker' dans le navigateur )  { 
 window . addEventListener ( 'load' ,  ()  =>  { 
  navigator . serviceWorker . register ( '/service-worker.js' ) . then (( reg ) => { 
     console . log ( 'Service worker registered.' , reg ); } ); }); }
      
    
 

Vous devez maintenant indiquer au technicien de service la page à afficher lorsqu’il est hors ligne. Dans le référentiel, nous avons déjà créé une page hors ligne personnalisée dans ( public/offline.html). Ce que vous devez faire est simplement d’aller dans Public / service-worker.js dans le référentiel et dans la section const «FILES_TO_CACHE = [
];» incluez la valeur «offline.html». Cela devrait ressembler à l’image:

Maintenant, la prochaine chose que nous devons faire est d’ajouter cette ligne de code à l’événement «install» pour dire au technicien de service de patcher le Web progressif hors ligne:

evt . waitUntil ( 
  caches . open ( CACHE_NAME ). then (( cache )  =>  { 
   console . log ( '[ServiceWorker] Pre-caching offline page' ); return cache . addAll ( FILES_TO_CACHE ); }) );
   
  

Jusqu’ici, nous allons à mi-chemin. La prochaine chose à faire est de faire en sorte que notre service worker videra le cache de manière à ne laisser aucune ancienne donnée. C’est pourquoi nous devons ajouter ce code dans le dossier public / service-worker.js :

// CODELAB: supprime les anciennes données mises en cache du disque. 

evt . waitUntil ( 

  caches . keys (). then (( keyList )  =>  { return Promise . all ( keyList . map (( key ) => { if ( key ! == CACHE_NAME ) { 

     console . log ( '[ServiceWorker] Suppression de l'ancien cache ' , clé ); retourne les caches . delete