Web App Manifest

Introduction

La spécification Web App Manifest propose, via l’ajout d’un fichier bien particulier, d’ajouter des métadonnées à une application. Ce fichier se nomme Manifest. Ces données seront ensuite utilisées par les navigateurs Internet dans différentes situations que nous allons décrire dans ce chapitre. En effet, quand ils détecteront ce fichier, ils pourront activer certaines fonctionnalités intéressantes pour l’application. Nous pouvons par exemple ajouter un raccourci vers notre application sur l’écran d’accueil du téléphone des utilisateurs.

Voici un aperçu de ce fichier qui utilise le format JSON.

{ 
  "short_name": "PWA", 
  "name": "Progressive Web Apps", 
  "icons": [ 
    { 
     "src": "/images/icons-192.png", 
     "type": "image/png", 
     "sizes": "192x192" 
    }, 
    { 
     "src": "/images/icons-512.png", 
     "type": "image/png", 
     "sizes":...

Contenu à définir

Nous allons à présent expliquer les différentes propriétés que nous pouvons définir dans ce fichier. Nous ne sommes pas obligés de définir toutes ces propriétés pour commencer à bénéficier des avantages de ce fichier. Certaines de ces propriétés sont optionnelles.  Les navigateurs sont susceptibles d’ajouter dans le futur de nouvelles propriétés afin d’étendre le champ d’action de ce fichier. 

{ 
  "short_name": "PWA", 
  "name": "Progressive Web Apps" 
} 

{ 
  "start_url": "/pwa" 
} 

Pour des besoins de statistiques, il est possible d’ajouter un query parameter à l’URL afin de déterminer la provenance des utilisateurs dans les outils d’analytics. 

{ 
  "start_url": "/pwa/?from=pwa" 
} 

{ 
  "icons": [ 
   { 
    "src": "/images/icons-192.png", 
    "type": "image/png", 
    "sizes": "192x192" 
   }, 
   { 
    "src": "/images/icons-512.png", 
    "type": "image/png", 
    "sizes":...

Add to Home Screen

Les Progressive Web Apps proposent des solutions pour inviter les utilisateurs à ajouter un raccourci vers l’application sur leur écran d’accueil afin d’en faciliter l’accès. Cette fonctionnalité est appelée Add to Home Screen ou A2HS.

Sur le navigateur Samsung Internet, cette fonctionnalité a été renommée en Ambient Badging.

En fonction de certains critères que nous présenterons par la suite, le navigateur affichera un bandeau au-dessus de l’application (le design peut être différent en fonction du navigateur), proposant d’installer l’application sur l’écran d’accueil.

Ci-après, un exemple d’invitation à installer l’application pour le navigateur Firefox et le site web https://airhorner.com, puis pour Chrome et le site https://web.dev.

Le navigateur affiche le nom de l’application ainsi qu’une icône. Il utilise la propriété name et une icône définie dans le fichier Manifest.

Si nous prenons l’exemple du site https://devfest.gdglille.org/, nous avons un fichier Manifest correspondant au code suivant (légèrement simplifié) :

{ 
  "manifest_version": "2", 
  "name": "Devfest Lille 2020", 
  "short_name": "devfestlille", ...

Custom Install Banner

Afin d’éviter d’inviter l’utilisateur à installer l’application dès sa première visite, ou de laisser le navigateur détecter le bon moment pour afficher cette invitation à notre place, nous pouvons désactiver le fonctionnement par défaut et l’intégrer dans le design de notre site. Malheureusement, cette possibilité n’est disponible que sur les navigateurs basés sur Chromium (Chrome, Samsung Internet, Microsoft Edge, Brave...).

Pour commencer, nous écoutons l’événement beforeinstallprompt, qui est automatiquement émis par le navigateur quand les critères décrits précédemment sont respectés.

window.addEventListener(‘beforeinstallprompt', e => { 
  ... 
}) ; 

Pour désactiver le fonctionnement normal de cet événement, qui a pour but d’afficher le bandeau natif, nous appelons la méthode preventDefault sur l’événement qui vient d’être émis. Nous utilisons cette méthode dès que nous devons désactiver l’implémentation native d’un événement (click, focus…). Elle n’est donc pas réservée au cas d’utilisation présenté ici.

window.addEventListener(‘beforeinstallprompt'...

Interaction CSS et JavaScript

Nous pouvons également interagir avec certaines informations définies dans le fichier Manifest depuis une feuille de style. Nous pouvons en effet utiliser le mot-clé display-mode dans une media query pour appliquer une déclaration CSS spécifique en fonction de l’attribut display du fichier Manifest.

Dans l’exemple ci-après, nous appliquons du CSS à notre application si son attribut display-mode est égal à fullscreen.

@media all and (display-mode: fullscreen) { 
  body { 
    background : red ; 
  } 
} 

Nous pouvons également récupérer cette même information en JavaScript en utilisation la méthode matchMedia.

Pour cela, nous devons tout d’abord créer un objet représentant le média que nous voulons tester. Nous souhaitons savoir si notre application est lancée avec la propriété display égale à fullscreen.

const fullscreen = matchMedia(‘(display-mode : fullscreen)') ; 

Grâce à l’objet retourné, nous pouvons savoir si le média est actuellement actif en utilisant la propriété matches.

cont fullscreen = matchMedia(‘(display-mode : fullscreen)') ; 
 
if(fullscreen.matches) { 
  // Faire quelque chose...

Compatibilité navigateurs

Le tableau suivant récapitule le support par les navigateurs du fichier Manifest. 

Pour proposer une expérience similaire pour les navigateurs qui ne supportent pas cette API, certains développements supplémentaires peuvent être mis en place. Pour faciliter cette tâche, il existe la librairie PWACompat : https://github.com/GoogleChromeLabs/pwacompat

Une fois ajoutée dans l’application et téléchargée par le navigateur, cette librairie a en charge de lire le fichier Manifest et d’ajouter un ensemble de balises dans la partie head seulement pour certains navigateurs.

Pour ajouter cette librairie, il faut ajouter une balise script obligatoirement après l’import du fichier Manifest.

<link rel="manifest" href="manifest.webmanifest"> 
 
<script async  
src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.9/pwacompat.min.js" 
  integrity="sha384-VcI6S+HIsE80FVM1jgbd6WDFhzKYA0PecD/
LcIyMQpT4fMJdijBh0I7Iblaacawc" 
  crossorigin="anonymous"></script> 

Et le tour est joué. PWACompat fera ensuite le nécessaire pour ajouter les éléments manquants dans l’application. Si nous prenons l’exemple de l’application airhonner.com, voici les éléments qui ont été ajoutés par PWACompat dans...

Application fil rouge

Il est à présent temps d’améliorer l’application fil rouge. Nous allons tout d’abord ajouter au fichier index.html une balise link pointant vers le fichier Manifest que nous allons créer. Cette balise link doit être insérée dans la balise head de nos pages.

<link rel="manifest" href="manifest.webmanifest">  

Pour rappel, ce lien doit être ajouté sur toutes nos pages HTML. Si nous développons une Single Page Application, nous devons le définir dans le seul fichier index.html présent dans l’application.

Pour générer le fichier Manifest, nous utilisons le site https://app-manifest.firebaseapp.com/. Ce site permet, depuis une interface graphique, de définir toutes les propriétés que nous venons de présenter. Il permet également de charger une image qui sera utilisée comme icône et d’en générer des versions de tailles différentes.

Une fois toutes les informations indiquées, le site nous propose de télécharger une archive contenant le fichier Manifest, ainsi que les images générées. Il suffit d’extraire de cette archive tous les fichiers et de les placer à la racine du projet.

Voici le contenu du fichier manifest.json généré. Nous vous conseillons de le renommer en manifest.webmanifest afin d’être conforme au standard.

{ 
  "name": "Github Client", 
  "short_name": "github", 
  "theme_color": "#187795", 
  "background_color": "#fff", 
  "display": "minimal-ui", 
  "orientation": "portrait", 
  "Scope":...