Outils vus dans le chapitre Prérequis

Cypress (https://www.cypress.io/) et Puppeteer (https://www.npmjs.com/package/puppeteer) sont des solutions pour écrire des tests end-to-end permettant par exemple de s’assurer qu’aucune régression n’est ajoutée dans l’application. Ces deux solutions permettent notamment de définir le viewport utilisé, afin de tester le design de l’application en fonction de la taille de l’écran.
Lighthouse (https://developers.google.com/web/tools/lighthouse) permet d’auditer une application.
Netlify (https://www.netlify.com/) est une solution d’hébergement de ressources statiques.

Outils vus dans le chapitre Web App Manifest

PWACompat gère le support du fichier Manifest pour l’ensemble des navigateurs du marché.
PWA Directory est un annuaire de PWA. Vous pouvez y ajouter les vôtres, il suffit d’indiquer l’URL pointant vers votre fichier Manifest.
Web Manifest Validator permet de valider le contenu du fichier Manifest.
Maskable.app (https://maskable.app/) permet de visualiser le rendu des maskable icons.
Le web component pwa-install du projet PWABuilder permet d’avoir une interface plus complète invitant l’utilisateur à installer une application.

Pour cela, vous devez simplement importer ce script dans votre application :

<script 
  type="module" 
  src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwainstall" 
></script>

Outils vus dans le chapitre Promise et Fetch

Bluebird (https://www.npmjs.com/package/bluebird) est une librairie permettant de convertir des traitements asynchrones à base de callbacks en une version utilisant des Promises. Voici un exemple d’utilisation de l’une des méthodes disponibles dans cette librairie.

const Promise = require(‘bluebird'); 
const fs = require(‘fs'); 
const readFile = Promise.promisify(fs.readFile); 
 
readFile(pathToFile).then(content => { 
   ... 
});

La plateforme Node.js propose nativement, depuis la version 8, une méthode permettant de faire cette conversion. Cette méthode est disponible depuis le module util : https://nodejs.org/dist/latest-v8.x/docs/api/util.html#util_util_promisify_original

const util = require('util'); 
const fs = require(‘fs'); 
const readFile = util.promisify(fs.readFile); 
 
readFile(pathToFile).then(content => { 
    ... 
});

Outils vus dans le chapitre Service Worker

Le module JavaScript register-service-worker (https://www.npmjs.com/package/register-service-worker) permet d’avoir une syntaxe plus simple pour enregistrer un Service Worker mais également d’interagir avec les différentes phases de son cycle de vie.

Voici un exemple d’enregistrement d’un Service Worker, nommé service-worker.js, ainsi que la définition de fonctions qui seront automatiquement exécutées en fonction de son cycle de vie.

import { register } from 'register-service-worker' 
 
register('/service-worker.js', { 
  registrationOptions: { scope: './' }, 
  ready (registration) { 
    console.log('Service worker is active.') 
  }, 
  registered (registration) { 
    console.log('Service worker has been registered.') 
  }, 
  cached (registration) { 
    console.log('Content has been cached for offline use.') 
  }, 
  updatefound (registration) { 
    console.log('New content is downloading.') 
  }, 
  updated (registration) { 
    console.log('New...

Outils vus dans le chapitre Cache

Le module Workbox (https://github.com/GoogleChrome/workbox) est une librairie qui simplifie l’écriture des différentes stratégies de mise en cache que nous pouvons mettre en place dans un Service Worker.

Outils vus dans le chapitre IndexedDB

Comme pour la plupart des API présentées dans cet ouvrage, les navigateurs du marché proposent à travers leurs DevTools une interface dédiée pour interagir avec IndexedDB.

Si vous trouvez que l’API IndexedDB est trop verbeuse ou trop limitée, vous pouvez utiliser des librairies disponibles sur NPM plus adaptées à vos besoins. Nous pouvons par exemple citer :

localForage (https://github.com/localForage/localForage) : librairie comparable à l’API localStorage pour ce qui est de l’utilisation. Elle permet d’écrire du code pour stocker des données dans IndexedDB et de gérer les navigateurs qui ne supportent pas cette API en choisissant d’autres solutions comme WebSQL ou localStorage.
Dexie.js (https://dexie.org/) : wrapper sur l’objet IndexedDB permettant d’en simplifier l’écriture.
PouchDB (https://pouchdb.com/) : solution permettant de gérer la synchronisation entre une base de données locale utilisant IndexedDB et une base de données à distance CouchDB.
IndexedDB Promise (idb) (https://github.com/jakearchibald/idb) : librairie développée par Jake Archibald de Google, exposant des objets Promise lors de l’utilisation d’IndexedDB.

Outils vus dans le chapitre Background Sync

Les DevTools de Chrome proposent une interface dédiée permettant de visualiser toutes les demandes de synchronisation. Pour cela, rendez-vous sur l’onglet Application - Background Sync. Après avoir cliqué sur le bouton Record, vous verrez dans le tableau de cet onglet toutes les demandes de synchronisation.

Comme librairie, nous pouvons mentionner le plug-in Background Sync de Workbox permettant de simplifier l’écriture des traitements décrits dans ce chapitre. Ce plug-in, via une simple configuration, permet de définir une stratégie lorsque certaines requêtes sont en échec.

Dans l’exemple ci-après, si une requête vers une URL commençant par /api et se terminant par .json est en erreur, le plug-in Workbox et le Service Worker dans lequel il est défini exécutent la requête tant qu’elle n’est pas réussie. Nous pouvons définir une période maximale de rétention en minutes. Ici, nous avons configuré une période de rétention de 24 heures.

import {BackgroundSyncPlugin} from 'workbox-background-sync'; 
import {registerRoute} from 'workbox-routing'; 
import {NetworkOnly} from 'workbox-strategies'; 
 
const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName'...

Outils vus dans le chapitre Performances générales

Webpack, Parcel ou encore Rollup permettent de générer une version optimisée d’une application.
Gulp ou GruntJS sont des task runners permettant d’orchestrer le build d’un projet.
Lighthouse propose une catégorie complète de règles permettant d’auditer la performance d’une application.
Le projet Web Vitals (https://web.dev/vitals/), initié par Google, permet de visualiser, via une librairie JavaScript ou une extension Chrome, les métriques importantes sur le temps de chargement d’une application. Nous pouvons par exemple récupérer le Largest Contentful Paint, donnée permettant de calculer le temps de chargement de notre application. Pour cela, nous devons installer et importer le module web-vitals et appeler la méthode getLCP, comme suit. Une fois la métrique récupérée, nous sommes libre d’implémenter le traitement que nous souhaitons (affichage dans la console, envoi dans le système de monitoring...).

import { getLCP } from ‘web-viyals' ; 
 
getLCP(metric => { 
     console.log(metric) ; 
}) ;

Le site https://web.dev est une source d’informations très intéressantes concernant la création d’applications...

Outils vus dans le chapitre HTTP/2

nghttp2d et nghttp permettent de définir un serveur ou un client HTTP/2.
simplehttp2server est un outil comparable à SimpleHttpServer, mais pour la nouvelle version HTTP/2.
curl supporte également HTTP/2.
Le serveur Apache possède le module mod_http2.
Nginx met à disposition un module ngx_http_v2_module.
Pour déboguer les requêtes HTTP/2 envoyées, il existe des outils comme Wireshark ou une page dédiée dans Chrome accessible à l’URL chrome://net-internals
Pour vérifier la sécurité d’une configuration HTTP/1, il existe des sites, tels que https://ssllabs.com, qui permet de vérifier la configuration SSL, ou encore https://securityheaders.com, qui permet de vérifier les aspects sécurité des applications.

Outils vus dans le chapitre Notifications

Les DevTools de Chrome proposent, via l’onglet Application - Permissions, d’enregistrer toutes les notifications émises par une application afin de vérifier leur contenu.

Outils vus dans le chapitre Déploiement sur les stores

pwabuilder est un outil en ligne de commande permettant de générer les livrables pour les différentes plateformes.

Boîte à outils