Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Progressive Web App
  3. Web App Manifest
Extrait - Progressive Web App Utilisez les standards du web pour développer vos applications mobiles
Extraits du livre
Progressive Web App Utilisez les standards du web pour développer vos applications mobiles Revenir à la page d'achat du livre

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 et name : propriétés permettant de définir respectivement une version courte et une version longue du nom de l’application.

{ 
  "short_name": "PWA", 
  "name": "Progressive Web Apps" 
} 
  • start_url : propriété permettant de définir la page affichée quand l’utilisateur ouvre l’application depuis le raccourci sur l’écran d’accueil du téléphone.

{ 
  "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 : jeu d’icônes notamment utilisées lorsque l’application est installée sur l’écran d’accueil. Nous pouvons définir différentes tailles. Le navigateur se charge de choisir la bonne image en fonction de l’emplacement où il souhaite l’utiliser. Il est conseillé de proposer au moins deux icônes aux dimensions 192 x 192 et 512 x 512.

{ 
  "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.

images/04El02.png
images/04El03.png

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", ...

Critères pour avoir une application installable

Plusieurs critères, souvent différents selon les navigateurs du marché, doivent être respectés afin de rendre une application installable :

  • Elle ne doit pas déjà être installée sur l’appareil.

  • Elle doit être visitée un minimum par l’utilisateur.

  • Elle doit avoir un fichier Manifest valide avec les propriétés name ou short_name, icons, start_url et display définies.

  • Elle doit être servie via HTTPS.

  • Elle doit importer un Service Worker, contenant un listener pour l’événement fetch (voir le chapitre Service Worker).

Sans ces critères, l’invitation affichée par le navigateur ne sera jamais instanciée et rendue visible sur l’écran de l’utilisateur.

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. 

images/04El06.png

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":...