Les applications web progressives transforment la manière dont les utilisateurs utilisent les sites web. Elles sont techniquement un mélange de ce qu’une application mobile et un site web traditionnel peuvent offrir de mieux. Partir de zéro avec la technologie PWA dans WordPress vous permettra non seulement de vous améliorer, mais aussi de créer une version plus attrayante, plus accessible et plus rapide à charger de votre site web.
Cela signifie que les entreprises, les blogueurs et les créateurs numériques peuvent mieux se connecter avec leur base d’utilisateurs et fournir plus de contenu que jamais.
Si vous êtes prêt à convertir votre site WordPress en PWA, vous êtes au bon endroit. Nous vous expliquerons exactement comment construire et optimiser ces applications web, afin de garantir le succès de votre prochain projet.
Mettez-vous au travail !
Qu’est-ce qu’une PWA ?
Les applications web progressives (Progressive Web Apps ou PWA) sont un type de technologie qui combine les capacités d’un site web traditionnel et réactif avec celles d’une application mobile riche en fonctionnalités.
Selon Mozilla, les PWA utilisent des fonctionnalités web modernes pour fournir une interface web semblable à une application, accessible à partir d’un navigateur web.
Les trois composants technologiques clés des PWA sont les suivants :
- Workers de service. Les PWA utilisent des scripts qui fonctionnent indépendamment d’un site web et exécutent des actions similaires à celles qui ne pourraient être exécutées que sur la page web. Par exemple, les travailleurs de service permettent les notifications push, la synchronisation en arrière-plan et la disponibilité hors ligne. Cette dernière est possible parce que les workers de service agissent comme un réseau proxy. Les PWA peuvent mettre le contenu en cache et le diffuser en l’absence de connexion, ce qui offre une fiabilité exceptionnelle, même dans des conditions de réseau incertaines.
- Manifeste de l’application web. Le manifeste est un fichier JSON qui décrit l’application, ce qui lui permet de se présenter comme une icône d’ajout sur un smartphone. Le fichier vise à créer une interaction avec le système de l’utilisateur, y compris l’URL de démarrage, les réglages d’affichage, le nom descriptif et les icônes.
- HTTPS. Ce dernier composant est l’un des plus importants. Bien qu’il ne contribue pas directement à l’expérience de l’utilisateur, HTTPS renforce la sécurité, et la vie privée du visiteur est protégée par le cryptage des données et l’anonymat des informations.
La combinaison de ces trois technologies permet une expérience rapide et sans installation, avec une PWA totalement intégrée à la page d’accueil.
Vous pouvez voir que toutes ces pièces s’assemblent magnifiquement avec le site web et l’application du Café Javas.
Développée par TechAhead, cette PWA offre une expérience transparente entre le site web et l’application mobile. Les clients peuvent ainsi facilement passer commande à partir de leur navigateur web sans avoir à subir les frustrations d’un site web traditionnel.
Pourquoi transformer un site WordPress en PWA est une bonne idée
Transformer votre site WordPress en Progressive Web App peut considérablement améliorer votre présence numérique et l’expérience des utilisateurs. Voici pourquoi ce changement est une excellente idée :
1. Plus d’engagement de la part des utilisateurs
L’un des nombreux avantages des PWA est la possibilité d’envoyer des notifications push. Cela vous permet d’informer votre public de vos dernières nouvelles et annonces et de vous assurer que les visiteurs de votre site ne vous oublient pas. Cette caractéristique encourage les visites régulières et davantage d’interactions.
2. Amélioration de la vitesse du site
Les PWA sont également extrêmement rapides. La plupart des ressources sont mises en cache et les workers de service aident à les charger rapidement. Même si les visiteurs de votre site n’ont pas le fournisseur de réseau le plus rapide et le plus fiable, leur PWA alimentée par WordPress se chargera instantanément. Ce gain de vitesse améliore non seulement l’expérience de l’utilisateur, mais contribue également au classement dans les moteurs de recherche, car la vitesse du site est un facteur de classement pour Google.
3. Capacités hors ligne
L’un des avantages les plus convaincants des PWA est sans doute leur capacité à fonctionner hors ligne ou sur des réseaux de mauvaise qualité. Cela est possible grâce à des workers de service qui mettent en cache les ressources clés, ce qui permet aux utilisateurs d’accéder aux pages visitées précédemment sans connexion à l’internet.
4. Les limitations traditionnelles ne s’appliquent pas
Les sites web traditionnels et les applications mobiles ont chacun leurs limites. Les sites web, par exemple, dépendent fortement de la qualité du réseau et n’offrent pas les fonctionnalités des applications natives telles que les notifications push ou l’accès hors ligne. Les applications mobiles, quant à elles, exigent des utilisateurs qu’ils téléchargent et installent régulièrement des mises à jour.
Les PWA ne présentent pas ces inconvénients.
Convertir votre site WordPress en PWA, ce n’est pas seulement améliorer votre site. C’est changer la façon dont votre public interagit avec lui grâce à une plateforme plus rapide et plus attrayante qui fonctionne et s’affiche bien sur n’importe quel appareil et avec n’importe quel réseau.
Pré-requis au développement d’une PWA avec WordPress
Toute personne souhaitant créer une PWA pour WordPress devra connaitre les éléments suivants :
- Conception UX. Utilisez les principes du design UX comme point de départ pour faire de votre PWA quelque chose de convivial, que les gens voudront utiliser et avec lequel ils s’engageront.
- Compétences en HTML et CSS. Vous devrez organiser vos pages et les rendre visuellement attrayantes et réactives. Cela nécessite des connaissances en HTML et en CSS, les éléments de base de la conception web.
- Connaissances en PHP. WordPress est construit sur PHP, vous devez donc connaitre ce langage de script côté serveur pour ajuster les thèmes et les plugins et ajouter d’autres fonctionnalités de contenu dynamique à votre PWA.
- Maitrise de JavaScript. JavaScript est nécessaire pour gérer l’interactivité avec votre PWA, travailler avec des workers de service pour les fonctionnalités hors ligne et ajouter des fonctionnalités plus complexes telles que les notifications push, entre autres.
- Connaissance de WordPress. Le processus de développement sera beaucoup plus facile si vous comprenez comment fonctionnent tous les aspects de WordPress, ses API, la personnalisation des thèmes et des extensions, la gestion du contenu et les fonctions PHP spécifiques à WordPress que vous avez à votre disposition.
Les meilleurs plugins PWA pour WordPress
Si vous faites une recherche rapide sur les meilleures extensions PWA pour WordPress, vous découvrirez rapidement une gamme d’outils qui peuvent améliorer votre site web avec des fonctionnalités de type application, des temps de chargement plus rapides et d’autres caractéristiques impressionnantes.
Pour ceux qui cherchent à construire une PWA rapidement, voici plusieurs des meilleures extensions PWA actuellement disponibles pour WordPress qui pourraient accélérer votre flux de travail.
1. Super Progressive Web Apps
Développée par SuperPWA, l’extension Super Progressive Web Apps 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és et un accès à partir d’un raccourci sur l’écran d’accueil.
Avantages
- L’ajout de fonctionnalités similaires à celles d’une application, ainsi que la possibilité de fournir du contenu même hors ligne, peuvent augmenter le nombre de visites sur le site, l’engagement et d’autres indicateurs clés de performance.
- Des performances supérieures, grâce à un temps de chargement réduit et à une charge plus légère sur l’appareil, peuvent également augmenter la valeur SEO d’un site web.
- Facile à mettre en place et à configurer grâce à des réglages conviviaux.
Inconvénients
- Peut être incompatible avec certains thèmes ou extensions, ce qui nécessite des ajustements supplémentaires pour fonctionner correctement.
- Les options avancées disponibles nécessitent une meilleure compréhension des technologies web pour en tirer parti.
Prix
SuperPWA fonctionne sur un modèle freemium, ce qui signifie qu’un ensemble de fonctionnalités de base est disponible gratuitement, avec des options supplémentaires accessibles par le biais de mises à niveau. La première série de mises à jour de SuperPWA est proposée à partir de 99 $.
2. PWA for WP & AMP
L’extension PWA for WP & AMP enrichit l’expérience de l’utilisateur avec une interface semblable à celle d’une application, une compatibilité AMP PWA complète, un support multisite, un suivi UTM et la possibilité de travailler hors ligne. Elle fournit également un support pour le développement de workers de service, des bannières d’application, un manifeste d’application web et un écran d’accueil personnalisé.
Avantages
- Améliore l’engagement en permettant à votre site web d’être installé sur l’écran d’accueil.
- Prend en charge AMP
- Cache et analyse pour les interactions hors ligne inclus
Inconvénients
- L’installation est un peu plus complexe en raison de l’intégration d’AMP
3. PWA
L’extension PWA se concentre sur les éléments essentiels de la PWA, comme les workers de service, le manifeste d’application web et le support HTTPS. La PWA vise à accélérer les temps de chargement et à offrir une expérience similaire à celle d’une application sur mobile.
Avantages
- Puisque l’objectif de cette extension est de faire partie du noyau de WordPress, vous pouvez vous attendre à un codage et une compatibilité de haute qualité.
- Elle offre un moyen simple d’adopter les fonctionnalités PWA, augmentant ainsi la fiabilité, la vitesse et l’engagement de votre site web.
Inconvénients
- Les fonctionnalités avancées ne sont pas couvertes par l’extension et nécessiteront des extensions supplémentaires ou un développement personnalisé.
4. Instantify
Instantify se différencie en combinant trois fonctionnalités clés en une seule plateforme : Progressive Web Apps (PWA), Accelerated Mobile Pages (AMP) de Google et Facebook Instant Articles (FBIA). Grâce à cette combinaison, l’outil transforme votre site web pour lui donner l’aspect d’une application, accélère les temps de chargement des sites web mobiles et ouvre le contenu de votre site web aux plateformes sociales.
Avantages
- En combinant PWA, AMP et FBIA, vous n’avez pas à vous soucier de l’utilisation de différentes extensions.
- Les pages AMP sont privilégiées dans les recherches, ce qui peut potentiellement améliorer les performances de votre site web sur les moteurs de recherche en termes de visibilité.
- Engagez les utilisateurs avec des notifications push et plus encore, et monétisez votre contenu plus efficacement grâce à des publicités optimisées et à Facebook Instant Articles.
Inconvénients
- Il n’y a pas d’essai ou de plan gratuit, ce qui peut dissuader les utilisateurs qui veulent tester l’extension avant de payer.
- Les fonctionnalités étendues fournies peuvent conduire à ce que cette extension ne fonctionne pas bien avec certains thèmes si elle n’est pas correctement configurée.
Tarifs
Instantify coûte 29 $, un paiement unique pour une licence à vie. Le produit n’est pas accompagné d’un essai gratuit ou d’une garantie de remboursement, il est donc préférable d’examiner attentivement vos besoins actuels et vos exigences en matière de compatibilité avant d’acheter.
Comment créer une PWA avec un plugin WordPress : étape par étape
Construire une PWA avec WordPress est un moyen passionnant d’améliorer l’expérience mobile de votre site web, en la rendant plus rapide, plus fiable et plus attrayante. Comme nous l’avons déjà mentionné, les PWA utilisent les capacités modernes du web pour offrir aux utilisateurs des expériences similaires à celles d’une application, directement à partir de leur navigateur.
Voici un mini-guide étape par étape sur la façon de transformer votre site WordPress en PWA en utilisant l’une des extensions dont nous avons parlé.
Étape 1 : Planifier votre PWA
Avant de plonger dans les aspects techniques, vous devez planifier les fonctionnalités et les objectifs de votre PWA. Réfléchissez aux parties de votre site qui pourraient bénéficier d’un accès hors ligne, aux actions que les utilisateurs devraient pouvoir effectuer sans connexion réseau et à l’aspect que vous souhaiteriez donner à votre PWA sur l’écran d’accueil. La planification permet de s’assurer que votre PWA améliore l’expérience de l’utilisateur de manière significative.
Étape 2 : Choisir le bon plugin
Comme nous l’avons vu, il existe plusieurs extensions permettant de transformer votre site WordPress en PWA.
Évaluez chacune d’entre elles en fonction de vos besoins spécifiques. Si vous recherchez une solution simple et directe, Super Progressive Web Apps offre une configuration facile. Pour ceux qui ont besoin d’une intégration entre plusieurs outils, Instantify pourrait être une meilleure option.
Pour notre exemple d’aujourd’hui, nous utiliserons Super Progressive Web Apps.
Étape 3 : Installation du plugin choisi
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, en recherchant l’extension par son nom et en cliquant sur Installer maintenant. Après l’installation, cliquez sur Activer.
Étape 4 : Configurer les réglages
Après l’activation, vous trouverez les réglages de l’extension dans le menu Réglages de votre tableau de bord WordPress.
Ici, vous pouvez configurer différents aspects de votre PWA, tels que :
-
- Nom de l’application. Le nom de votre PWA tel qu’il apparaitra sur l’écran d’accueil.
- Description. Une brève description de votre application.
- Page de démarrage. La page que votre PWA chargera en premier.
- Couleur du thème. La couleur de la barre d’outils.
- Couleur d’arrière-plan. La couleur d’arrière-plan de l’écran de démarrage.
- Icône. Sélectionnez une image qui servira d’icône à votre PWA.
Une fois les modifications effectuées, cliquez sur Enregistrer les réglages.
Étape 5 : Tester votre nouvelle PWA
Une fois les réglages configurés, il est essentiel de tester votre PWA sur différents appareils. Utilisez Chrome DevTools ou des outils similaires pour simuler différents appareils ou testez directement sur votre appareil mobile en ajoutant votre site à l’écran d’accueil.
Par exemple, si vous utilisez un appareil iOS, vous devrez vider le cache de votre navigateur mobile avant de visiter votre site web.
Cliquez sur le bouton Partager, puis sur Options. Cliquez sur Ajouter à l’écran d’accueil. Fermez votre navigateur, puis cliquez sur l’icône de l’application qui vient d’être ajoutée à votre écran d’accueil. Parcourez quelques pages du site web, déconnectez-vous d’Internet, puis essayez à nouveau d’accéder à ces mêmes pages.
Si elles se chargent, votre PWA est opérationnelle !
Comment créer une PWA avec WordPress à partir de zéro ?
Pour ceux qui recherchent plus de contrôle et de personnalisation, la conversion manuelle de votre site WordPress en PWA peut être la meilleure solution.
Cette méthode est plus technique et nécessite une bonne compréhension des principes de développement web. Veillez donc à revoir les pré-requis énoncés précédemment pour vous assurer que vous êtes en mesure de la mener à bien.
Étape 1 : Assurer le HTTPS
La sécurisation de votre site par HTTPS n’est pas négociable pour les PWA. HTTPS crypte les données entre votre site web et ses visiteurs, ce qui permet de se prémunir contre les fuites de données et autres problèmes de ce type.
Vous pouvez obtenir un certificat SSL gratuit auprès de Let’s Encrypt s’il n’est pas déjà fourni avec votre pack d’hébergement.
La procédure d’installation varie en fonction de votre fournisseur d’hébergement. Nombre d’entre eux proposent des options d’installation du SSL en un seul clic. Consultez la documentation d’assistance de votre hébergeur pour obtenir des instructions spécifiques.
Après avoir installé 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 ou modifier le fichier .htaccess de votre site si vous êtes à l’aise avec les modifications manuelles.
2. Créer un manifeste d’application web
Le manifeste de l’application web est un fichier JSON qui contrôle la façon dont votre PWA apparait aux utilisateurs et comment elle se lance. Il comprend le nom, les icônes et l’URL de démarrage de votre application, entre autres réglages.
Pour commencer, créez un fichier JSON nommé manifest.json. Ce fichier doit contenir des informations clés sur votre application, telles que son nom (name), son nom court (short_name), son URL de démarrage (start_url), son type d’affichage (display), sa couleur d’arrière-plan (background_color), sa couleur de thème (theme_color) et ses icônes (
icons).
Voici à quoi devrait ressembler le code, selon les MDN Web Docs.
{
"name": "Your App Name",
"short_name": "AppShortName",
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#000000",
"icons": [
{
"src": "path/to/icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}Ajoutez un lien vers le fichier manifest.json dans la section head du modèle de votre site WordPress.
Utilisez ensuite des outils comme Lighthouse de Google pour tester et valider l’implémentation du manifeste de votre application web.
3. Implémentation d’un worker de service
Les workers de service agissent comme un proxy entre votre application web et le monde extérieur. Ils sont essentiels pour les fonctionnalités hors ligne, les notifications push et la mise en cache des ressources.
Pour en créer un, vous devez créer un nouveau fichier JavaScript. Appelez-le service-worker.js et placez-le dans le répertoire racine de votre thème WordPress. Ce fichier contiendra la logique de mise en cache des ressources, d’interception des requêtes réseau et de gestion des fonctionnalités hors ligne.
Vous devez enregistrer votre worker de service depuis le JavaScript de votre application web. Généralement, cela se fait dans un fichier JavaScript principal qui s’exécute sur votre page web.
Voici un exemple d’enregistrement d’un worker de service à partir de Borstch:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}Dans votre fichier service-worker.js, mettez en œuvre la logique de mise en cache des ressources statiques, d’interception des requêtes de récupération et de service du contenu à partir du cache lorsque vous n’êtes pas en ligne.
Voici un exemple de base pour mettre en cache quelques ressources :
const CACHE_NAME = 'your-app-cache';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});Les tests sont indispensables pour s’assurer que votre worker de service se comporte comme prévu. Utilisez le panneau Application dans Chrome DevTools pour inspecter les agents de service enregistrés, les ressources mises en cache, etc.
Optimiser une PWA WordPress
L’optimisation de votre PWA WordPress est la dernière chose à faire pour garantir la vitesse, la fiabilité et la fonctionnalité. Nous allons nous plonger dans quelques techniques d’optimisation avancées, en nous concentrant sur les stratégies de mise en cache, la priorisation des ressources et le chargement adaptatif pour différentes vitesses de connexion.
Stratégies de mise en cache
La mise en cache est un élément clé de l’optimisation des PWA, selon Smashing Magazine. Elle permet à votre application de se charger plus rapidement en stockant des copies des ressources. La mise en œuvre d’une stratégie de mise en cache d’abord garantit que votre application récupère les ressources dans le cache avant d’essayer le réseau. Cette approche est particulièrement efficace pour les ressources statiques qui ne changent pas souvent.
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, CSS, JavaScript) et de toutes les ressources statiques.
Pour le contenu dynamique, envisagez des stratégies telles que stale-while-revalidate, qui sert d’abord le contenu mis en cache, puis met à jour le cache avec du contenu frais provenant du serveur.
Hiérarchisation des ressources
Toutes les ressources ne sont pas identiques. Certaines sont essentielles pour le rendu initial, tandis que d’autres peuvent être rendues par chargement différé. Analysez les performances de chargement de votre application pour identifier les ressources essentielles qui doivent être chargées en premier. Vous pouvez utiliser les directives preload et prefetch pour informer le navigateur de ces priorités :
- Preload. Utilisez cette directive pour les ressources nécessaires à la page en cours. Elle indique au navigateur de récupérer ces ressources au début du processus de chargement.
- Prefetch. À utiliser pour les ressources qui pourraient être nécessaires lors de navigations ultérieures. Elle suggère au navigateur de récupérer ces ressources lorsqu’il est inactif.
Chargement adaptatif
Le chargement adaptatif adapte le contenu et les fonctionnalités de votre application en fonction des capacités de l’appareil de l’utilisateur et des conditions du réseau. Cette technique garantit que votre PWA offre une bonne expérience, même sur des réseaux lents ou instables.
Mettez en œuvre la détection des fonctionnalités pour proposer des ressources différentes en fonction de l’appareil de l’utilisateur. Par exemple, vous pouvez proposer des images en haute résolution aux utilisateurs disposant d’une connexion rapide et des images plus petites et compressées aux utilisateurs disposant d’une connexion plus lente.
Vous pouvez utiliser l’API d’informations sur le réseau pour détecter la vitesse de connexion de l’utilisateur et adapter le comportement de votre application en conséquence. Par exemple, vous pouvez choisir de ne charger que le contenu essentiel lorsque la connexion est lente, en reportant les ressources non critiques jusqu’à ce que la connexion s’améliore.
Respectez les normes de Google
Transformer votre site WordPress en PWA est une décision intelligente pour améliorer l’expérience des utilisateurs mobiles. Mais vous devez respecter les normes PWA de Google pour que cela soit efficace.
Les normes PWA de Google mettent l’accent sur la sécurité, l’expérience utilisateur et l’accessibilité :
- Les sites doivent utiliser le protocole HTTPS et être responsives sur les appareils mobiles
- Permettre l’accès hors ligne aux URL des applications et inclure des métadonnées pour la fonction Ajouter à l’écran d’accueil.
- Ils doivent se charger rapidement, fonctionner sur différents navigateurs et assurer des transitions de page fluides sans dépendance au réseau.
- Toutes les pages doivent avoir des URL uniques.
Résumé
Les applications web progressives représentent une avancée significative dans l’amélioration de l’engagement de l’utilisateur et de l’accessibilité sur le web. En intégrant les capacités des sites web traditionnels aux fonctionnalités avancées des applications mobiles, les PWA offrent une expérience transparente, semblable à celle d’une application, sans qu’il soit nécessaire de télécharger des applications dans la boutique en ligne.
C’est dans cet esprit que nous avons exploré aujourd’hui le potentiel de transformation des PWA pour les sites WordPress, en soulignant leurs avantages et en offrant des conseils sur la manière de créer les vôtres à l’aide d’extensions WordPress ou par codage manuel. Nous espérons que vous avez trouvé cela utile.
Si vous ne l’avez pas encore fait, allez-vous bientôt transformer votre site WordPress en PWA ?
Laisser un commentaire