Qu’est-ce qu’une PWA ?<\/h2>\n
Les applications web progressives (Progressive Web Apps ou PWA) sont un type de technologie qui combine les capacit\u00e9s d’un site web traditionnel et r\u00e9actif avec celles d’une application mobile riche en fonctionnalit\u00e9s.<\/p>\n
Selon Mozilla<\/a>, les PWA utilisent des fonctionnalit\u00e9s web modernes pour fournir une interface web semblable \u00e0 une application, accessible \u00e0 partir d’un navigateur web.<\/p>\n Les trois composants technologiques cl\u00e9s des PWA sont les suivants :<\/p>\n La combinaison de ces trois technologies permet une exp\u00e9rience rapide et sans installation, avec une PWA totalement int\u00e9gr\u00e9e \u00e0 la page d’accueil.<\/p>\n Vous pouvez voir que toutes ces pi\u00e8ces s’assemblent magnifiquement avec le site web et l’application du Caf\u00e9 Javas<\/a>.<\/p>\n D\u00e9velopp\u00e9e par TechAhead<\/a>, cette PWA offre une exp\u00e9rience transparente entre le site web et l’application mobile. Les clients peuvent ainsi facilement passer commande \u00e0 partir de leur navigateur web sans avoir \u00e0 subir les frustrations d’un site web traditionnel.<\/p>\n Transformer votre site WordPress en Progressive Web App peut consid\u00e9rablement am\u00e9liorer votre pr\u00e9sence num\u00e9rique et l’exp\u00e9rience des utilisateurs. Voici pourquoi ce changement est une excellente id\u00e9e :<\/p>\n L’un des nombreux avantages des PWA est la possibilit\u00e9 d’envoyer des notifications push. Cela vous permet d’informer votre public de vos derni\u00e8res nouvelles et annonces et de vous assurer que les visiteurs de votre site ne vous oublient pas. Cette caract\u00e9ristique encourage les visites r\u00e9guli\u00e8res et davantage d’interactions.<\/p>\n Les PWA sont \u00e9galement extr\u00eamement rapides. La plupart des ressources sont mises en cache et les workers de service aident \u00e0 les charger rapidement. M\u00eame si les visiteurs de votre site n’ont pas le fournisseur de r\u00e9seau le plus rapide et le plus fiable, leur PWA aliment\u00e9e par WordPress se chargera instantan\u00e9ment. Ce gain de vitesse am\u00e9liore non seulement l’exp\u00e9rience de l’utilisateur, mais contribue \u00e9galement au classement dans les moteurs de recherche, car la vitesse du site est un facteur de classement pour Google.<\/p>\n L’un des avantages les plus convaincants des PWA est sans doute leur capacit\u00e9 \u00e0 fonctionner hors ligne ou sur des r\u00e9seaux de mauvaise qualit\u00e9. Cela est possible gr\u00e2ce \u00e0 des workers de service qui mettent en cache les ressources cl\u00e9s, ce qui permet aux utilisateurs d’acc\u00e9der aux pages visit\u00e9es pr\u00e9c\u00e9demment sans connexion \u00e0 l’internet.<\/p>\n Les sites web traditionnels et les applications mobiles ont chacun leurs limites. Les sites web, par exemple, d\u00e9pendent fortement de la qualit\u00e9 du r\u00e9seau et n’offrent pas les fonctionnalit\u00e9s des applications natives telles que les notifications push ou l’acc\u00e8s hors ligne. Les applications mobiles, quant \u00e0 elles, exigent des utilisateurs qu’ils t\u00e9l\u00e9chargent et installent r\u00e9guli\u00e8rement des mises \u00e0 jour.<\/p>\n Les PWA ne pr\u00e9sentent pas ces inconv\u00e9nients.<\/p>\n Convertir votre site WordPress en PWA, ce n’est pas seulement am\u00e9liorer votre site. C’est changer la fa\u00e7on dont votre public interagit avec lui gr\u00e2ce \u00e0 une plateforme plus rapide et plus attrayante qui fonctionne et s’affiche bien sur n’importe quel appareil et avec n’importe quel r\u00e9seau.<\/p>\n Toute personne souhaitant cr\u00e9er une PWA pour WordPress devra connaitre les \u00e9l\u00e9ments suivants :<\/p>\n Si vous faites une recherche rapide sur les meilleures extensions PWA pour WordPress, vous d\u00e9couvrirez rapidement une gamme d’outils qui peuvent am\u00e9liorer votre site web avec des fonctionnalit\u00e9s de type application, des temps de chargement plus rapides et d’autres caract\u00e9ristiques impressionnantes.<\/p>\n Pour ceux qui cherchent \u00e0 construire une PWA rapidement, voici plusieurs des meilleures extensions PWA actuellement disponibles pour WordPress qui pourraient acc\u00e9l\u00e9rer votre flux de travail.<\/p>\n D\u00e9velopp\u00e9e par SuperPWA, l’extension Super Progressive Web Apps<\/a> offre aux utilisateurs de WordPress un moyen simple de transformer leurs sites web en Progressive Web Apps (PWA). Cette fusion des meilleurs aspects des technologies du web et des applications mobiles permet une utilisation hors ligne, des temps de chargement quasi instantan\u00e9s et un acc\u00e8s \u00e0 partir d’un raccourci sur l’\u00e9cran d’accueil.<\/p>\n SuperPWA fonctionne sur un mod\u00e8le freemium, ce qui signifie qu’un ensemble de fonctionnalit\u00e9s de base est disponible gratuitement, avec des options suppl\u00e9mentaires accessibles par le biais de mises \u00e0 niveau. La premi\u00e8re s\u00e9rie de mises \u00e0 jour de SuperPWA est propos\u00e9e \u00e0 partir de 99 $.<\/p>\n L’extension PWA for WP & AMP<\/a> enrichit l’exp\u00e9rience de l’utilisateur avec une interface semblable \u00e0 celle d’une application, une compatibilit\u00e9 AMP PWA compl\u00e8te, un support multisite, un suivi UTM et la possibilit\u00e9 de travailler hors ligne. Elle fournit \u00e9galement un support pour le d\u00e9veloppement de workers de service, des banni\u00e8res d’application, un manifeste d’application web et un \u00e9cran d’accueil personnalis\u00e9.<\/p>\n L’extension PWA<\/a> se concentre sur les \u00e9l\u00e9ments essentiels de la PWA, comme les workers de service, le manifeste d’application web et le support HTTPS. La PWA vise \u00e0 acc\u00e9l\u00e9rer les temps de chargement et \u00e0 offrir une exp\u00e9rience similaire \u00e0 celle d’une application sur mobile.<\/p>\n Instantify<\/a> se diff\u00e9rencie en combinant trois fonctionnalit\u00e9s cl\u00e9s en une seule plateforme : Progressive Web Apps (PWA), Accelerated Mobile Pages (AMP) de Google et Facebook Instant Articles (FBIA). Gr\u00e2ce \u00e0 cette combinaison, l’outil transforme votre site web pour lui donner l’aspect d’une application, acc\u00e9l\u00e8re les temps de chargement des sites web mobiles et ouvre le contenu de votre site web aux plateformes sociales.<\/p>\n Instantify co\u00fbte 29 $, un paiement unique pour une licence \u00e0 vie. Le produit n’est pas accompagn\u00e9 d’un essai gratuit ou d’une garantie de remboursement, il est donc pr\u00e9f\u00e9rable d’examiner attentivement vos besoins actuels et vos exigences en mati\u00e8re de compatibilit\u00e9 avant d’acheter.<\/p>\n Construire une PWA avec WordPress est un moyen passionnant d’am\u00e9liorer l’exp\u00e9rience mobile de votre site web, en la rendant plus rapide, plus fiable et plus attrayante. Comme nous l’avons d\u00e9j\u00e0 mentionn\u00e9, les PWA utilisent les capacit\u00e9s modernes du web pour offrir aux utilisateurs des exp\u00e9riences similaires \u00e0 celles d’une application, directement \u00e0 partir de leur navigateur.<\/p>\n Voici un mini-guide \u00e9tape par \u00e9tape sur la fa\u00e7on de transformer votre site WordPress en PWA en utilisant l’une des extensions dont nous avons parl\u00e9.<\/p>\n Avant de plonger dans les aspects techniques, vous devez planifier les fonctionnalit\u00e9s et les objectifs de votre PWA. R\u00e9fl\u00e9chissez aux parties de votre site qui pourraient b\u00e9n\u00e9ficier d’un acc\u00e8s hors ligne, aux actions que les utilisateurs devraient pouvoir effectuer sans connexion r\u00e9seau et \u00e0 l’aspect que vous souhaiteriez donner \u00e0 votre PWA sur l’\u00e9cran d’accueil. La planification permet de s’assurer que votre PWA am\u00e9liore l’exp\u00e9rience de l’utilisateur de mani\u00e8re significative.<\/p>\n Comme nous l’avons vu, il existe plusieurs extensions permettant de transformer votre site WordPress en PWA.<\/p>\n \u00c9valuez chacune d’entre elles en fonction de vos besoins sp\u00e9cifiques. Si vous recherchez une solution simple et directe, Super Progressive Web Apps offre une configuration facile. Pour ceux qui ont besoin d’une int\u00e9gration entre plusieurs outils, Instantify pourrait \u00eatre une meilleure option.<\/p>\n Pour notre exemple d’aujourd’hui, nous utiliserons Super Progressive Web Apps.<\/p>\n Une fois que vous avez choisi une extension, installez-la sur votre site WordPress. Vous pouvez le faire en allant dans votre tableau de bord WordPress, en naviguant vers Extensions > Ajouter<\/strong>, en recherchant l’extension par son nom et en cliquant sur Installer maintenant<\/strong>. Apr\u00e8s l’installation, cliquez sur Activer<\/strong>.<\/p>\n Apr\u00e8s l’activation, vous trouverez les r\u00e9glages de l’extension dans le menu R\u00e9glages<\/strong> de votre tableau de bord WordPress.<\/p>\n Ici, vous pouvez configurer diff\u00e9rents aspects de votre PWA, tels que :<\/p>\n Une fois les modifications effectu\u00e9es, cliquez sur Enregistrer les r\u00e9glages<\/strong>.<\/p>\n Une fois les r\u00e9glages configur\u00e9s, il est essentiel de tester votre PWA sur diff\u00e9rents appareils. Utilisez Chrome DevTools ou des outils similaires pour simuler diff\u00e9rents appareils ou testez directement sur votre appareil mobile en ajoutant votre site \u00e0 l’\u00e9cran d’accueil.<\/p>\n Par exemple, si vous utilisez un appareil iOS, vous devrez vider le cache de votre navigateur mobile avant de visiter votre site web.<\/p>\n Cliquez sur le bouton Partager<\/strong>, puis sur Options<\/strong>. Cliquez sur Ajouter \u00e0 l’\u00e9cran d’accueil<\/strong>. Fermez votre navigateur, puis cliquez sur l’ic\u00f4ne de l’application qui vient d’\u00eatre ajout\u00e9e \u00e0 votre \u00e9cran d’accueil. Parcourez quelques pages du site web, d\u00e9connectez-vous d’Internet, puis essayez \u00e0 nouveau d’acc\u00e9der \u00e0 ces m\u00eames pages.<\/p>\n Si elles se chargent, votre PWA est op\u00e9rationnelle !<\/p>\n Pour ceux qui recherchent plus de contr\u00f4le et de personnalisation, la conversion manuelle de votre site WordPress en PWA peut \u00eatre la meilleure solution.<\/p>\n Cette m\u00e9thode est plus technique et n\u00e9cessite une bonne compr\u00e9hension des principes de d\u00e9veloppement web. Veillez donc \u00e0 revoir les pr\u00e9-requis \u00e9nonc\u00e9s pr\u00e9c\u00e9demment pour vous assurer que vous \u00eates en mesure de la mener \u00e0 bien.<\/p>\n La s\u00e9curisation de votre site par HTTPS n’est pas n\u00e9gociable pour les PWA. HTTPS crypte les donn\u00e9es entre votre site web et ses visiteurs, ce qui permet de se pr\u00e9munir contre les fuites de donn\u00e9es et autres probl\u00e8mes de ce type.<\/p>\n Vous pouvez obtenir un certificat SSL gratuit aupr\u00e8s de Let’s Encrypt<\/a> s’il n’est pas d\u00e9j\u00e0 fourni avec votre pack d’h\u00e9bergement.<\/p>\n La proc\u00e9dure d’installation varie en fonction de votre fournisseur d’h\u00e9bergement. Nombre d’entre eux proposent des options d’installation du SSL en un seul clic. Consultez la documentation d’assistance de votre h\u00e9bergeur pour obtenir des instructions sp\u00e9cifiques.<\/p>\n Apr\u00e8s avoir install\u00e9 votre certificat SSL, assurez-vous que tout le trafic du site web utilise le protocole HTTPS en redirigeant du HTTP vers le HTTPS. Pour cela, vous pouvez utiliser une extension WordPress telle que Really Simple SSL<\/a> ou modifier le fichier .htaccess de votre site<\/a> si vous \u00eates \u00e0 l’aise avec les modifications manuelles.<\/p>\n Le manifeste de l’application web est un fichier JSON qui contr\u00f4le la fa\u00e7on dont votre PWA apparait aux utilisateurs et comment elle se lance. Il comprend le nom, les ic\u00f4nes et l’URL de d\u00e9marrage de votre application, entre autres r\u00e9glages.<\/p>\n Pour commencer, cr\u00e9ez un fichier JSON nomm\u00e9 manifest.json.<\/strong> Ce fichier doit contenir des informations cl\u00e9s sur votre application, telles que son nom ( Voici \u00e0 quoi devrait ressembler le code, selon les MDN Web Docs<\/a>.<\/p>\n Ajoutez un lien vers le fichier manifest.json<\/strong> dans la section Utilisez ensuite des outils comme Lighthouse de Google<\/a> pour tester et valider l’impl\u00e9mentation du manifeste de votre application web.<\/p>\n Les workers de service<\/a> agissent comme un proxy entre votre application web et le monde ext\u00e9rieur. Ils sont essentiels pour les fonctionnalit\u00e9s hors ligne, les notifications push et la mise en cache des ressources.<\/p>\n Pour en cr\u00e9er un, vous devez cr\u00e9er un nouveau fichier JavaScript. Appelez-le service-worker.js<\/strong> et placez-le dans le r\u00e9pertoire racine de votre th\u00e8me WordPress. Ce fichier contiendra la logique de mise en cache des ressources, d’interception des requ\u00eates r\u00e9seau et de gestion des fonctionnalit\u00e9s hors ligne.<\/p>\n Vous devez enregistrer votre worker de service depuis le JavaScript de votre application web. G\u00e9n\u00e9ralement, cela se fait dans un fichier JavaScript principal qui s’ex\u00e9cute sur votre page web.<\/p>\n Voici un exemple d’enregistrement d’un worker de service \u00e0 partir de Borstch<\/a>:<\/p>\n Dans votre fichier service-worker.js<\/strong>, mettez en \u0153uvre la logique de mise en cache des ressources statiques, d’interception des requ\u00eates de r\u00e9cup\u00e9ration et de service du contenu \u00e0 partir du cache lorsque vous n’\u00eates pas en ligne.<\/p>\n Voici un exemple de base pour mettre en cache quelques ressources :<\/p>\n Les tests sont indispensables pour s’assurer que votre worker de service se comporte comme pr\u00e9vu. Utilisez le panneau Application<\/strong> dans Chrome DevTools pour inspecter les agents de service enregistr\u00e9s, les ressources mises en cache, etc.<\/p>\n L’optimisation de votre PWA WordPress est la derni\u00e8re chose \u00e0 faire pour garantir la vitesse, la fiabilit\u00e9 et la fonctionnalit\u00e9. Nous allons nous plonger dans quelques techniques d’optimisation avanc\u00e9es, en nous concentrant sur les strat\u00e9gies de mise en cache, la priorisation des ressources et le chargement adaptatif pour diff\u00e9rentes vitesses de connexion.<\/p>\n La mise en cache est un \u00e9l\u00e9ment cl\u00e9 de l’optimisation des PWA, selon Smashing Magazine<\/a>. Elle permet \u00e0 votre application de se charger plus rapidement en stockant des copies des ressources. La mise en \u0153uvre d’une strat\u00e9gie de mise en cache d’abord garantit que votre application r\u00e9cup\u00e8re les ressources dans le cache avant d’essayer le r\u00e9seau. Cette approche est particuli\u00e8rement efficace pour les ressources statiques qui ne changent pas souvent.<\/p>\n Utilisez les workers de service pour mettre en cache les ressources importantes pendant la phase d’installation. Il s’agit notamment du shell de votre application(HTML<\/a>, CSS<\/a>, JavaScript<\/a>) et de toutes les ressources statiques.<\/p>\n Pour le contenu dynamique, envisagez des strat\u00e9gies telles que stale-while-revalidate<\/a>, qui sert d’abord le contenu mis en cache, puis met \u00e0 jour le cache avec du contenu frais provenant du serveur.<\/p>\n Toutes les ressources ne sont pas identiques. Certaines sont essentielles pour le rendu initial, tandis que d’autres peuvent \u00eatre rendues par chargement diff\u00e9r\u00e9<\/a>. Analysez les performances de chargement de votre application pour identifier les ressources essentielles qui doivent \u00eatre charg\u00e9es en premier. Vous pouvez utiliser les directives preload et prefetch pour informer le navigateur de ces priorit\u00e9s :<\/p>\n Le chargement adaptatif adapte le contenu et les fonctionnalit\u00e9s de votre application en fonction des capacit\u00e9s de l’appareil de l’utilisateur et des conditions du r\u00e9seau. Cette technique garantit que votre PWA offre une bonne exp\u00e9rience, m\u00eame sur des r\u00e9seaux lents ou instables.<\/p>\n Mettez en \u0153uvre la d\u00e9tection des fonctionnalit\u00e9s pour proposer des ressources diff\u00e9rentes en fonction de l’appareil de l’utilisateur. Par exemple, vous pouvez proposer des images en haute r\u00e9solution aux utilisateurs disposant d’une connexion rapide et des images plus petites et compress\u00e9es aux utilisateurs disposant d’une connexion plus lente.<\/p>\n\n
![\"Cafe](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/cafe-javas.png\")
Pourquoi transformer un site WordPress en PWA est une bonne id\u00e9e<\/h2>\n
1. Plus d’engagement de la part des utilisateurs<\/h3>\n
2. Am\u00e9lioration de la vitesse du site<\/h3>\n
3. Capacit\u00e9s hors ligne<\/h3>\n
4. Les limitations traditionnelles ne s’appliquent pas<\/h3>\n
Pr\u00e9-requis au d\u00e9veloppement d’une PWA avec WordPress<\/h2>\n
\n
Les meilleurs plugins PWA pour WordPress<\/h2>\n
1. Super Progressive Web Apps<\/h3>\n
![\"L'extension](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/super-pwa.png\")
Avantages<\/h4>\n
\n
Inconv\u00e9nients<\/h4>\n
\n
Prix<\/h4>\n
2. PWA for WP & AMP<\/h3>\n
![\"PWA](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/pwa-for-wp-and-amp.png\")
Avantages<\/h4>\n
\n
Inconv\u00e9nients<\/h4>\n
\n
3. PWA<\/h3>\n
![\"PWA](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/pwa.png\")
Avantages<\/h4>\n
\n
Inconv\u00e9nients<\/h4>\n
\n
4. Instantify<\/h3>\n
![\"Instantify](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/instantify.png\")
Avantages<\/h4>\n
\n
Inconv\u00e9nients<\/h4>\n
\n
Tarifs<\/h4>\n
Comment cr\u00e9er une PWA avec un plugin WordPress : \u00e9tape par \u00e9tape<\/h2>\n
\u00c9tape 1 : Planifier votre PWA<\/h3>\n
\u00c9tape 2 : Choisir le bon plugin<\/h3>\n
\u00c9tape 3 : Installation du plugin choisi<\/h3>\n
![\"Installer](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/install-super-pwa.png\")
\u00c9tape 4 : Configurer les r\u00e9glages<\/h3>\n
![\"Ajustez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/03\/super-pwa-settings.png\")
\n
\n
\u00c9tape 5 : Tester votre nouvelle PWA<\/h3>\n
Comment cr\u00e9er une PWA avec WordPress \u00e0 partir de z\u00e9ro ?<\/h2>\n
\u00c9tape 1 : Assurer le HTTPS<\/h3>\n
2. Cr\u00e9er un manifeste d’application web<\/h3>\n
name<\/code>), son nom court (short_name<\/code>), son URL de d\u00e9marrage (start_url<\/code>), son type d’affichage (display<\/code>), sa couleur d’arri\u00e8re-plan (background_color<\/code>), sa couleur de th\u00e8me (theme_color<\/code>) et ses ic\u00f4nes (
\nicons<\/code>).<\/p>\n{\n\n\"name\": \"Your App Name\",\n\n\"short_name\": \"AppShortName\",\n\n\"start_url\": \"\/\",\n\n\"display\": \"standalone\",\n\n\"background_color\": \"#FFFFFF\",\n\n\"theme_color\": \"#000000\",\n\n\"icons\": [\n\n{\n\n\"src\": \"path\/to\/icon.png\",\n\n\"sizes\": \"192x192\",\n\n\"type\": \"image\/png\"\n\n}\n\n]\n\n}<\/code><\/pre>\nhead<\/code> du mod\u00e8le de votre site WordPress.<\/p>\n3. Impl\u00e9mentation d’un worker de service<\/h3>\n
if ('serviceWorker' in navigator) {\n\nwindow.addEventListener('load', function() {\n\nnavigator.serviceWorker.register('\/service-worker.js').then(function(registration) {\n\n\/\/ Registration was successful\n\nconsole.log('ServiceWorker registration successful with scope: ', registration.scope);\n\n}, function(err) {\n\n\/\/ registration failed :(\n\nconsole.log('ServiceWorker registration failed: ', err);\n\n});\n\n});\n\n}<\/code><\/pre>\nconst CACHE_NAME = 'your-app-cache';\n\nconst urlsToCache = [\n\n'\/',\n\n'\/styles\/main.css',\n\n'\/script\/main.js'\n\n];\n\nself.addEventListener('install', event => {\n\nevent.waitUntil(\n\ncaches.open(CACHE_NAME)\n\n.then(cache => {\n\nreturn cache.addAll(urlsToCache);\n\n})\n\n);\n\n});<\/code><\/pre>\nOptimiser une PWA WordPress<\/h2>\n
Strat\u00e9gies de mise en cache<\/h3>\n
Hi\u00e9rarchisation des ressources<\/h3>\n
\n
Chargement adaptatif<\/h3>\n