Progressive Web Apps : de l'onglet à la barre des tâches

1. Bienvenue

Dans cet atelier, vous allez prendre une application Web existante et la rendre installable. Il s'agit du quatrième d'une série d'ateliers de programmation associés à l'atelier sur les progressive web apps. L'atelier de programmation précédent portait sur IndexedDB. Cette série comporte quatre autres ateliers de programmation.

Points abordés

  • Écrire un service worker à la main
  • Ajouter un service worker à une application Web existante
  • Utiliser le service worker et l'API Cache Storage pour rendre les ressources disponibles hors connexion

À savoir

  • HTML et JavaScript de base

Ce dont vous avez besoin

2. Préparer l'atelier

Commencez par cloner ou télécharger le code de démarrage nécessaire pour effectuer cet atelier de programmation :

Si vous clonez le dépôt, assurez-vous d'être dans la branche pwa04--tab-to-taskbar. Le fichier ZIP contient également le code de cette branche.

Ce code de base nécessite Node.js 14 ou version ultérieure. Une fois le code disponible, exécutez npm ci à partir de la ligne de commande dans le dossier du code afin d'installer toutes les dépendances dont vous aurez besoin. Ensuite, exécutez npm start pour démarrer le serveur de développement de l'atelier de programmation.

Le fichier README.md du code source fournit une explication pour tous les fichiers distribués. De plus, voici les principaux fichiers existants que vous utiliserez tout au long de cet atelier de programmation :

Fichiers clés

  • index.html : code HTML principal de l'application

3. Créer un fichier manifeste d'application Web

Les fichiers manifestes des applications Web décrivent votre PWA afin que, avec un Service Worker fonctionnel, un navigateur sache que votre application Web est installable et, surtout, comment la représenter sur l'appareil sur lequel elle sera installée. Mais il faut d'abord le créer. Ajoutez un fichier nommé manifest.json dans le dossier public de votre application Web, puis ajoutez-y les éléments suivants :

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

N'oubliez pas d'inclure une icône Apple Touch pour les appareils iOS. Ajoutez la ligne de code suivante juste après la balise <title> dans <head> dans index.html.

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

Explication

Ce fichier manifeste inclut des champs obligatoires, recommandés et promotionnels. Il est donc assez complexe. Tout d'abord, les champs obligatoires où sont définis le nom, l'URL de démarrage, le mode d'affichage et les icônes de la PWA. Notez que la dernière icône est une icône masquable, ce qui permet d'afficher plusieurs icônes en fonction de l'UI d'un appareil. Ensuite, vous trouverez les champs recommandés pour le thème et la couleur d'arrière-plan. Enfin, vous trouverez les champs promotionnels, une description et les catégories dans lesquelles cette PWA s'inscrit. Lorsque ce fichier manifeste est associé à une PWA, ces champs contrôlent la façon dont l'application installée de notre PWA sera affichée et gérée.

4. Associer un fichier manifeste à une PWA

Une fois le fichier manifeste créé, il doit être associé à la PWA. Pour ce faire, ouvrez index.html et ajoutez le code suivant juste en dessous de la balise <title> dans <head> :

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

Explication

Un lien de fichier manifeste indique aux navigateurs compatibles que le fichier manifeste de l'application Web associée décrit le site Web actuel. Lorsqu'il est valide et disponible, avec un service worker fonctionnel, et une fois que l'application Web a passé tous les critères d'installation supplémentaires spécifiques au navigateur, il permet à votre application d'être installée directement sur l'appareil d'un utilisateur.

5. Ajouter des raccourcis

Pour que votre PWA soit plus profondément intégrée à un appareil, vous pouvez fournir des raccourcis de menu contextuel vers des fonctionnalités spécifiques de votre application. Le bouton bascule du mode Nuit dans la PWA permet de choisir le mode en définissant un paramètre de requête mode sur night ou day. Configurez deux raccourcis dans manifest.json qui effectuent les actions suivantes :

  • Démarre la PWA en mode night ou day.
  • Utilise /images/logo.svg à une taille 150x150 pour une icône

6. Félicitations !

Vous venez d'apprendre à créer un fichier manifeste d'application Web, à l'associer à une page Web et à ajouter des raccourcis d'application lorsqu'elle est installée.

Le prochain atelier de programmation de la série est Inviter à installer et mesurer l'installation.