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) :

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 !

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

Les articles les plus populaires du blog

Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !

Voir la sélection 🚀

Recevez les articles de la semaine par e-mail pour ne rien manquer !

S'abonner à la newsletter 📧

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par Balázs Kétyi sur Unsplash