Création d'une Progressive Web App

Comprendre le fonctionnement d'un site web classique

Lorsque vous tapez un lien dans une page vous obtenez en retour la page complète.

https://fr.wikipedia.org/wiki/Trappes

Si vous allez sur une autre page sur le même site.

https://fr.wikipedia.org/wiki/Arrondissement_de_Versailles"

Vous obtenez une nouvelle page complète, on voit bien qu’il y a un blanc entre les deux chargements de page.

C’est le fonctionnement du web depuis les origines, c’est un peu simpliste car les pages avec des éléments en commun pourraient être réutilisées (par exemple la barre de liens sur la gauche) mais c’est ce qui a fait le succès du web depuis le début.

On peut facilement transformer un site web classique en PWA mais ce n’est pas très intéressant.

L’utilisateur rechargeant toutes les pages à chaque fois le temps d’accès sera le même que ce soit dans le navigateur ou dans une Progressive Web Apps.

Les PWA sont intéressantes si vous téléchargez le maximum d’information sur la première page et que vous stockez ces informations sur la machine du client (c’est la mise en cache des informations), le contenu des pages suivantes est simplement actualisé à partir de la première page. Pour arriver à ce résultat il est nécessaire d’utiliser le seul langage utilisable côté client : Javascript.

Quels sont les prérequis pour créer une Progressive Web Apps ?

Google n’impose aucune technologie pour développer une PWA. Par contre il est nécessaire (mais pas obligatoire) de satisfaire à une check-list éditée par Google.

Site is served over HTTPS

Ce qui signifie que toutes les pages de votre site doivent utiliser HTTPS. Ce n’est pas vraiment un problème car c’est généralement déjà le cas (Google le recommande pour des questions de sécurité) et ce n’est pas très difficile à implémenter. En plus aujourd’hui il existe des solutions totalement gratuites avec letsencrypt.org.

Pages are responsive on tablets & mobile devices

Les pages de votre site doivent s’adapter automatiquement à toutes les tailles d’écran. Là aussi c’est déjà le cas pour la majorité des sites web.

Metadata provided for Add to Home screen

Des informations supplémentaires doivent être fournies dans un fichier spécial. Rien de difficile. Les informations complémentaires permettent de définir l’icône qui va être placée sur le bureau ou l’écran de démarrage qui va s’afficher.

Exemple de fichier à placer à la racine de votre site web. Le fichier doit se nommer manifest.json


