Progressive Web App WordPress

Progressive web apps avec WordPress : les avantages et les inconvénients

Notre partenaire giftGRÜN a créé une progressive web app (en abrégé : PWA) avec WordPress pour le CHU RWTH d'Aix-la-Chapelle qui prend en charge l'accueil des nouvelles et nouveaux employé·e·s. Patrick Heinker nous a parlé des avantages et des inconvénients des PWA par rapport aux sites web et aux applications natives.

Comment fonctionne une progressive web app ?

Patrick, comment fonctionne exactement une PWA et qu'en est-il de la gestion des données ?

Sur WordPress, le contenu est traité et sorti via des templates ordinaires. Un Service Worker fournit la fonctionnalité hors ligne. Lors de l'ouverture initiale du site, le Service Worker télécharge un fichier zip contenant toutes les pages, qui est généré côté serveur.

Maintenant, lorsqu'une page est appelée, la page déjà dans le cache est affichée. Le Service Worker se charge de la mise à jour en arrière-plan, de sorte qu'il affiche le nouveau contenu lors de la prochaine visite si quelque chose a changé. En option, tu pourrais également recharger après une mise à jour, mais cela n'a pas été nécessaire pour notre cas d'utilisation.

Progressive Web App WordPress
Captures d'écran de la progressive web app pour le CHU RWTH d'Aix-la-Chapelle

Le stockage des données est entièrement hors ligne. Seule la connexion à Internet est nécessaire pour les vidéos et le contenu externe.

PWA et application native

Quelles sont les différences mais aussi les avantages par rapport aux applications natives ?

Les applications natives sont spécifiques à une plateforme, souvent complexes et donc coûteuses à mettre en œuvre. En outre, elles doivent être distribuées par l'intermédiaire des boutiques officielles pour avoir une large portée. Les PWA, en revanche, peuvent être installées directement lors de la visite du site, par simple clic sur un bouton.

Cependant, Apple est toujours un peu en retard en ce qui concerne la prise en charge des fonctionnalités PWA. Mais ce n'est pas nouveau pour les développeur·euse·s web que Safari ne prenne pas en charge des choses qui sont courantes dans d'autres navigateurs depuis des années...

Comment fonctionne l'interaction entre la progressive web app et WordPress ?

Nous utilisons WordPress pour la gestion des données, mais aussi pour les templates. C'est un site web tout à fait normal, à la seule différence que le contenu est rendu disponible hors ligne via un JavaScript ServiceWorker. Et qu'il se comporte presque comme une application native.

Il est également possible d'utiliser l'API REST de WordPress et d'effectuer le rendu côté client, comme c'est habituellement le cas dans les applications natives. Pour notre cas d'utilisation, cependant, nous n'y avons vu ici qu'un effort supplémentaire qui n'apporte pratiquement aucun avantage.

Mettre en œuvre une progressive web app avec WordPress

Quelles sont les approches si l'on veut mettre en œuvre une progressive web app avec WordPress ?

Il existe certains plugins avec lesquels un site peut être transformé en une progressive web app en appuyant sur un bouton et en définissant quelques paramètres. Il existe également des services de notification push qui peuvent être utilisés pour informer tou·te·s les visiteur·euse·s du blog des nouveaux articles. Cependant, ces plugins prêts à l'emploi sont plutôt destinés à rendre un blog ordinaire capable de fonctionner hors ligne et à précharger des fichiers ciblés.

Après avoir joué avec certains de ces plugins, nous avons opté pour notre propre solution. Nous avons construit notre fonctionnalité séparément du plugin pour permettre, par exemple, le chargement complet du contenu de la page via un zip généré par le serveur et pour être plus flexible dans la personnalisation des fonctionnalités. Les notifications push sont généralement mises en forme par des services payants, mais peuvent tout aussi bien être créées en interne.

PWAs : compatibilité et protection des données

Quels sont les écueils potentiels et comment les avez-vous résolus ? Et qu'en est-il de la question de la protection des données ?

Comme d'habitude avec le développement web, chaque navigateur fonctionne différemment et le produit doit être testé de manière approfondie sur tous les appareils. Apple refuse de prendre totalement en charge la fonctionnalité PWA et dispose à nouveau de ses propres balises méta spécifiques à Apple, qui s'écartent de la norme, pour faire fonctionner l'application.

Le modèle de mise en cache doit être choisi en fonction du cas d'utilisation. Les Service Workers peuvent produire des pages mises en cache en quelques millisecondes et les actualiser en arrière-plan. Cependant, si je suis sur un site d'actualités, l'utilisateur·rice peut préférer voir une petite barre d'attente jusqu'à ce que le contenu le plus récent soit chargé.

La protection des données était l'une des principales raisons pour lesquelles nous avons choisi une PWA. Le contenu et la progression de l'apprentissage des utilisateur·rice·s sont entièrement sauvegardés hors ligne. Le serveur ne voit jamais quel·le utilisateur·rice appelle quoi puisqu'il n'y a pas d'utilisateur·rice·s connecté·e·s. Il est donc impossible de savoir par exemple si un·e nouvel·le employé·e a tout étudié ou s'iel n'a même pas installé l'application.

Avantages et inconvénients des systèmes

Comment décidez-vous pour chaque client·e de la technologie la mieux adaptée à tel projet ?

Il existe des applications qui ne peuvent être mises en œuvre que par le biais d'une application native. Par exemple, si un·e client·e veut absolument recevoir des notifications push sur un iPhone, il n'y a pas d'autre moyen que de le faire de manière native. D'autre part, la création de PWAs est également nettement moins chère qu'une application native en raison de l'utilisation de technologies web et de l'élimination de toute manipulation de boutique. Bien entendu, le budget disponible joue également un rôle déterminant.

Avez-vous d'autres projets de PWA en préparation dont tu peux déjà nous parler ?

Beaucoup - mais nous ne voulons pas encore les dévoiler 😉 Juste une chose : dans le domaine du e-commerce aussi, on peut faire des choses géniales avec les PWA.

Tu veux bien nous dire quelques mots sur ton agence et toi ?

giftGRÜN est l'agence numérique du groupe GRÜN. Notre groupe d'entreprises est en tête du marché des systèmes de gestion de dons et d'adhésions en Allemagne. La plupart de nos projets consistent à mettre en place un système global pour nos client·e·s, c'est-à-dire à connecter notre système ERP à des sites web.

Nous faisons beaucoup de travail d'interface et développons aussi nos propres thèmes WordPress. Notre équipe se compose de designers, de front-endlers, de backendlers et de chefs de projet. Notre hébergeur préféré vient bien sûr de Münster 🙂.

Tes questions sur les progressive web apps

Quelles questions as-tu sur les progressive web apps ? N'hésite pas à utiliser la fonction des commentaires. Tu souhaites être informé·e des nouveaux articles sur WordPress et WooCommerce ? Alors suis-nous sur Twitter, Facebook, LinkedIn ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués d'un *.