Convertir votre site WordPress en PWA : suivre la tendance

Le mouvement PWA est un mouvement si transformateur et monumental qu'il est devenu comme celui d'une vague géante, balayant le monde de la technologie, changeant tout sur son passage pour le mieux.

Certaines des marques les plus influentes au monde, à savoir Twitter avec leur célèbre Twitter Lite , ont maintenant officiellement fait de PWA la base de leurs futurs développements.

 Lecture recommandée : 12 exemples d'applications Web progressives pour votre inspiration

WordPress, ou pour être plus précis, Automattic - les personnes derrière WordPress, a également lancé le mouvement WordPress PWA lors du Chrome Dev Summit 2017 en annonçant leur travail en cours d'intégration des technologies progressives dans le flux de travail de plates-formes telles que WordPress.

Depuis lors, le paysage WordPress a tellement changé que ne pas convertir votre WordPress en PWA est presque une perte garantie de satisfaction des téléspectateurs.

Comprendre les PWA

Comme Google l'a dit, les applications Web progressives sont

• Fiable - Chargez instantanément et ne montrez jamais le downasaur, même dans des conditions de réseau incertaines.
• Rapide - Répondez rapidement aux interactions des utilisateurs avec des animations fluides et sans défilement saccadé.
• Engager - Sentez-vous comme une application naturelle sur l'appareil, avec une expérience utilisateur immersive.

En termes simples, les PWA sont l'avenir de l'expérience de navigation sur le Web. Pour plus d'informations sur les PWA, consultez notre article : Qu'est-ce qu'une PWA ?.

Pourquoi PWA pour WordPress ?

À moins que vous ne vouliez que vos téléspectateurs s'ennuient à mort en attendant le chargement de votre page Web, la solution avec des performances, des fonctionnalités et une expérience utilisateur accrues est toujours le meilleur choix.

Prenez, par exemple, le célèbre Twitter Lite. Une étude de cas a montré que Twitter a connu un énorme changement dans les comportements des utilisateurs avec la sortie de Twitter Lite.

Nicolas Gallagher, responsable de l'ingénierie pour Twitter Lite, note :

Twitter Lite est désormais le moyen le plus rapide, le moins cher et le plus fiable d'utiliser Twitter. L'application Web rivalise avec les performances de nos applications natives, mais nécessite moins de 3 % de l'espace de stockage de l'appareil par rapport à Twitter pour Android.

Et il n'y a pas que Twitter qui a rejoint le mouvement, de grandes marques comme Spotify l'ont fait aussi avec leur récent développement de Spotify PWA. Les statistiques et les nouvelles concernant les changements apportés par les PWA sont partout et sont presque trop grandes pour être ignorées, rendant ainsi la revendication d'un avenir du Web propulsé par les PWA semble encore plus réaliste que jamais.

Prérequis pour configurer une PWA dans WordPress

• Les applications Web progressives exigent que votre site Web WordPress soit servi à partir d'une origine sécurisée, c'est-à-dire que votre site Web doit être HTTPS et non HTTP .
• Version WordPress : supérieure à 3.5.0
• Version PHP : supérieure à 5.3

Comment convertir votre site WordPress en PWA

Une fois les conditions préalables susmentionnées remplies, les propriétaires de sites WordPress peuvent choisir de convertir en PWA de l'une des deux manières suivantes : manuellement ou avec des plugins .

1. Développez manuellement votre PWA

Le développement de PWA, bien qu'il soit moins coûteux que d'autres types de développement, nécessite toujours une quantité substantielle de connaissances en codage et son développeur doit connaître les frameworks et bibliothèques Javascript courants, notamment Angular et React. C'est pourquoi il est souvent recommandé aux propriétaires de sites inexpérimentés d'essayer des plugins (gratuits et/ou payants) ou d'engager un développeur professionnel, car le processus de création d'une PWA n'est pas facile.

Lorsque vous essayez de créer une PWA manuellement, n'oubliez pas de suivre la liste de contrôle des applications Web progressives de Google et de tester votre page Web par rapport à l'outil Lighthouse pour la meilleure expérience utilisateur possible.

2. Avec des plugins

