Prise en main avec les applications web progressives

Article
03/29/2023

Les Web Apps progressives (PWA) sont des applications que vous créez à l’aide de technologies web, et qui peuvent être installées et exécutées sur tous les appareils, à partir d’un code base.

Pour en savoir plus sur les PWA et leurs avantages, consultez Vue d’ensemble des Web Apps progressives (PWA).

Ce guide s’adresse aux développeurs web qui souhaitent apprendre à créer des PWA. Pour en savoir plus sur l’installation et l’exécution des PWA, consultez Installation d’un PWA dans Utiliser des Web Apps progressifs dans Microsoft Edge.

Dans ce guide, vous allez d’abord découvrir comment fonctionnent les PWA, puis créer votre première PWA simple, qui sera une application de convertisseur de température, puis en savoir plus sur la façon de créer des PWA de qualité.

Vous trouverez le code source final de l’application que vous allez créer dans ce guide sur le référentiel d’applications de démonstration PWA getting started.

Conditions préalables

Installez Visual Studio Code pour modifier votre code source PWA.
Installez Node.js pour l’utiliser comme serveur web local.
Une connaissance pratique du code HTML, CSS et JavaScript est également un avantage.

L’architecture d’une PWA

Les Web Apps progressives sont écrites à l’aide des langages de programmation du web : HTML, CSS et JavaScript, et sont distribuées à vos utilisateurs à l’aide de serveurs web.

Pour mettre votre application à la disposition des utilisateurs, vous la déployez sur un serveur web accessible via HTTPS. Votre serveur contient :

Code principal : les points de terminaison nécessaires à votre application, lorsqu’elle est connectée à Internet, pour récupérer le contenu dynamique qui peut être stocké dans une base de données sur votre serveur.
Code frontal : les ressources nécessaires à l’installation de l’application sur l’appareil de l’utilisateur, telles que le code HTML, CSS et JavaScript.

Votre code principal peut utiliser les langages côté serveur de votre choix, tels que ASP.NET, Java, Node.js ou PHP. Notez toutefois que les points de terminaison côté serveur peuvent même ne pas être nécessaires en fonction de l’application que vous créez. La PWA que vous créez dans ce tutoriel n’a pas de code côté serveur, car l’application s’exécute exclusivement sur l’appareil sur lequel elle est installée et n’a pas besoin de données côté serveur.

Votre code frontal utilise html, CSS, JavaScript et un manifeste JSON uniquement.

Vous utilisez du code HTML pour décrire le contenu de votre application, tel que le texte, les images, les champs de texte ou les boutons qui apparaissent dans l’interface utilisateur. Vous utilisez ensuite CSS pour organiser le contenu HTML dans une disposition et fournir des styles aux éléments. Vous utilisez JavaScript pour ajouter des interactions utilisateur à votre interface utilisateur. Enfin, vous utilisez un fichier manifeste JSON qui décrit votre application sur le système d’exploitation hôte.

Notez que bien que votre code frontal s’exécute à l’aide du navigateur web de l’appareil, l’interface utilisateur du navigateur peut ne pas être visible, car votre application peut choisir de s’exécuter dans une fenêtre autonome.

En plus du code de l’interface utilisateur, vous utilisez également JavaScript pour rendre votre application plus rapide, plus fiable et indépendante du réseau à l’aide d’un fichier de travail de service. Enfin, votre code frontal contient également un fichier manifeste JSON qui décrit votre application sur le système d’exploitation hôte.

Le diagramme suivant montre l’architecture générale d’une PWA. Le serveur web se trouve d’un côté de la PWA et l’appareil se trouve de l’autre côté. L’appareil contient le code frontal, notamment HTML, CSS, JavaScript, le worker de service et le manifeste :

Diagramme d’architecture d’une PWA

Étape 1 : Démarrer un serveur web

Les PWA sont distribuées aux utilisateurs à l’aide de serveurs web. Une fois que votre application est prête, déployez-la sur le web à l’aide d’un fournisseur d’hébergement web. Vous pouvez ensuite mettre à jour votre application simplement en déployant la nouvelle version sur votre serveur web.

Pour commencer à développer votre PWA, vous pouvez utiliser un serveur web local à la place. Pour démarrer un serveur local :