{
    "short_name": "Maps",
    "name": "Google Maps",
    "icons": 
    [
        {
            "src": "/images/icons-192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "/images/icons-512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": "/maps/?source=pwa",
    "background_color": "#3367D6",
    "display": "standalone",
    "scope": "/maps/",
    "theme_color": "#3367D6"
}

First load fast even on 3G

La première page doit se charger très vite. Ce n’est pas vraiment un point spécifique au PWA. Google veut que toutes les pages s’affichent vite et les clients aussi.

Site works cross-browser

Les PWA doivent fonctionner sur n’importe quel navigateur comme tous les sites web. Il faut noter que contrairement aux applications Android un utilisateur peut télécharger plusieurs PWA s’ils utilisent plusieurs navigateurs. Les PWA sont stockées dans un répertoire propre à chaque navigateur.

Page transitions don't feel like they block on the network

Quand vous passez d’une page à l’autre il ne faut pas rester bloqué sur une page blanche pendant quelques secondes, il faut afficher du contenu. Souvent les concepteurs affichent un semblant de page grisé pour indiquer à l’utilisateur que la page va arriver.

Si vous n’avez pas une connexion trop rapide vous pouvez voir rapidement les pages grisées que Google affiche sur You Tube en changeant de vidéo.

Each page has a URL

Chaque page a un lien, c’est normalement toujours le cas sur un site web classique mais si vous utilisez beaucoup Javascript pour mettre à jour le contenu de votre site ce n’est pas toujours le cas. Il y a de nombreuses bibliothèques pour résoudre ce problème. Les gens sont souvent très décus si le bouton « retour » ne les emmène pas à la dernière page qu'ils ont visité mais à la page d’accueil.

app URLs load while offline

Load various pages in the PWA with an airplane mode enabled. Ensure the app presents some content even when offline.

C’est certainement le point le plus dur à réaliser. Votre site doit afficher du contenu même si vous n’avez pas de réseau.

Regardons ce que fait le PWA du site l’Equipe si on coupe le réseau.

La PWA du site l'Equipe sans réseau

L’application n’affiche que des blocs grisés. On respecte la check-list puisqu'effectivement on renvoie du contenu pour chaque page même si ce contenu n’a aucune utilité pour l’utilisateur final.

Les concepteurs des applications doivent déterminer le contenu qu’ils veulent présenter en étant hors connexion. Il est bien sûr illusoire pour un site d’information comme l’Equipe de stocker chez le client des informations en avance au cas où celui-ci irait les consulter en étant hors connexion. Il y a beaucoup trop d’informations.

Quelle solution peut-on mettre en place ?

Google propose de mettre en place un « service worker », un service worker est un logiciel qui stocke les pages que vous avez déjà visité sur votre machine et qui est capable de les afficher même si vous n’êtes pas connecté.

C’est intéressant mais c’est une option très limitée, l’utilisateur ne peut consulter que les pages qu’il a déjà vu lorsqu’il est hors connexion. Un autre point à noter le service worker stocke les pages ce qui entraîne une ouverture beaucoup plus de votre application après la première ouverture.

Ma première Progressive Web App avec React

Pour réaliser ce tutoriel il faut installer sur votre PC

Créer un répertoire sur votre disque dur. Nommez-le pwa.

Lancer Visual Studio Code.

File → Open Folder → Ouvrez le répertoire pwa que vous venez de créer.

Aller dans View → Terminal

Une fenêtre de commande s’ouvre dans le répertoire pwa.

Taper la commande dans la fenêtre de commande : npx create-react-app firstpwa

Attendez quelques secondes que toutes les librairies soient téléchargées.

A la fin du téléchargement recommencez File → Open Folder pour descendre dans le répertoire qui vient d’être crée firstpwa.

Modification du ficher App.js

React crée la première page de votre site automatiquement avec des données génériques.

On peut modifier ce comportement pour ne pas avoir le texte de présentation de React.

Modifier le fichier App.js comme ci-dessus

import React from 'react';
import './App.css';

function App() {

    return (

            <div>

        <h1>Ma Progressive Web Application</h1>
        < src="https://www.francedigitale.com/multimedia/201909021738148124_big.jpg" alt="les serres d'Auteuil"></img>
            </div>

            );

    }

export default App;

L’image ne sert à rien (juste à faire joli).

Modification du fichier manifest.json

Ce fichier sert à indiquer le nom de l’application, les icônes…

Ce fichier existe déjà, il a été créé automatiquement. Il faut bien sûr l’adapter pour votre site. Dans notre cas nous allons simplement modifier le nom de l'application.

Modifier le fichier manifest.json dans le répertoire public comme ci-dessous


"short_name": "React App",
"name": "Create React App Sample",

en

"short_name": "PWA 1",
"name": "First PWA",

Vous pouvez aussi modifier les icônes sinon vous allez rester avec les icônes de React (ce qui va être notre cas).

Mise en place du Service Worker

Dans le fichier index.js

Changer la ligne serviceWorker.unregister(); en serviceWorker.register();

Dans le terminal lancer la commande

npm run build

Dans le répertoire build on trouve désormais tous les fichiers nécessaires pour que l’application fonctionne.

Mise en place du serveur web

Vous pouvez choisir n’importe quel serveur web (Apache,IIS…). Pour que le service worker fonctionne vous devez être en HTTPS. La mise en place d’un certificat local pour faire des tests en https://localhost n’est pas détaillée dans ce tutoriel car elle sort un peu du contexte.

A la fin de la configuration de votre serveur web vous devez copier tous les fichiers qui sont dans le répertoire build dans un répertoire connu par votre serveur web et vous connecter avec HTTPS.

Il ne reste plus qu’à lancer le site web. Dans mon cas je le lance en https://localhost/npa.

Le site web de l'application

>

ma première progressive web app

On voit clairement le plus (+) qui indique que l’on peut installer l’application. Si on clique sur le plus on va ajouter l’icône sur le bureau avec le nom de l’application (First PWA).

Après l'installation de la PWA, on peut la lancer pour voir le résultat.

installation de la première progressive web app

La différence ne saute pas aux yeux, il n’y a plus la barre d’URL.

Le Service Worker fonctionne-t-il ?

Est-ce-que les fichiers sont mis en cache par le Service Worker ?

Le seul moyen de vérifier le fonctionnement du Service Worker est d’utiliser les outils de développement de Google Chrome.

Ouvrir le site avec Google Chrome. Taper sur F12 pour ouvrir les outils de développement. Aller sur l’onglet Application puis cliquer sur Service Worker.

le service worker dans Google Chrome

Vous voyez que le Service Worker est actif pour le site.

Vous avez un autre sous-menu un peu plus bas (Cache Storage) qui vous indique plus précisément les fichiers qui ont été mis en cache.

le cache du service worker dans Google Chrome

Faites attention si vous travaillez avec un Service Worker les modifications sur vos fichiers peuvent ne pas être prises en compte car Chrome prend la version en cache, il faut à chaque fois supprimer les données (Clear Storage dans Chrome).

Le travail est-il terminé ?

Nous pouvons vérifier que notre application est conforme à ce qui est attendu par la check-list. Les outils de développement contiennent un audit automatique (onglet audit). Décochez tout ce qui ne concerne pas PWA et lancer l’audit.

audit du PWA dans Google Chrome

Le test est très satisfaisant. Les points les plus importants sont tous verts. Bravo ! Beau travail.

Conclusion

PWA or not PWA that is the question !

Il faut savoir raison garder, les Progressive Web Applications sont des technologies très récentes, Google a commencé à les introduire en 2015. Apple est beaucoup plus en retard.

Les points positifs

Les points négatifs

PWA rejoint les autres technologies déjà disponibles sur le marché déjà encombré de la création d’applications mobiles (Flutter, Xamarin, React Native, Ionic…).

C’est sûrement la solution la plus simple et la plus prometteuse. Tous les sites importants s'y intéressent et créent leur PWA (Twitter, Instagram, Pinterest ...). Vous pouvez les retrouver et les installer grâce à cet article. Il ne reste plus qu'à vous lancer.