Progressive Web Apps (PWA) : guide complet et exemples

Que sont les Progressive Web Apps ou PWA ?

Les Progressive Web Apps sont la combinaison technologique des applications natives et des applications web basées sur HTML5 que nous connaissons. Les PWA sont arrivées pour combler le fossé technologique entre les apps et les pages web.

Google a été l'un des principaux défenseurs en encourageant le développement de ce type de technologie. Pour mieux comprendre ses caractéristiques, nous devons parler d'applications qui doivent être fiables, rapides et engageantes.

Caractéristiques que les Progressive Web Apps doivent avoir

Pour que le concept de PWA soit suffisamment clair et expliqué, plongeons dans les caractéristiques essentielles que ces technologies doivent avoir.

Bien sûr, nous parlons en termes généraux. À partir de là, chaque modèle d'entreprise/service adaptera ses objectifs aux besoins de son propre public cible.

Vitesse

Le temps c'est de l'argent, non seulement pour Google mais pour toutes ces entreprises où un chargement lent de leurs produits peut faire abandonner aux utilisateurs un achat potentiel.

Google insiste sur cette prémisse depuis longtemps. La naissance du projet AMP avait cet objectif, et maintenant les PWA rejoignent le besoin d'accès rapide à l'information des applications.

Les utilisateurs aujourd'hui n'ont aucune patience ; ils n'attendent pas qu'un site se charge complètement. 53 % des utilisateurs n'attendront pas plus de 3 secondes pour qu'un site web se charge, selon Think with Google

Fiable

Quand nous parlons de fiabilité, nous nous référons aux garanties de fonctionnement du site. Grâce à ce qu'on appelle les Service Workers, les problèmes de connexion réseau ne devraient pas empêcher la PWA de se charger.

Installable

Les PWA peuvent être installées sans avoir besoin d'aller au Chrome Store, à l'Apple Store ou à l'un des stores d'apps existants. Rappelez-vous qu'elles ne sont pas des applications natives, donc nous pouvons y accéder sans passer par ces stores.

L'installation se comporte simplement comme un raccourci ; elle n'a pas besoin d'espace pour stocker les différents fichiers.

Différents appareils : Mobile et Desktop

La base de code est unifiée entre les deux appareils, ce qui signifie que les techniques de design responsive s'appliquent à la fois au mobile et au desktop.

Avantages et inconvénients des PWA

Certains avantages ont déjà été mentionnés ci-dessus en expliquant les caractéristiques des applications progressives. Mais il existe de nombreuses autres raisons d'envisager d'utiliser cette technologie dans notre entreprise.

• ›Économies de ressources
• ›Pas d'installation requise
• ›Très grande vitesse de chargement
• ›Notifications push directement aux smartphones
• ›Fonctionne sur tous les systèmes d'exploitation
• ›Sécurité améliorée
• ›Moins de travail de développement et de maintenance qu'une app native.
• ›Plus économique qu'une app native.

Inconvénients

• ›Nécessite une connexion internet.
• ›Tous les navigateurs ne prennent pas en charge les PWA.
• ›Consommation élevée de la batterie

Qu'est-ce qu'un Service Worker ?

En revenant brièvement au côté technique, nous devons parler de certains aspects sans lesquels les applications progressives ne pourraient pas fonctionner. Les Service Workers sont des scripts qui s'exécutent en arrière-plan, faisant des requêtes aux applications web, au cache ou au réseau lui-même.

Une chose importante que nous devons savoir, c'est que les Service Workers ne peuvent fonctionner que si vous avez un certificat SSL et que vous les servez via https.

Voyons maintenant tout cela avec un exemple : le site web de BMW et sa PWA.

Exemple de PWA : BMW

J'ai essayé d'écrire un article sans entrer profondément dans les aspects techniques, et maintenant nous allons voir un exemple d'application qui aidera à mieux comprendre le concept de PWA.

Si nous entrons sur le site web de BMW, nous pouvons voir qu'ils ont un design très attrayant, donnant la priorité au visuel, mais au-delà de parler de design, voyons à quel type de site web nous avons affaire.

Apparemment, c'est un site web « normal », mais si vous fouillez dans le code, nous obtenons notre première surprise. En effet, c'est un site web entièrement développé en AMP, pas seulement la version mobile.

Mais venons-en à la question qui nous occupe aujourd'hui.