Créez un dossier sur votre ordinateur sur lequel le serveur web s’exécutera.

Pour ce faire, ouvrez une invite de commandes et tapez :
```
cd path/to/your/dev/folder
mkdir MySamplePWA
cd MySamplePWA
```
Démarrez le serveur à l’aide de la http-server bibliothèque Node.js :
```
npx http-server
```

Vous disposez maintenant d’un serveur web local simple s’exécutant sur http://localhost:8080.

Les parties clés de la plateforme progressive Web Apps, telles que les workers de service, nécessitent l’utilisation de HTTPS. Lorsque votre PWA est en ligne, vous devez la publier sur une URL HTTPS. De nombreux hôtes proposent désormais le protocole HTTPS par défaut, mais si votre hôte ne le fait pas, Let’s Encrypt offre une alternative gratuite pour créer les certificats nécessaires.

Par exemple, vous pouvez créer un compte gratuit Azure. Si vous hébergez votre site web sur microsoft Azure App Service, il est fourni via HTTPS par défaut.

Vous pouvez également héberger votre site web sur GitHub Pages qui prend également en charge HTTPS.

À des fins de débogage, Microsoft Edge autorise également un localhost serveur web à utiliser les API PWA sans HTTPS.

Étape 2 : Créer la page de démarrage de votre application

Jusqu’à présent, aucun contenu n’est disponible sur votre serveur web. Commencez par créer la première page que les utilisateurs verront lorsqu’ils accèderont à votre application de convertisseur de température.

Ouvrez Visual Studio Code, sélectionnez Fichier>Ouvrir le dossier , puis sélectionnez le MySamplePWA répertoire que vous avez créé à l’étape précédente.

Créez un fichier dans le projet en appuyant sur Ctrl+N, ajoutez le contenu suivant et enregistrez le fichier sous index.html:

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" />
    <title>Temperature converter</title>
  </head>
  <body>
    <h1>Temperature converter</h1>
  </body>
</html>

Accédez à http://localhost:8080 pour afficher votre application :

L’application s’exécute dans le navigateur pour l’instant et ne peut pas être installée. Pour rendre l’application installable, l’application a besoin d’un manifeste d’application web.

Étape 3 : Créer un manifeste d’application web

Un manifeste d’application web est un fichier JSON contenant des métadonnées sur votre application, telles que son nom, sa description, ses icônes et les différentes fonctionnalités du système d’exploitation qu’il utilise.

Pour ajouter un manifeste d’application à votre application :

Dans Visual Studio Code, appuyez sur Ctrl+N pour créer un fichier avec le contenu suivant, puis enregistrez le fichier sous manifest.json.

{
    "lang": "en-us",
    "name": "Temperature converter app",
    "short_name": "Temperature converter",
    "description": "A basic temperature converter application that can convert to and from Celsius, Kelvin, and Fahrenheit",
    "start_url": "/",
    "background_color": "#2f3d58",
    "theme_color": "#2f3d58",
    "orientation": "any",
    "display": "standalone",
    "icons": [
        {
            "src": "/icon512.png",
            "sizes": "512x512"
        }
    ]
}

Ajoutez une image d’icône d’application de 512 x 512 pixels nommée icon512.png à votre projet. Vous pouvez utiliser l’exemple d’image à des fins de test.
Dans Visual Studio Code, ouvrez index.htmlet ajoutez le code suivant à l’intérieur de la <head> balise.
```
<link rel="manifest" href="/manifest.json">
```

L’extrait de code ci-dessus lie le nouveau fichier manifeste d’application web à votre site web.

Votre projet VS Code doit maintenant ressembler à ceci :

Capture d’écran de VS Code montrant l’exemple de projet PWA, avec les fichiers index.html, manifest.json et icon

Étape 4 : Continuer à créer l’interface utilisateur de votre application

Maintenant que votre application dispose d’un fichier manifeste d’application web et d’une page de démarrage, il est temps de créer la fonctionnalité d’application main.

Dans cette étape du tutoriel, nous allons créer une application de conversion d’unité de température de base.

Pour créer le contenu de l’interface utilisateur main, copiez le code HTML suivant et collez-le dans le index.html fichier, en remplaçant la <h1> balise HTML :

