Contenu
- L'ascension des PWA
- Les PWA en action aujourd'hui
- Installation
- Lancement hors ligne et immédiat
- Expérience de première classe
- Boutiques d'applications
- Intégration de la plateforme
- Défis design et UX
- L'année des PWA
Tout comme la conception Web réactive a comblé le fossé entre les sites de bureau et les sites mobiles il y a quelques années, les techniques d'application Web progressives réduisent actuellement l'écart entre le Web et le monde des applications. Avec la convergence rapide des expériences utilisateur des applications de bureau vers les applications mobiles, il semble qu'un Internet beaucoup plus élégant et plus efficace évolue - bien que ce ne soit pas inévitablement sans quelques changements importants dans son code génétique sous-jacent.
- Comment créer une application Web progressive
De toute évidence, il y a des pressions sélectives importantes qui expliquent cela. Tout d'abord, créer des applications natives pour chaque niche n'est pas nécessairement une utilisation efficace des ressources: les utilisateurs se retrouvent avec des centaines de grandes applications gaspillant de la bande passante et un espace disque précieux et les entreprises dépensent beaucoup d'argent pour créer des applications uniquement pour qu'elles soient abandonnées. après leurs premières versions. Et la plupart de ces applications sont uniquement pilotées par du contenu Web: des informations provenant de services Web ou d'un système de gestion de contenu.
La définition d'une application Web progressive n'est pas concrète. Une PWA est juste une application Web qui utilise plusieurs nouvelles API et capacités de la plate-forme Web en utilisant une amélioration progressive pour offrir une expérience semblable à une application sur chaque plate-forme avec la même base de code. Il s’agit davantage d’un ensemble de bonnes pratiques et d’utilisation d’API qui crée une excellente expérience semblable à une application pour vos utilisateurs. Ce n’est donc pas comme si vous aviez ou n’aviez pas de PWA; c'est plus comme si votre site était plus ou moins PWA.
Êtes-vous sur le point de commencer à créer un nouveau site? Essayez d'utiliser un créateur de site Web. Et assurez-vous également d'obtenir le soutien dont vous avez besoin d'un service d'hébergement Web décent. Ou pour quelque chose de légèrement différent, consultez notre guide du meilleur stockage cloud.
L'ascension des PWA
Alors que le nom PWA a été inventé en 2015 dans l'article Échapper aux onglets sans perdre notre âme d'Alex Russell travaillant chez Google pour l'équipe Chrome, leur voyage n'a pas vraiment commencé là. Nous avions l'habitude d'avoir des applications HTML (HTA), qui ont été créées par Microsoft en 1999, ainsi que de nombreuses autres plates-formes d'applications Web de Nokia, BlackBerry et d'autres sociétés. Puis, en 2007, Steve Jobs a présenté ce qui était à l'époque le seul moyen de créer des applications pour l'iPhone d'origine: les PWA, bien qu'avec un nom différent. Chrome est parti de là, a amélioré les API quelques années plus tard et a inventé le nom PWA.
Avec autant d'expériences infructueuses qui ont tenté d'apporter du contenu Web dans le monde des applications, pourquoi pensons-nous que cela fonctionnera maintenant? Et bien avant tout, c’est aux entreprises qui travaillent maintenant et qui font la promotion des technologies derrière les PWA, comme Microsoft, Google, Apple et Mozilla, pour n’en citer que quelques-unes. En outre, les performances de la plate-forme Web ont atteint un point où il n'y a aucune différence perçue lorsque vous comparez une PWA bien conçue avec une application native. Ces conditions n’ont jamais existé auparavant et c’est l’une des raisons pour lesquelles la communauté Web a décidé que le moment était venu pour les PWA.
Les PWA en action aujourd'hui
Aujourd'hui, les PWA sont entièrement fonctionnels et installables sur:
- Android avec la plupart des navigateurs, avec Chrome offrant la meilleure expérience
- iOS avec Safari
- Chromebooks
- Windows 10 à partir du Microsoft Store
- Téléphones fonctionnels avec KaiOS - un fork de Firefox OS - actuellement disponible pour des millions d'utilisateurs principalement en Inde
Le support sera également disponible pour macOS, Windows et Linux via Chrome plus tard cette année. Il est disponible dès aujourd'hui en tant qu'indicateur expérimental "Desktop PWA" si vous souhaitez l'essayer maintenant. L'installation sur Windows on Edge sans l'utilisation du magasin arrive également plus tard, bien qu'aucun délai spécifique ne soit défini.
Si vous relisez la liste, vous pouvez voir que chaque plate-forme a pris ou est sur le point de prendre en charge des PWA entièrement installables dans les mois suivants. Et comme un PWA n'est qu'un site Web avec des fonctionnalités en plus qui ne seront activées que sur les navigateurs compatibles, nous pouvons même dire qu'il est compatible avec tous les navigateurs à partir de ses fonctionnalités de base.
En outre, des PWA sont actuellement générés à partir de la plupart des CLI pour différents frameworks, y compris la CLI Angular 6+, React Create App, PWA Starter Kit de Polymer et Preact CLI. Enfin, l'équipe Ionic Framework a eu l'idée de Capacitor, un remplacement de Cordova open-source qui rend les PWA natifs possibles sur tous les magasins d'applications.
Installation
L'un des aspects critiques d'une PWA est l'installation de l'application. Ce processus se fait en deux étapes facultatives: le téléchargement et le stockage hors ligne des fichiers de l'application et l'installation de l'icône dans le système d'exploitation. Étant donné que les deux étapes sont facultatives, vous pouvez offrir une expérience hors ligne dans le navigateur ou vous pouvez proposer une icône sans installation hors ligne. Mais un vrai PWA doit inclure les deux: il doit être servi avec TLS sous HTTPS et l'utilisateur décidera s'il l'utilisera dans le navigateur ou dans sa propre icône installée.
Lancement hors ligne et immédiat
Le cerveau d'une PWA est le service worker, un fichier JavaScript installé sur l'appareil de l'utilisateur qui est chargé de télécharger les fichiers de l'application, de les stocker dans un cache et de les servir plus tard si nécessaire. Une fois le service worker installé, il agit comme un proxy réseau pour chaque ressource dont l'application Web a besoin: il peut décider de le récupérer sur le réseau ou de le livrer à partir du cache local, ce qui rend l'application disponible hors ligne et également disponible en seulement quelques millisecondes même si l'utilisateur a une connexion, émulant le lancement d'une application native.
Pour installer un service worker, votre document HTML devra inclure quelque chose comme:
if (’serviceWorker’ dans le navigateur) navigator.serviceWorker.register ("sw.js");
Cela installera le fichier "sw.js" sur les appareils des utilisateurs pour le dossier actuel dans le domaine actuel - un concept connu sous le nom de portée. Après son installation, les prochaines visites de toute URL dans son étendue seront gérées par ce technicien de service.
Supposons que nous ayons une PWA avec quatre fichiers: index.html, app.js, app.css et logo.png. La première chose à faire est d'installer ces fichiers dans le cache du fichier sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; soi. addEventListener ("install", event => {événement. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (ressources)));});
Ensuite, pour que la PWA soit toujours servie à partir du cache, nous devons écouter l'événement d'extraction dans le service worker et décider de la stratégie de cache à utiliser, comme le cache en premier avec l'extrait de code suivant.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). then (res => res);
Dans ce cas, chaque fois que l'utilisateur accède à la PWA (à la fois à partir d'un navigateur ou d'une icône installée), le moteur récupère les fichiers du cache. L’avantage des PWA par rapport aux applications natives est que les appareils n’ont pas besoin de télécharger à nouveau tous les fichiers en cas de modification, mais uniquement le fichier qui a changé avec un processus transparent. De plus, nous pouvons toujours télécharger des parties de l'application à la demande.
Mais le défi est de savoir comment savoir quels fichiers ont été mis à jour sur le serveur afin de pouvoir les remplacer dans le cache? Si vous ne souhaitez pas écrire un service worker de bas niveau pour gérer cela, vous pouvez utiliser la bibliothèque open-source Workbox, qui vous aidera à générer le service worker et le manifeste des ressources pour mettre à jour le package installé.
Sachez que les fichiers de votre PWA seront supprimés s'il y a une pression de stockage sur l'appareil, sauf si vous demandez un stockage persistant si disponible:
if ('stockage' dans le navigateur && 'persist' dans navigator.storage) navigator.storage.persist ();
Sur Chrome et la plupart des navigateurs Android, votre application ne peut pas utiliser plus de 5% de l'espace disponible. sur iOS, il est de 50 Mo (près de 50 Mo) par hôte uniquement; dans Edge, il est variable en fonction de la taille totale de la mémoire et dans le Windows Store, il est illimité.
Expérience de première classe
Nous avons le cerveau et maintenant il est temps pour le cœur: le manifeste de l'application Web. Le but de transformer un site Web en PWA n'est pas seulement de s'assurer qu'il est disponible rapidement ou hors ligne, mais aussi de lui permettre d'avoir sa propre icône dans le système d'exploitation et d'offrir une expérience entièrement autonome comme toute autre application installée.
Le manifeste est un fichier JSON qui définit les métadonnées de la PWA utilisée par un navigateur ou une boutique d'applications afin de définir le comportement de l'installation.
Le fichier définit plusieurs propriétés en tant que métadonnées pour votre PWA. Chaque système d'exploitation lira ces propriétés et fera de son mieux pour correspondre à l'expérience que vous préférez. Par exemple, Android lit "display: standalone" et crée une expérience d'application normale. Avec "display: minimal-ui", cela créera une expérience avec une URL visible et un certificat TLS - utile pour les applications sensibles à la sécurité. Avec «affichage: plein écran», il crée des applications entièrement immersives sans barre d'état ni bouton de retour visible. Un ensemble d'icônes et de couleurs définit l'apparence des écrans de démarrage ou des barres de titre pour la fenêtre de votre application.
Il existe des générateurs de manifestes, tels que Web App Manifest Generator ou PWA Builder, qui redimensionneront également l'icône pour vous dans différentes résolutions si vous en fournissez une haute résolution (minimum 512 pixels).
Lorsque le fichier manifeste est lié à votre document HTML, les utilisateurs pourront installer l'application en utilisant différentes techniques en fonction du navigateur, généralement appelées Ajouter à l'écran d'accueil, Installer ou simplement Ajouter. Si votre PWA est analysable par Bing, Microsoft l'ajoutera automatiquement au Microsoft Store afin que les utilisateurs de Windows 10 puissent l'installer à partir de là.
Sur certains systèmes d'exploitation, votre PWA aura la possibilité de capturer des liens. Cela signifie qu'une fois que l'utilisateur a installé l'application, toute URL dans le cadre de votre manifeste sera ouverte dans les limites de votre application et non dans le navigateur, qu'elle apparaisse dans le navigateur ou dans d'autres applications telles que WhatsApp, Facebook ou un e-mail.
Si vous passez les exigences PWA que nous définissons ici, certaines plates-formes proposeront un badging ambiant (une petite icône généralement dans la barre d'URL spécifiant que le Web est installable) ou une bannière d'application Web. Si vous préférez, vous pouvez également ajouter votre propre bouton d'installation personnalisé à l'aide de l'extrait de code suivant:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // affichera l'invite native d'installation})
Si le PWA est installé, l'événement "appinstalled" sera déclenché sur l'objet window afin que vous puissiez suivre les statistiques qui l'écoutent.
Boutiques d'applications
L'un des principaux avantages de l'installation à partir d'un navigateur est de pouvoir éviter le processus d'approbation de l'App Store ou de devoir payer pour être éditeur. Cela présente des avantages évidents, tels que la publication instantanée, la création d'applications privées pour les entreprises ou des applications qui ne devraient pas être acceptées dans les magasins.
Mais certaines entreprises veulent être dans le magasin. À ce jour, les seuls magasins acceptant officiellement les PWA sont le Windows Store et le kaiOS Store. Heureusement, avec des outils comme Capacitor (actuellement en Alpha) ou PWA Builder, nous pouvons également créer et signer des packages natifs pour d'autres plates-formes.
Certaines PWA sont déjà publiées dans le Google Play Store, telles que Twitter Lite et Google Maps Go, actuellement sous implémentations personnalisées. Chrome proposera une solution de Chrome 68 via des activités Web de confiance. À partir de là, nous pourrons créer un package Android (APK) avec un lanceur sur notre PWA et le télécharger dans le magasin. Pour le Microsoft Store sur Windows 10, le site PWA Builder participe actuellement à la génération d'un package APPX Windows 10. À l'aide d'une vue Web, vous pourrez peut-être créer manuellement une application iOS pour l'App Store, mais soyez extrêmement prudent avec les règles de la boutique.
Intégration de la plateforme
En mettant en œuvre des techniques d'amélioration progressive, vous pourrez utiliser de nombreuses fonctionnalités, notamment les notifications push, l'accès à la caméra et au microphone, la géolocalisation, les capteurs, les paiements, les dialogues de partage et le stockage hors ligne. Toutes ces fonctionnalités s’exécutent directement dans le modèle de sécurité du navigateur, y compris les boîtes de dialogue d’autorisation.
Nous pouvons également communiquer avec d'autres applications via des schémas d'URI, tels que l'ouverture de Twitter, YouTube ou WhatsApp via leurs URL ou leurs URI personnalisés, tels que WhatsApp: //.
Enfin, lors de la création de PWA natifs qui sont publiés dans le magasin à l'aide de Capacitor ou sur le Microsoft Store, nous serons en mesure de créer un pont vers des API natives qui nous permettront d'exécuter pratiquement n'importe quel code natif. Cette intégration avec Windows 10 comprend l'accès au matériel mais également l'intégration avec le système d'exploitation, offrant des options telles que Pin to Start. Par exemple, Twitter PWA vous permet d'épingler n'importe quel utilisateur sur votre écran de démarrage.
Défis design et UX
La conception de PWA présente des défis uniques, il est donc important de passer du temps à rechercher, tester autant que possible et prendre en compte les éléments suivants:
- Les utilisateurs s'attendront à des expériences similaires à celles des applications.
- Le processus d'installation est encore nouveau, nous devons donc faire des efforts supplémentaires pour expliquer comment installer l'application.
- La mise à jour de l'application en arrière-plan sans interaction de l'utilisateur est excellente, mais cela ajoute également des défis pour l'UX.
- Sur le bureau, la conception Web réactive prend une nouvelle frontière car les fenêtres PWA peuvent être minuscules, beaucoup plus petites qu'une fenêtre mobile. Cela signifie que nous devons créer des vues spécifiques ou de petits widgets pour ce format, comme on le voit dans Chrome OS aujourd'hui.
- Les notifications push doivent ajouter de la valeur à l'utilisateur uniquement, alors apprenez à poser au bon moment et ne perdez pas l'occasion d'envoyer des messages qui ne sont ni utiles ni intéressants.
- Nous devons concevoir des performances Web et un accès hors ligne.
L'année des PWA
Avec l'ajout d'iOS et de bureau cette année, les PWA sont partout aujourd'hui. Mais nous devons nous rappeler que leur voyage ne fait que commencer, alors attendez-vous à des changements fréquents et assurez-vous de vous tenir au courant des dernières techniques et idées pour offrir une excellente expérience utilisateur pendant que la plate-forme évolue.
Cet article a été initialement publié dans le numéro 308 de rapporter, le magazine le plus vendu au monde pour les concepteurs et développeurs Web. Achetez le numéro 308 ici ou alors abonnez-vous ici.