Ne vous inquiétez pas, propriétaires de sites non développeurs ! WordPress propose une grande variété de plugins qui font le plus gros du travail pour ses utilisateurs. Ces plugins sont de 2 types : Plugins gratuits et payants.

Plugins gratuits

1. SuperPWA

Au sommet des plugins PWA gratuits pour WordPress se trouve SuperPWA avec sa longue tradition d'excellent service et de qualité.

SuperPWA est facile à configurer, il faut moins d'une minute pour configurer votre Progressive Web App. SuperPWA effectue une désinstallation propre en supprimant chaque entrée de base de données et chaque fichier qu'il crée. En fait, aucun des paramètres par défaut n'est enregistré dans la base de données tant que vous ne l'avez pas enregistré manuellement la première fois.

Installations actives : 30 000+
Classement par étoiles : ★★★★★

2. PWA

PWA est destiné à fournir les blocs de construction PWA et le mécanisme de coordination pour les thèmes et les plugins afin de ne pas réinventer la roue et également de ne pas entrer en conflit les uns avec les autres.

Si vous développez un plugin ou un thème qui inclut un service worker, envisagez de vous fier à ce plugin PWA, ou au moins n'utilisez que l'implémentation intégrée comme solution de repli lorsque le plugin PWA n'est pas disponible.

Dernière mise à jour : il y a 5 mois
Installations actives : 20 000+
Classement par étoiles : ★★★★

3. PWA pour WP et AMP

Pour une offre gratuite, PWA pour WP & AMP est excellent dans ce qu'il fait. C'est bon, facile à utiliser et offre un service client exceptionnel ; cependant, sa documentation semble un peu insuffisante, ce qui peut rendre plus difficile le fonctionnement de tout.
Installations actives : 8 000+
Classement par étoiles : ★★★★★

4. PWA de la suite Web

WebSuite PWA est un plugin complet pour transformer votre site Web en PWA avec prise en charge AMP intégrée. Le plugin est livré avec différents thèmes pour donner à votre PWA un aspect semblable à celui d'une application, ainsi que de nombreuses fonctionnalités telles que l'ajout à l'écran d'accueil, les notifications push, le CDN, l'intégration analytique, etc.

Installations actives : 30+

Classement par étoiles : ★★★★★

5. PWA simple pour WordPress par Webkul

Avec seulement 49 $, vous pouvez convertir votre site WordPress en un PWA entièrement fonctionnel avec toutes ses fonctionnalités et avantages, et ce n'est pas tout. Le plugin est compatible avec tous les thèmes WordPress, et vous pouvez changer le thème, le nom de l'application ainsi que l'icône de l'application à partir du backend d'administration sans trop d'effort ni de connaissances techniques requises.

Installations actives : informations non disponibles

Classement par étoiles : informations non disponibles

Comment installer les plugins PWA

Le processus d'installation des plugins WordPress PWA est assez simple et rationalisé. Ci-dessous, nous utiliserons SuperPWA comme exemple :

Installation WordPress :

• Visitez WordPress Admin> Plugins> Ajouter un nouveau
• Rechercher ' Applications Web super progressives '
• Cliquez sur « Installer maintenant » puis sur « Activer » les applications Web super progressives

Pour installer manuellement :

• Téléchargez le dossier super-progressive-web-apps dans le /wp-content/plugins/ répertoire sur votre serveur
• Allez dans WordPress Admin > Plugins
• Activez le plugin Super Progressive Web Apps dans la liste.

Conclusion

Ce mouvement PWA ne semble pas ralentir de sitôt et votre meilleur pari est d'agir maintenant avant de vous retrouver à la traîne.

Si vous êtes féru de technologie et que vous souhaitez plus de liberté pour vous et pour votre site, le développement manuel de PWA devrait être une option privilégiée pour vous. Cependant, pour les propriétaires de sites qui ne sont pas très expérimentés et qui souhaitent une méthode plus sûre et éprouvée , les plugins PWA pour WordPress ne sont pas une si mauvaise idée. Les plugins peuvent vous faire gagner du temps et des maux de tête occasionnels lors du processus de création d'une PWA, permettant ainsi une meilleure allocation des ressources.

Lectures complémentaires :

• Magento PWA Studio : une comparaison détaillée avec Vue Storefront

• Intégration Magento WordPress : Un guide étape par étape