<form id="converter">
  <label for="input-temp">temperature</label>
  <input type="text" id="input-temp" name="input-temp" value="20" />
  <label for="input-unit">from</label>
  <select id="input-unit" name="input-unit">
    <option value="c" selected>Celsius</option>
    <option value="f">Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <label for="output-unit">to</label>
  <select id="output-unit" name="output-unit">
    <option value="c">Celsius</option>
    <option value="f" selected>Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
</form>

Le code HTML ci-dessus contient un formulaire avec plusieurs éléments d’entrée que votre application utilisera pour convertir une valeur de température d’une unité en une autre.

Pour que le convertisseur fonctionne, vous utilisez du code JavaScript. Créez un fichier nommé converter.js dans votre projet et ajoutez-y le code suivant :

const inputField = document.getElementById('input-temp');
const fromUnitField = document.getElementById('input-unit');
const toUnitField = document.getElementById('output-unit');
const outputField = document.getElementById('output-temp');
const form = document.getElementById('converter');

function convertTemp(value, fromUnit, toUnit) {
  if (fromUnit === 'c') {
    if (toUnit === 'f') {
      return value * 9 / 5 + 32;
    } else if (toUnit === 'k') {
      return value + 273.15;
    }
    return value;
  }
  if (fromUnit === 'f') {
    if (toUnit === 'c') {
      return (value - 32) * 5 / 9;
    } else if (toUnit === 'k') {
      return (value + 459.67) * 5 / 9;
    }
    return value;
  }
  if (fromUnit === 'k') {
    if (toUnit === 'c') {
      return value - 273.15;
    } else if (toUnit === 'f') {
      return value * 9 / 5 - 459.67;
    }
    return value;
  }
  throw new Error('Invalid unit');
}

form.addEventListener('input', () => {
  const inputTemp = parseFloat(inputField.value);
  const fromUnit = fromUnitField.value;
  const toUnit = toUnitField.value;

  const outputTemp = convertTemp(inputTemp, fromUnit, toUnit);
  outputField.value = (Math.round(outputTemp * 100) / 100) + ' ' + toUnit.toUpperCase();
});

Ouvrez à nouveau le index.html fichier et ajoutez le code suivant après la balise de fermeture </form> pour charger le fichier JavaScript :
```
<script src="converter.js"></script>
```

Ajoutez maintenant un style CSS à l’application pour la rendre visuellement plus intéressante. Créez un fichier appelé converter.css dans votre projet et ajoutez-y le code suivant :

html {
  background: rgb(243, 243, 243);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 15pt;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
}

#converter {
  width: 15rem;
  padding: 2rem;
  border-radius: .5rem;
  box-shadow: 0 0 2rem 0 #0001;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#converter input, #converter select {
  font-family: inherit;
  font-size: inherit;
  margin-block-end: 1rem;
  text-align: center;
  width: 10rem;
}

#converter #output-temp {
  font-size: 2rem;
  font-weight: bold;
}

Ouvrez index.html à nouveau et référencez le nouveau fichier CSS qu’il contient en ajoutant le code suivant dans la <head> balise :
```
<link rel="stylesheet" href="converter.css">
```
Votre projet Visual Studio Code doit maintenant ressembler à ceci :
Accédez à http://localhost:8080 pour afficher votre application :

Votre application fait quelque chose d’utile maintenant, mais elle ne peut pas encore être installée, car il n’y a pas de service Worker. Vous allez rendre votre application installable à l’étape suivante, en créant un worker de service.

Étape 5 : Ajouter un worker de service

Les travailleurs du service sont une technologie clé qui permet de rendre les PWA plus rapides et indépendantes des conditions réseau.

Les Workers de service sont des Web Workers spécialisés qui interceptent les requêtes réseau de votre PWA et activent des scénarios qui étaient auparavant limités aux applications natives, notamment :

Prise en charge hors connexion.
Mise en cache avancée.
Exécution de tâches en arrière-plan telles que la réception de messages PUSH, l’ajout de badges à l’icône d’application ou la récupération de données à partir d’un serveur.

Pour que Microsoft Edge puisse installer l’application, votre application doit avoir un fichier worker de service.

Un worker de service est défini dans un fichier JavaScript chargé par votre application. Pour ajouter un worker de service à votre projet :

Dans Visual Studio Code, créez un fichier (Ctrl+N), ajoutez le contenu suivant et enregistrez le fichier sous sw.js:

