Les PWA ont de plus en plus le vent en poupe et il semblerait que ce terme soit dans toutes les bouches. Du moins toutes les bouches des développeurs JS. Et parfois plus encore celles de certains managers qui imaginent un monde où le JS régnerait en maitre. “Un langage pour les gouverner tous, et dans les ténèbres, les lier”. Navré, je me suis replongé dans le Seigneur des Anneaux et ça me monte à la tête 😅.

J’ai écrit quelques articles au sujet des PWA alors si vous ne savez pas vraiment de quoi il en retourne et les raisons qui se cachent derrière leur existence, je vous laisse cliquer ici et ici.

Un rappel n’ayant jamais fait de mal à personne : pour être qualifiée de PWA une app doit respecter et implémenter 3 critères essentiels :

• Elle doit tourner en HTTPS
• Elle doit inclure un Web Manifest
• Elle doit implémenter des Services Workers

Dans ce bref article, je vais vous montrer que Gatsby peut vous faciliter drastiquement la tâche.

Votre site doit tourner en HTTPS

Commençons par quelque chose que Gatsby ne peut pas faire à votre place. Je l’ai déjà évoqué dans mon article de présentation des PWA, mais je pense que c’est un point qu’il est bon de répéter. Vous devez impérativement faire en sorte que votre site tourne en HTTPS. Oui, vous devez faire l’effort de mettre en place du HTTPS sur votre nom de domaine.
Mais soyez rassuré, cet effort ne sera pas bien plus important que celui de bâiller devant votre télé le soir. Ces derniers temps, la génération d’un certificat SSL est devenue extrêmement simple. Je m’explique. Votre site Gatsby générant majoritairement du contenu statique, vous pouvez utiliser des hébergeurs d’un nouveau genre comme Netlify et Vercel (nouveau nom de ZEIT Now). Plus besoin de faire un SSH dans votre serveur pour demander un certificat Let’s Encrypt et penser à son renouvellement. Ces nouvelles plateformes font tout ça pour vous. Vous avez juste à modifier les serveurs de noms de votre domaine par ceux de Netlify ou Vercel et hop le tour est joué.

Elle doit inclure un Web Manifest

Super, mais qu’est-ce qu’un Web Manifest ? Derrière cette appellation somme toute pompeuse se cache une réalité assez simple. C’est un fichier JSON qui permet aux développeurs de centraliser les metadatas de leur application. Cela va du nom de l’application, de sa description, de l’emplacement de ses icônes en fonction des différents formats, de l’URL de départ, jusqu’au mode d’affichage de l’application qui est spécifique aux PWA.

Voici un exemple de fichier de Web-manifest:

`{
  "short_name": "Geeklecode",
  "name": "Geeklecode : tout est une histoire de code",
  "description": "Partage de connaissances ",
  "icons": [
    {
      "src": "assets/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "assets/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#BADA55",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#BADA55"
}

Un plugin gatsby à la rescousse

Comme souvent Gatsby met à votre disposition un plugin pour vous faciliter la création de ce manifeste. Le gatsby-plugin-manifest porte particulièrement bien son nom.

De base, le plugin vous permet de plusieurs choses sans même avoir a y penser :

• si vous lui donnez une icône d’au moins 512x512, il va vous générer toutes les tailles d’icônes intermédiaires. Ces icônes sont visibles lorsque l’utilisateur aura installé votre PWA sur son périphérique.
• il va générer vos favicon
• prend en charge les icônes iOS “à l’ancienne”
• fait du cache busting. Autrement dit il va faire en sorte que les fichiers qui sont mis en cache du côté de votre client ne soient jamais périmés en générant un identifiant unique et permettant au navigateur de télécharger une version actualisée du fichier si elle existe.
• permet de gérer plusieurs langues avec un fichier manifeste par chemin

Pour l’installer :

yarn add gatsby-plugin-manifest

Comme tout plugin Gatsby, vous devez l’initialiser dans le fichier gatsby-config.js.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Geeklecode`,
        short_name: `Geeklecode`,
        start_url: `/`,
        background_color: `#BADA55`,
        theme_color: `#BADA55`,
        display: `standalone`,
      },
    },
  ],
}

C’est tout, vous n’avez rien de plus à faire, votre fichier manifeste sera créé tout seul par Gatsby lors de sa phase de build. Une série d’options vous permettront d’adapter le fichier à votre sauce.

Elle doit implémenter des Services Workers

Les services workers sont un terme à la mode et peut parfois sembler intimidant. Nul besoin d’en avoir peur, ils sont là pour nous aider. Pas pour nous martyriser. Imaginez-vous simplement des travailleurs de l’ombre qui sont à votre service et vous permette de supporter une utilisation hors ligne ou avec une mauvaise connexion internet. C’est notamment eux qui sont en charge des notifications push dans les navigateurs modernes.

Un plugin Gatsby à la rescousse pour mettre en place les services workers

Devinez quoi ? Il y a là aussi un plugin Gatsby pour vous aider gatsby-plugin-offline. N’est-ce pas merveilleux ? À croire que les petits gars de Gatsby ont pensé à tout 🤔.

Pour l’installer, rien de plus simple :

yarn add gatsby-plugin-offline

Modifiez ensuite votre fichier gatsby-config.js et ajoutez ce plugin à la suite de gatsby-plugin-manifest.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Geeklecode`,
        short_name: `Geeklecode`,
        start_url: `/`,
        background_color: `#BADA55`,
        theme_color: `#BADA55`,
        display: `standalone`,
      },
    },
    `gatsby-plugin-offline`,
  ],
}

Et voilà ! C’est tout ce que vous avez à faire pour avoir une configuration de base pour votre PWA avec Gatsby. Autant dire que c’est un jeu d’enfant vous ne trouvez pas ?

Maintenant à vous d’épater le Web avec une PWA qui envoie du bois. Alors à vos claviers !

En cours