J’ai expliqué dans mon article précédent, le concept de Progressive Web App (PWA). Voyons maintenant en détail ce dont vous avez besoin pour concevoir une Progressive Web App de qualité.
Commençons par passer en revue les éléments qui définissent une application : - Une icône située sur l’écran d’accueil de l’appareil et permettant d’accéder rapidement à l’application - Un splash screen permettant de charger des éléments en arrière-plan - Une expérience simple, immersive et sécurisée qui ne souffre pas de temps de chargement trop longs - Une expérience en ligne et hors ligne avec du contenu stocké en cache - Des notifications push - L’absence d’une barre de recherche dans un navigateur
Ces fonctionnalités sont nativement présentes dans votre navigateur. Vous pouvez dès maintenant vérifier sur votre navigateur les API HTML5 auxquelles vous avez accès.
Les étapes principales de la conception d’une Progressive Web App
Pour profiter de toutes ces API tout en respectant les contraintes du réseau mobile, nous devons en principe :
- Définir et concevoir une interface système (app shell)
- Optimiser le chargement du contenu en gérant le cache par l’intermédiaire de service workers
- Définir un manifeste d’application pour perfectionner l’expérience applicative
- Proposer une navigation sécurisée à l’utilisateur
Séparez le squelette d’interface de l’application et les données pour vous concentrer sur la vitesse. Illustration Google. Image source
L’app shell contient les composants HTML, CSS et basiques de votre application permettant d’afficher l’interface utillisateur basique de la Progressive Web App. Il sépare complètement l’UI et les données de l’application pour se concentrer sur la vitesse du chargement initial. Lorsque l’app shell est défini et chargé en tant que première couche de l’application, les service workers font leur entrée.
Les service workers sont des scripts basés sur des promesses vous permettant de réagir à des événements et de contrôler le traitement des requêtes du réseau. Ils sont indépendants de votre application et sont souvent appelés proxys. Ces scripts mettent votre app shell en cache, restent indépendants de l’état du réseau et sont également présents pour gérer la mise à jour du contenu en arrière-plan et la mise en cache du contenu. Lorsqu’il est hors ligne, l’utilisateur parcourt les données en cache pour récupérer les dernières données envoyées par le serveur tout en attendant le retour de la connexion. Et la cerise sur le gâteau, c’est qu’ils gèrent également les notifications push.
La prochaine étape est de définir le manifeste de votre application pour contrôler la façon dont vous entrez en contact avec vos utilisateurs. Le manifeste est un fichier JSON dans lequel vous définissez l’icône et le nom de votre application pour l’écran d’accueil de l’utilisateur, le splash screen affiché lors du téléchargement ou de la récupération des ressources en cache, une couleur et un thème. Vous pouvez également spécifier l’orientation initiale de la page et supprimer la barre de recherche du navigateur pour améliorer l’expérience d’utilisation de l’application.
Votre application web est presque prête. L’une des dernières étapes est de vous assurer que votre PWA est sécurisée pour vos utilisateurs grâce à un accès via HTTPS. Et voilà ! Vous avez désormais les clés pour créer une application de qualité, sécurisée, indépendante d’une connexion, toujours à jour et incroyable.
C’est le moment de passer au code ! J’ai rassemblé les liens (en anglais) les plus utiles pour vous permettre de créer votre propre PWA.
Ressources utiles pour la création de votre propre PWA
Kits de démarrage
Your First Progressive Web App
Beginners guide to Progressive Web Apps
What web can do today?
https://pwa.rocks/
App Shell, AMP & notifications push
The App Shell Model
Accelerated Mobile Pages (AMP)
Web Push Notifications: Timely, Relevant, and Precise
Services Workers & HTTPS
https://serviceworke.rs/
Service Workers: an Introduction
Service Workers recipes
Why HTTPS
Preventing Mixed Content
Outils, test et débogage
Audit Web Apps with Lighthouse
Debug Progressive Web Apps
Progressive Web App Checklist
Progressive Web App Summit 2016 videos
Amusez-vous bien et partagez-nous vos expériences avec les PWA sur Twitter !