`Les Dieux du ${Code}`

Les Progressives Web Apps (PWA) sont très à la mode depuis quelque temps et sont maintenant supportées par tous les navigateurs modernes. On va voir comment faire pour faire une PWA installable. 

Applications Web vs Mobile 

Les applications Web et Mobile sont assez différentes avec chacune leurs avantages. 

Une application Web est

• Facile à trouver. Les utilisateurs cherchent en priorité sur google qui référencent des sites web et pas des applications mobiles 
• Simple à déployer. 1 déploiement et tous les utilisateurs ont une version à jour 
• Partageable, grâce aux liens Hypertext. 

Une application mobile est  

• Installable. L’utilisateur peut plus facilement retourner sur l’application 
• Marche hors ligne. 
• A accès aux périphériques de l’appareil (caméra, GPS, …) 
• Peut fonctionner en arrière-plan 
• Peut pousser des notifications à l’utilisateur.

Les PWA viennent de la réalisation que tout ce que peut faire une appli mobile, une application web peut maintenant le faire également. Une PWA c’est une application Web qui se fait passer pour une application mobile et qui possède donc les avantages des deux mondes.

Web Manifest 

Il y a plusieurs technologies qui entre en jeu pour faire un PWA, mais concentrons-nous sur le Web Manifest qui permet de rendre une application Web installable. 

Il est possible depuis longtemps d’ajouter un site web à l’écran d’accueil d’un appareil mobile comme si c’était une application native. L’iphone 1 le permettait déjà avec des balises spécifiques, puis Microsoft introduit ses propres balises pour Windows 8/Windows phone. 

Le W3C a ensuite standardisé le Web App Manifest qui est maintenant supporté par la plupart des navigateurs. Le navigateur va utiliser les informations du Web Manifest pour permettre à l’utilisateur d’ajouter l’application web sur son écran d’accueil pour pour afficher cette application comme si c’était une application native.

Ce manifest est un fichier json permettant de customiser comment le navigateur va présenter l’application à l’utilisateur.

