Réaliser une PWA simple en moins de 5 minutes

Les Progressive Web Apps, c’est-à-dire les PWA, sont un type d’application développée à l’aide de technologies Web et pouvant être installées sur n’importe quel appareil comme une application traditionnelle. La création d’une PWA simple est très simple car elle implique l’ajout de deux fichiers importants au projet. Après cela, la PWA serait prête à être installée sur n’importe quel système d’exploitation.

Les étapes ci-dessous doivent être suivies pour créer une application Web progressive :

Étape 1: Créez une page HTML qui serait le point de départ de l’application. Ce code HTML contiendra un lien vers le fichier nommé manifest.json. Il s’agit d’un fichier important qui sera créé à l’étape suivante.

Code:

html

<!DOCTYPE html>

<html>

<head>

  

  <meta charset="utf-8">

  <meta name="viewport"

        content="width=device-width,

                 initial-scale=1">

  <meta http-equiv="X-UA-Compatible"

        content="ie=edge">

  

  <title>PWA Tutorial</title>

  

       

  <meta name=

  "apple-mobile-web-app-status-bar"

        content="#aa7700">

  <meta name="theme-color"

        content="black">

  

  <link rel="manifest"

        href="manifest.json">

</head>

<body>

  <h1 style="color: green;">

    GeeksforGeeks</h1>

  

<p>

    This is a simple tutorial for

    creating a PWA application.

  </p>

  <script>

    // Script for Service Worker

  </script>

</body>

</html>

Étape 2: Créez un fichier manifest.json dans le même répertoire. Ce fichier contient essentiellement des informations sur l’application Web. Certaines informations de base incluent le nom de l’application, l’URL de démarrage, la couleur du thème et les icônes. Toutes les informations requises sont spécifiées au format JSON. La source et la taille des icônes sont également définies dans ce fichier.

Javascript

{

    "name":"PWA Tutorial",

    "short_name":"PWA",

    "start_url":"index.html",

    "display":"standalone",

    "background_color":"#5900b3",

    "theme_color":"black",

    "scope": ".",

    "description":"This is a PWA tutorial.",

    "icons":[

    {

    "src":"images/icon-192x192.png",                     

    "sizes":"192x192",

    "type":"image/png"

    },

    {

    "src":"images/icon-512x512.png",

    "sizes":"512x512",

    "type":"image/png"

    }

  ]

}

Étape 3: Créez un nouveau dossier nommé images et placez toutes les icônes liées à l’application dans ce dossier. Il est recommandé d’avoir des dimensions d’icônes d’au moins 192 par 192 pixels et 512 par 512 pixels. Le nom et les dimensions de l’image doivent correspondre à ceux du fichier manifeste.

Étape 4: Servir le répertoire à l’aide d’un serveur en direct afin que tous les fichiers soient accessibles.

Étape 5 : Ouvrez le fichier index.html dans Chrome, accédez à la section Application dans les outils de développement Chrome. Ouvrez la colonne du manifeste dans la liste.

simplepwam0

Étape 6 : Sous l’onglet installabilité, cela montrerait qu’aucun service worker n’est détecté. Nous devrons créer un autre fichier pour la PWA, c’est-à-dire serviceworker.js dans le même répertoire. Ce fichier gère la configuration d’un service worker qui va gérer le fonctionnement de l’application.

Code:

Javascript

var staticCacheName = "pwa";

self.addEventListener("install", function (e) {

  e.waitUntil(

    caches.open(staticCacheName).then(function (cache) {

      return cache.addAll(["/"]);

    })

  );

});

self.addEventListener("fetch", function (event) {

  console.log(event.request.url);

  event.respondWith(

    caches.match(event.request).then(function (response) {

      return response || fetch(event.request);

    })

  );

});

Étape 7 : La dernière étape consiste à lier le fichier de service worker à index.html. Cela se fait en ajoutant un court script JavaScript au fichier index.html créé dans les étapes ci-dessus. Ajoutez le code ci-dessous dans la balise de script dans index.html.

Code:

HTML

<script>

    window.addEventListener('load', () => {

      registerSW();

    });

    // Register the Service Worker

    async function registerSW() {

      if ('serviceWorker' in navigator) {

        try {

          await navigator

                .serviceWorker

                .register('serviceworker.js');

        }

        catch (e) {

          console.log('SW registration failed');

        }

      }

    }

 </script>

Installation de l’application :

  • En naviguant vers l’onglet Service Worker, nous voyons que le service worker est enregistré avec succès et maintenant une option d’installation sera affichée qui nous permettra d’installer notre application.
  • Cliquez sur le bouton d’installation pour installer l’application. L’application serait alors installée et elle serait visible sur le bureau.
  • Pour installer l’application sur un appareil mobile, le Ajouter à l’écran d’accueil option dans le navigateur mobile peut être utilisée. Cela installera l’application sur l’appareil.

Production:

  • Section du manifeste une fois toutes les étapes terminées

simplepwam4

  • Installation de l’application Web à l’aide du bouton Installer l’application

simplepwam2

  • L’application finale avec son icône sur le bureau

simplepwafinal

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Aller en haut