Progressive Web App

01/2022 par Gildas P. - Playing with pixels !
Version 1.0

C'est quoi une Progressive Web App ?

Une PWA c'est un site web qu'on installe comme une vraie application (sur mobile par ex).

Avec pas mal d'avantages :

  • Une icône d'application comme pour une application du store
  • Un affichage plein écran, sans barre de navigation
  • La possibilité de consulter la web-app hors-ligne, sans connexion internet
  • La classe, mon site est devenu une application mobile !
  • Compatible iOS et Android, sans trop d'effort

Pour transformer un site web en "Progressive Web App" il faut :

  • une meta viewport dans le header html (recommandée dans tous les cas pour un site responsive)
  • une connexion https avec un certificat SSL
  • un "manifest" json qui décrit "l'application"
  • quelques icônes PNG
  • un worker Javascript...

Il va falloir quelques icônes à différentes résolutions...

Idéalement 512x512, 384x384, 256x256, 192x192, en PNG de préférence.

En réalité j'ai vu récemment qu'il suffit d'une icône 512x512, et votre mobile s'occupe de la redimentionner si besoin.

Le fichier "manifeste"

Le fichier "manifest.json" ressemble à ça, sous réserve que vous mettiez les icônes dans un dossier pwa-icons/ et le fichier manifest.json à la racine du site (sinon il faut changer les chemins indiqués) :

{
    "name": "PWA Test",
    "short_name": "PWA Test",
    "description": "Une webapp pour tester.",
    "display": "fullscreen",
    "orientation": "portrait",
    "scope": "./",
    "start_url": "./index.html",
    "theme_color": "#2196f3",
    "background_color": "#2196f3",
    "icons": [
        {
            "src": "./pwa-icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
			
  • short_name est important, c'est le nom qui apparait sur le bureau sous l'icône de l'application
  • description est tout à fait optionnelle
  • display peut prendre d'autres valeurs, mais si on installe un site web c'est bien pour l'avoir en plein écran...
  • orientation peut aussi avoir la valeur "landscape"
  • theme_color définit la couleur de l'éventuelle barre d'outils système (qui dépend de l'os)
  • background-color c'est la couleur de fond de la page de démarrage de l'application générée par l'os (avec l'icône et le titre indiqués)

Si vous avez d'autres icônes à d'autres formats il faut agrandit la section "icons" :

{
	...
    "icons": [
        {
            "src": "./pwa-icons/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./pwa-icons/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "./pwa-icons/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "./pwa-icons/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}
			


Il faut maintenant déclarer le manifeste dans le header html :

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

Le manifeste est donc placé à la racine du site...
Si vous le déplacez il faudra indiquer le bon chemin vers le fichier.

Le "worker" JS

C'est un script js qui va tourner en fond, pour piloter l'app de manière avancée; pour un site simple ça ne va pas servir.

Mais comme c'est obligatoire pour pouvoir installer notre web-app, j'ai préparé les 2 fichiers minimum requis, que vous n'aurez ni besoin de lire ni de modifier.

Il faut juste déclarer ceci dans le header html :

<script type="text/javascript" src="pwa-script.js"></script>

(Le 2ème fichier js est appelé tacitement par le système)

 

Concrètement, voici un zip avec tout ce qu'il vous faut

Incluant

  • le manifeste json (à personnaliser par vos soins)
  • le dossier d'icônes (à remplacer par les vôtres)
  • les fichiers javascript requis (pas besoin de les modifier)

Tout ça doit être copié à la racine du site concerné.

Il vous faudra juste ajouter à votre header html les 2 lignes suivantes :

<link rel="manifest" href="manifest.json">
<script type="text/javascript" src="pwa-script.js">
</script>

Job done !

Tester son manifeste

Pour que ça fonctionne il va falloir un connexion https, il faut donc mettre vos fichiers sur un serveur qui dispose d'une certification SSL.

Firefox et Chrome proposent un outil d'inspection du manifeste dans les outils de développeur (F12).
Ca se passe dans l'onglet "Applications > Manifeste" et "Applications > Service Worker"...

Une fois vérifié que vous n'avez pas de message d'erreur, ouvrez la page sur mobile (ça marche aussi sous certaines conditions sur desktop), et voilàààà !

Installer l'application

Si tout va bien une info-barre système va s'afficher sur mobile, vous proposant d'installer l'application.

Mais d'après mes tests ça dépend un peu du navigateur utilisé... et si vous dites "non", l'info-barre ne s'affichera plus avant un moment.

Dans tous les cas vous devriez maintenant avoir la possibilité d'installer manuellement l'app depuis les options du navigateurs.

Et sur iOS ?

Sur iOS c'est plus compliqué, il n'y a aucune notification à l'écran, car Apple a décidé de privilégier la diffusion des PWA via l'app-store (oui, on peut mettre une pwa sur l'Apple Store !).

Du coup les gros sites corporate en PWA affichent un lien vers leur application sur l'Apple Store...
qui sert en fait à installer leur site internet.
Ce qui est marrant c'est qu'on retrouvera aussi dans l'application le lien vers l'app-store... puisque l'app est en fait le site internet.

Quoi qu'il en soit, pour installer votre PWA manuellement sur iOS :

- il faut ouvrir le site dans Safari

- cliquer sur le bouton de partage (très peu instinctif)

- cliquer sur un truc du genre "Ajouter à l'écran d'accueil"

La webapp est alors installée comme sur Android, avec une vraie icône et tout.

Pas moyen de l'installer depuis Chrome ou Firefox (ou autres), il faut impérativement passer par Safari.

Le plus simple c'est donc de commencer avec un appareil Android pour vérifier que tout fonctionne bien !

Ajouter un bouton html-css pour proposer d'installer votre site

Parce que si on doit aller dans le menu du navigateur c'est pas très user-friendly... mais c'est plus compliqué qu'il y parait.

Le truc c'est qu'il va falloir afficher le bouton en questions seulement si l'app n'est pas déjà installée; il doit diparaître une fois l'application installée avec succès.
Et tout ça se passe en Javascript.

D'autres possibilités à creuser...

  • Déclarer les fichiers à enregistrer pour une utilisation hors-ligne
  • Utilisation du Local Storage pour stocker des données utilisateur (score, stats, etc)
  • Utiliser les fonctionnalités de partage (réseaux sociaux, etc) native sur mobile

Voici quelques liens pour creuser :