{
  "short_name": "Les Dieux Du Code",
  "name": "Les Dieux Du Code",
  "icons": [
    {
      "src": "/images/favicon-32x32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "/images/logo-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/logo-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "orientation": "portrait",
  "display": "standalone",
  "theme_color": "#44b6c6",
  "background_color": "#f1f1f1",
  "scope": "/"
} 

short_name : le nom de l’application une fois installée 

name : le nom de l’application affichée dans le bandeau d’installation. 

icons : Liste des images à par le navigateur pour générer une icône qui sera mis sur l’écran d’accueil de l’utilisateur une fois l’application installée et également pour générer un splash screen affiché au lancement de l’application. 

Il est conseillé de déclarer au moins des images de tailles 32x32 et 512x512.

theme_color : la couleur utilisée dans la barre d’entête de l’application.

background_color : la couleur utilisée pour l’arrière-plan du splash screen de l’application. 

start_url : l’url que le navigateur lance au lancement de l’application. On peut mettre une url différente de celle de notre site avec par exemple une query spécifique qui nous permettrait de logger le nombre de lancement de l’application. 

display : indique comment le navigateur doit afficher l’application. La valeur standalone fait que l’application sera affichée comme une application native. Elle sera dans une fenêtre séparée du navigateur, et les éléments d’interfaces du navigateur (comme la barre d’adresse) ne seront pas visible. La valeur browser fait que lorsque l'application est lancée elle sera affichée dans un nouvel onglet du navigateur. 

scope : indique quelles url doivent être vue dans l’application. Lorsqu’un lien est ouvert vers une url contenue dans le scope, le navigateur ouvrira cette url dans la PWA à la place d’ouvrir un nouvel onglet. Et si l’application contient un lien vers une url hors du scope, le lien est ouvert dans le navigateur. Ce mécanisme se nomme le link capturing.

Utilisation de propriétés du manifest pour la génération du splashscreen d’un PWA 

Une fois le manifest rempli, il suffit de l’inclure dans le HTML de notre page :  

<link rel="manifest" href="/manifest.json"> 

Installation 

Ce n’est pas le site web qui propose à l’utilisateur d’installer l’application mais c’est le navigateur qui permet à l’utilisateur de le faire si les conditions suivantes sont remplies : 

• Présence d’un manifest ayant les champs obligatoires remplis 
• L’application déclare un service worker 
• La start_url répond même hors-ligne grâce au service worker 
• Utilise le HTTPS (condition requise pour avoir un service worker de toute façon) 

Sous Firefox, Opera, Edge et Safari quand ces conditions sont remplies, le navigateur propose un bouton ou une option dans les menus pour que l’utilisateur ajoute l’application à son écran d’accueil. 

Il n’y a pas d’API permettant au développeur de proposer cette installation directement, elle ne peut être déclenchée que par l’utilisateur. 

Sous Firefox, l’icone à coté de la barre d’adresse permet d’ajouter à l’écran d’accueil

Une fois installée, la PWA a un raccourci sur l’écran d’accueil et se lance comme une application différente du navigateur.

Sous Chrome 

Sous Chrome (et le navigateur Samsung basé aussi sur Chromium) c’est un peu différent. Il n’y a pas de bouton dans le navigateur pour installer une PWA. A la place si l’utilisateur à suffisamment interagis avec le site, le navigateur va déclencher un évènement que le site web peut utiliser pour lancer l’installation. 

La définition de suffisamment interagis varie dans le temps et en fonction des versions du navigateur. Actuellement sur chrome 68, il faut que l’utilisateur ai passé au moins 30 secondes sur notre site web pour que l’installation soit possible. Dans des anciennes versions il fallait que l’utilisateur soit venu au moins 2 fois sur le site. 

Si l’évènement n’est pas intercepté, Chrome affichera une bannière proposant l’installation de l’application. Mais il est plus intéressant d’intercepter l’évènement ce qui nous permet de déclencher la demande d’installation quand on pense que l’utilisateur a eu une interaction significative avec notre application et qu’il est plus susceptible d’installer l’application. Par exemple on peut vouloir attendre que l’utilisateur ai créé un compte ou se soit loggé avant de lui proposer d’installer l’application.

Le but est également d’éviter que l’utilisateur soit spammé de demande dès qu’il arrive sur un site. (Comme c’est actuellement le cas sur certains sites où on se fait un peu envahir entre le bandeau RGPD, l’utilisation des cookies, la demande d’autorisation de notifications, …) 

Dans l’exemple suivant quand le navigateur déclenche l’évènement, on affiche un bouton d’installation :

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
	e.preventDefault();
	//On récupère l’évènement pour l'utiliser plus tard
	deferredPrompt = e;

	//On affiche le bouton d'installation
	document.getElementByAdd(“btnInstall”).style.display = “block”;
});

document.getElementByAdd(“btnInstall”).addEventListener('click', (e) => {
	document.getElementByAdd(“btnInstall”).style.display = 'none';
	// Affiche la demande d’installation 
	deferredPrompt.prompt();

	deferredPrompt.userChoice.then((choiceResult) => {
		if (choiceResult.outcome === 'accepted') {
			console.log('Installation réussie');
		} else {
			console.log('Installation refusée');
		}
		deferredPrompt = null;
	});
});

En Desktop 

Quand le concept de PWA a été introduit il y a quelques années la cible était le mobile. Mais les PWA commencent à arriver sur ordinateur.  

En activant certain flag dans Chrome 68 il est possible d’installer une PWA. Il est fort probable que ces flags soient activés par défaut dans une future version de chrome. 

Flag à activer :

chrome://flags/#enable-desktop-pwas 
chrome://flags/#enable-desktop-pwas-link-capturing 
chrome://flags/#enable-app-banners 
chrome://flags/#enable-experimental-app-banners 

Le Windows store référence des PWA et permet de les installer comme s’il s’agissait d’une application UWP classique. Une PWA installée comme cela a en plus accès aux API javascript UWP, peut être lancé par Cortana par commande vocale, et n’a pas de limite de stockage pour son cache ou indexedDb. (https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps )

Quelques exemples de PWA :

• Google Maps
• Uber
• Lyft
• Twitter Lite
• Instagram
• Pinterest
• 2048
• PWA Rocks