Progressive Web App avec WordPress : avantages et inconvénients

4 Min.
Progressive Web App WordPress

Notre partenaire giftGRÜN a créé une application Web progressive (en abrégé : PWA) avec WordPress pour l'hôpital universitaire RWTH d'Aix-la-Chapelle, qui prend en charge l'accueil des nouveaux employé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 application Web progressive

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

Le contenu est maintenu dans WordPress et sorti via des modèles normaux. Un ServiceWorker fournit la fonctionnalité hors ligne. Lors de l'ouverture initiale de la page, le ServiceWorker 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. Et le ServiceWorker 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, vous pourriez également recharger après une mise à jour, mais cela n'a pas été nécessaire pour notre cas d'utilisation.

PWA WordPress
Captures d'écran de l'application Web progressive pour l'hôpital universitaire RWTH Aachen

Le stockage des données est entièrement hors ligne. Seule la connexion à l'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, ils doivent être distribués par l'intermédiaire des magasins officiels pour avoir une large portée. Les PWA, en revanche, peuvent être installées directement lors de la visite du site, par simple pression 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éveloppeurs web, que Safari ne prenne pas en charge des choses qui sont courantes dans d'autres navigateurs depuis des années...

Comment l'interaction entre la Progressive Web App avec WordPress ?

Nous utilisons WordPress pour la maintenance des données, mais aussi pour les modèles. Il s'agit d'un site web normal, à la seule différence que le contenu est mis à disposition hors ligne via un ServiceWorker JavaScript. Et qu'il se comporte presque comme une application native.

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

Mettre en œuvre une application Web progressive avec WordPress

Quelles sont les approches si vous voulez mettre en œuvre une Progressive Web App avec WordPress ?

Il existe un certain Plugins, avec lequel une page peut être transformée en une application Web progressive en appuyant sur un bouton et quelques paramètres. Il existe également des services de notification push qui peuvent être utilisés pour informer tous les visiteurs du blog des nouveaux articles. Cependant, ces Plugins prêts à l'emploi sont plutôt destinés à rendre un blog normal 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 site Plugins 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 pour faire fonctionner l'application, qui s'écartent de la norme.

Le modèle de mise en cache doit être choisi en fonction du cas d'utilisation. Les ServiceWorkers peuvent produire des pages mises en cache en quelques millisecondes et les rafraîchir en arrière-plan. Cependant, si je suis sur une page d'actualités, l'utilisateur peut préférer voir une petite barre d'attente jusqu'à ce que le dernier contenu 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 utilisateurs sont conservés totalement hors ligne. Le serveur ne voit jamais quel utilisateur appelle quoi, puisqu'il n'y a pas d'utilisateurs connectés. Il est donc impossible de savoir si un nouvel employé a tout fait ou s'il n'a même pas installé l'application.

Avantages et inconvénients des systèmes

Comment décidez-vous, par client, de la technologie la mieux adaptée à un 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 client 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 production de PWA 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 magasin. Bien entendu, le budget disponible joue également un rôle déterminant.

Avez-vous d'autres projets PWA en préparation dont vous pouvez nous parler ?

Beaucoup de choses - mais nous ne voulons pas encore les révéler 😉 Juste ceci : de grandes choses peuvent être faites avec les PWA dans le secteur du commerce électronique également.

Quelques mots sur vous et votre agence ?

giftGRÜN est l'agence numérique du groupe GRÜN. Notre groupe d'entreprises est le leader du marché des systèmes de gestion des dons et des membres en Allemagne. La plupart de nos projets consistent à mettre en place un système global pour nos clients, c'est-à-dire à connecter notre système ERP à des sites web.

Nous faisons beaucoup de travail d'interface et développons également notre propre site WordPress Themes . Notre équipe se compose de concepteurs, d'agents d'accueil et d'arrière-agents et de chefs de projet. Notre hébergeur préféré est bien sûr de Münster 🙂 ...

Vos questions sur les Progressive Web Apps

Quelles questions avez-vous sur les Progressive Web Apps ? N'hésitez pas à utiliser la fonction de commentaire. Vous voulez être informé des nouveaux articles sur WordPress et WooCommerce ? Alors suivez-nous sur Twitter, Facebook, LinkedIn ou via notre newsletter.

Michael est responsable de contenu et de la santé mentale sur le site RAIDBOXES. Il est actif dans la communauté des blogueur·euse·s et de WordPress depuis 2007, entre autres en tant que co-organisateur des événements WordPress, auteur de livres et formateur de blogs d'entreprise. Il aime énormément les blogs, tant sur le plan professionnel que personnel. Michael travaille et écrit à distance depuis la ville ensoleillée de Fribourg.

Articles connexes

Commentaires sur cet article

Laisse un commentaire

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