Une fois à l'intérieur du site web, allons à la barre « personnaliser et contrôler » de Chrome.

Comme vous avez pu le voir, une fenêtre s'est ouverte avec le contenu du site web de BMW. En comparant les deux contenus, nous voyons qu'ils sont pratiquement identiques.

Image du site web dans le navigateur (Chrome)

Image du site web en PWA desktop

Les développeurs de BMW ont réussi à maintenir une apparence visuelle identique. Lorsque nous acceptons « l'installation » de la PWA dans notre dossier d'applications Chrome ou même sur le bureau (selon l'OS, j'utilise actuellement MacOS), un raccourci vers la PWA a été téléchargé.

Si nous sommes débordés par l'installation d'apps et que nous voulons désinstaller, nous devons juste aller à notre fenêtre de version PWA, cliquer sur le côté droit comme dans Chrome, et sélectionner désinstaller.

Dans la version mobile, c'est pratiquement similaire. Lorsque nous entrons sur le site web avec version PWA, nous recevons une notification pour « créer un raccourci ».

En entrant sur un site web avec PWA, nous verrons une option pour créer un raccourci.

Si nous acceptons, nous verrons une icône PWA sur notre bureau mobile.

DevTools pour en savoir plus sur les PWA

À ce stade, je veux plonger dans les exemples pour expliquer les concepts et les caractéristiques de ce type d'application.

Pour cela, nous allons utiliser l'outil de développement que Chrome fournit (DevTools). Nous ouvrons l'inspecteur avec le bouton droit et allons à Application.

Devtools de Chrome

App Manifest (Web Application Manifest)

Le manifest est un petit fichier JSON avec des aspects de style basiques qu'il fournit au navigateur pour éviter les changements brusques.

Exemple de Manifest (JSON)

Service Workers

Comme nous l'avons expliqué précédemment, maintenant nous pouvons voir de quoi il s'agit. Nous voyons le fichier JS et dans celui-ci les scripts qu'il utilise. Le Service Worker est installé dans le navigateur. Nous en aurons plusieurs d'autres applications web.

L'une des principales fonctions de ce type de code est de s'assurer que la même version est toujours servie (il contrôle le cache) même si nous ouvrons un autre onglet.

Comment implémenter une PWA dans WordPress ?

Alors que si nous avons développé notre site web avec notre propre code, nous devrons faire pas mal de travail manuel, la situation sera très différente si nous avons développé notre site web dans WordPress. Si c'est le cas, nous aurons plusieurs plugins à notre disposition qui nous permettront d'activer la technologie PWA en quelques clics. La version PWA de SEO Alive, en fait, est le résultat de ce plugin que nous recommandons.

Plugins les plus populaires pour implémenter PWA dans WordPress.

PWA en marketing

Pour ceux d'entre nous qui travaillons en marketing, les Progressive Web Apps peuvent nous aider à atteindre des objectifs que tout département marketing a en tête pour faire croître une marque.

Fidélisation et ventes

L'un des objectifs les moins bien travaillés par certaines marques. Nous connaissons tous le faible engagement que les marques de téléphones mobiles ont en traitant leurs clients, pour donner un exemple.

Les notifications push dans les PWA sont l'une des actions qui fonctionnent le mieux et contribuent à la génération de ventes.

Une étude réalisée par Gartner sur les PWA nous donne une série de statistiques très intéressantes sur Lancome et Alibaba ; Lancome rapporte une augmentation de 17 % des conversions, 51 % dans les sessions depuis les appareils mobiles, et 52 % sur iOS. Alibaba (le groupe auquel appartient Aliexpress) a amélioré son taux de conversion de 76 %.

Bien que nous ayons parlé de 2 géants mondiaux, avoir une app sur votre mobile où le temps de chargement et d'exécution n'est pas un frein, en plus de respecter un bon design, a démontré augmenter le taux de conversion.

En conclusion, nous pouvons dire que les PWA se répandent de plus en plus, principalement parmi les grandes marques. En Espagne, nous prendrons probablement un peu de temps pour réaliser l'énorme potentiel de cette technologie, mais tôt ou tard elle sera implémentée.

Toute technologie qui facilite la navigation mobile a une grande importance ; nous passons de nombreuses heures avec nos smartphones, et finalement, l'accès à la fois au contenu et aux produits est business.

Références

• ›Documentation Google sur les PWA