Un manifeste minimal pour créer une PWA

Vous pensez que c'est compliqué de transformer un application web en "Progressive Web App" ? Voici la preuve du contraire !

Web PWA Applications Android iOS

Article publié le 12/07/2021, dernière mise à jour le 19/09/2023

Une PWA ou Progressive Web App est une configuration particulière d'un projet web qui permet d'indiquer aux navigateurs que l'application peut-être ajoutée à l'écran d'accueil de l'appareil afin d'avoir un fonctionnement se rapprochant des applications mobiles natives.

Le passage d'une application web classique à une PWA passe par l'ajout d'un manifeste à la racine du projet, permettant une "uniformisation" des points d'entrée de l'application afin que le navigateur puisse savoir facilement comment lancer l'application lorsque cette dernière aura été ajoutée à l'écran d'accueil de l'appareil.

Quels avantages ?

Créer une PWA confère quelques avantages non-négligeables par rapport à une application web classique parmi lesquels :

La possibilité d'apparaitre sur l'écran d'accueil, avec une icône et un nom d'application
S'afficher en plein écran (avec ou sans barre de status)
Accéder aux API natives du système de manière plus "fiable"
Se lancer et être utilisée de manière hors-ligne

Il est important de préciser que l'accès aux APIs natives reste limité aux Web APIs (comme expliqué dans cet article) et que l'utilisation en mode "hors-ligne" doit être configuré grâce à l'utilisation de Web Workers, ce qui ne sera pas traité dans cet article.

Le manifeste minimal

Grâce à l'inclusion de ce manifeste à la racine de votre projet web, votre application sera donc reconnue comme une PWA basique, les navigateurs mobiles pourront proposer à l'utilisateur de "l'installer" sur le téléphone pour ensuite pouvoir la lancer en plein écran, comme une application native.

Tout d'abord, il faudra créer un fichier manifest.json dans votre projet, avec comme contenu les informations suivantes (qu'il faudra adapter à votre projet) :

{
    "short_name": "My Game",
    "name": "My Game, an interactive adventure",
    "icons": [
      {
        "src": "/icons/icons-192.png",
        "type": "image/png",
        "sizes": "192x192"
      },
      {
        "src": "/icons/icons-512.png",
        "type": "image/png",
        "sizes": "512x512"
      }
    ],
    "start_url": "/",
    "background_color": "#ffffff",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#000000",
    "description": "This is an example of a pwa manifest"
}

Attention, pour que votre manifeste soit reconnu, la dernière étape consistera à le lier à votre site grâce aux métadonnées de l'index.html, comme ci-dessous :

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

Quelques précisions

Il y a deux contraintes à respecter pour que votre application puisse être reconnue comme une PWA (en plus des étapes ci-dessus) :

Le projet doit être une "Single Page Application" (SPA)
L'accès doit se faire en HTTPS

Une fois que toutes les configurations seront terminées, vous pourrez vérifier la bonne mise en place avec un testeur de PWA comme celui-ci !

Balázs Kétyi sur Unsplash

Vous avez terminé l'article ?

Aucun commentaire pour l'instant