const CACHE_NAME = `temperature-converter-v1`;

// Use the install event to pre-cache all initial resources.
self.addEventListener('install', event => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME);
    cache.addAll([
      '/',
      '/converter.js',
      '/converter.css'
    ]);
  })());
});

self.addEventListener('fetch', event => {
  event.respondWith((async () => {
    const cache = await caches.open(CACHE_NAME);

    // Get the resource from the cache.
    const cachedResponse = await cache.match(event.request);
    if (cachedResponse) {
      return cachedResponse;
    } else {
        try {
          // If the resource was not in the cache, try the network.
          const fetchResponse = await fetch(event.request);

          // Save the resource in the cache and return it.
          cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        } catch (e) {
          // The network failed.
        }
    }
  })());
});

Le sw.js fichier agit en tant que worker de service de votre PWA. Le code ci-dessus écoute l’événement install et l’utilise pour mettre en cache toutes les ressources dont l’application a besoin pour fonctionner : la page HTML de démarrage, le fichier JavaScript du convertisseur et le fichier CSS du convertisseur.

Le code intercepte également les fetch événements, qui se produisent chaque fois que votre application envoie une requête au serveur, et applique une stratégie de mise en cache d’abord. Le service Worker retourne les ressources mises en cache afin que votre application puisse fonctionner hors connexion et, si cela échoue, tente de télécharger à partir du serveur.

Ouvrez index.html et ajoutez le code suivant à la fin de la <body> balise pour inscrire votre worker de service :

<script>
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js', { scope: '/' });
}
</script>

Pour confirmer que votre service Worker est en cours d’exécution :

Dans Microsoft Edge, accédez à http://localhost:8080.
Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.
Ouvrez l’outil Application , puis Service Workers. Si le service Worker n’est pas affiché, actualisez la page.
Affichez le cache du Service Worker en développant Le stockage du cache et en sélectionnant temperature-converter-v1. Toutes les ressources mises en cache par le service Worker doivent être affichées. Les ressources mises en cache par le service Worker incluent l’icône de l’application, le manifeste de l’application et la page initiale.
Essayez votre PWA en tant qu’application hors connexion. Dans DevTools, ouvrez l’outil Réseau et remplacez la valeur de limitation par Hors connexion.
Actualisez votre application. Il doit toujours apparaître correctement dans le navigateur, à l’aide des ressources mises en cache servies par le service Worker.

Étape 6 : Installer l’application

Maintenant que votre application dispose d’un manifeste d’application web et d’un worker de service, les navigateurs prenant en charge peuvent l’installer en tant que PWA.

Dans Microsoft Edge, une fois que vous avez actualisé votre application, le bouton Application disponible s’affiche dans la barre d’adresses. En cliquant sur le bouton Application disponible , vous êtes invité à installer l’application localement.

Cliquez sur Installer pour installer l’application localement. Une fois l’installation terminée, votre application s’affiche dans sa propre fenêtre et son propre icône d’application dans la barre des tâches.

L’exemple PWA, installé et en cours d’exécution dans sa propre fenêtre

Pour en savoir plus sur l’installation des PWA, consultez Utiliser la Web Apps progressive dans Microsoft Edge.

Étapes suivantes

Le convertisseur de température simple PWA que vous avez créé jusqu’à présent ne fait que gratter la surface de ce que les PWA peuvent faire. Les étapes précédentes sont des prérequis importants pour toute PWA, mais il existe des bonnes pratiques importantes qui donneront à votre PWA l’impression d’être une application réelle une fois installée.

Lorsque les utilisateurs installent des applications, ils ont certaines attentes quant à ce que ces applications peuvent faire ; par exemple :

Les utilisateurs s’attendent à ce que les applications fonctionnent hors connexion.
Les utilisateurs s’attendent à ce que les applications s’intègrent au système d’exploitation, par exemple en gérant des fichiers.
Les utilisateurs s’attendent à ce que les applications effectuent des tâches informatiques non triviales.
Les utilisateurs s’attendent à trouver des applications dans les magasins d’applications.

Pour créer une PWA exceptionnelle, consultez Bonnes pratiques pour les PWA.

Voir également

Prise en main avec Web Apps progressive (atelier).