Prise en main avec les applications web progressives

Article
07/16/2024

Les applications web 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 codebase.

Pour en savoir plus sur les PWA et leurs avantages, consultez Vue d’ensemble des applications web 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 Installing a PWA in Use Progressive Web Apps in 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 applications web 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.

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 pouvez également utiliser 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 utilisent HTTPS par défaut, mais si votre hôte n’offre pas https, 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 servi 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 plus d’informations, consultez Utiliser un manifeste d’application web pour intégrer un PWA au système d’exploitation.

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 icônes

É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 générer les fonctionnalités principales de l’application.

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

Pour créer le contenu de l’interface utilisateur principale, 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 plus attrayante visuellement. 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 maintenant quelque chose d’utile et peut être installée en tant qu’application autonome par les utilisateurs. Avant d’installer l’application, créez un worker de service pour que l’application fonctionne hors connexion.

Étape 5 : Ajouter un worker de service

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

Un worker de service est un worker web spécialisé qui peut intercepter les demandes réseau de votre PWA et permet des scénarios tels que :

Prise en charge hors connexion, y compris les connexions intermittentes.
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.

Un PWA n’a pas besoin d’un worker de service pour que Microsoft Edge puisse installer l’application. Toutefois, nous vous recommandons d’ajouter un worker de service à votre PWA pour la rendre plus rapide et pour rendre votre PWA plus fiable, par exemple lorsque votre appareil dispose d’une connexion réseau intermittente ou est hors connexion.

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 , qui est déclenché lorsque l’utilisateur installe votre application, et l’utilise pour mettre en cache les ressources dont votre application a besoin pour fonctionner hors connexion, telles que la page HTML initiale, 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 cliquez sur Workers de service. 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, les navigateurs de prise en charge peuvent installer votre application 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 Progressive Web Apps dans Microsoft Edge.

Étapes suivantes

Le convertisseur de température PWA que vous avez créé jusqu’à présent n’est qu’un petit échantillon 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 des applications web progressives (atelier)

Partager via