Imaginez que vos clients puissent ajouter votre boutique sur leur écran d’accueil, acheter même sans connexion, ou encore recevoir des notifications push comme s’ils utilisaient une application mobile native. Pas besoin de payer des développeurs d’applications iOS ou Android, ni d’apprendre à coder en Swift ou Kotlin. Tout cela est possible… grâce à une PWA — une Progressive Web App.
Le concept est simple : une PWA, c’est un site web amélioré qui adopte les comportements d’une application. Et la bonne nouvelle, c’est que WooCommerce — la plateforme e-commerce la plus populaire pour WordPress — peut devenir une PWA en quelques étapes seulement.
Dans ce tutoriel complet, vous allez découvrir :
- ce qu’est une PWA et pourquoi c’est un atout pour votre boutique,
- comment transformer votre site WooCommerce en PWA à l’aide d’un plugin gratuit,
- puis comment aller plus loin en créant vous-même une PWA manuellement, sans plugin.
Tout sera expliqué simplement, pas à pas, sans jargon inutile. Prenez un café, détendez-vous, et préparez-vous à donner une nouvelle dimension à votre boutique.
- Comprendre ce qu’est une PWA (et pourquoi vous en avez besoin)
- Préparer votre boutique WooCommerce
- La méthode la plus simple : utiliser un plugin PWA pour WooCommerce
- La méthode manuelle : pour comprendre ce qui se passe “sous le capot”
- Le cœur d’une PWA : le Service Worker
- Améliorer l’expérience hors ligne
- Optimiser le cache et la performance
- Tester votre PWA
- Aller plus loin : notifications et installation
- Cas concret : l’expérience d’un commerçant local
- Votre boutique WooCommerce, plus proche que jamais de vos clients
Comprendre ce qu’est une PWA (et pourquoi vous en avez besoin)
Avant de mettre les mains dans le cambouis, prenons un instant pour comprendre ce que cache ce drôle de mot : Progressive Web App.
Une PWA, c’est avant tout un site web classique (HTML, CSS, JavaScript, PHP…) qui a été enrichi de fonctionnalités modernes grâce à trois éléments clés :
- un fichier manifeste (manifest.json) qui décrit comment le site doit s’afficher sur un smartphone (icône, couleur du thème, mode plein écran, etc.)
- un service worker, un script JavaScript qui s’exécute en arrière-plan pour gérer le cache et permettre la navigation hors ligne
- un HTTPS obligatoire, pour garantir la sécurité et l’accès à ces fonctions.
Résultat ?
Votre boutique WooCommerce devient installable comme une application sur téléphone, fonctionne hors connexion, et se charge beaucoup plus vite.
Et ce n’est pas qu’une question de confort. Les chiffres parlent d’eux-mêmes : selon Google, une PWA peut augmenter le taux de conversion de 20 % à 50 %. Quand on sait qu’une seconde de chargement en trop peut faire fuir un client, on comprend vite pourquoi les grandes marques (Twitter, Starbucks, Pinterest…) ont sauté le pas.
Préparer votre boutique WooCommerce
Avant de transformer votre boutique, il faut s’assurer que votre site est prêt à accueillir une PWA. Rien de sorcier, mais quelques vérifications s’imposent.
a) Votre site doit être en HTTPS
Sans connexion sécurisée, impossible d’utiliser un service worker. Si votre site affiche encore « Non sécurisé » dans la barre d’adresse, il est temps d’activer le SSL. La plupart des hébergeurs (comme OVH, o2switch, ou Hostinger) proposent des certificats Let’s Encrypt gratuits. Une fois activé, vérifiez que toutes les pages se chargent bien en HTTPS et redirigez les anciennes adresses HTTP vers leur version sécurisée.
b) Mettez à jour WordPress, WooCommerce et votre thème
Une PWA repose sur les technologies modernes du navigateur. Assurez-vous donc que votre site est à jour, sous peine d’avoir des incompatibilités ou des lenteurs.
c) Vérifiez les performances
Une PWA amplifie ce qui existe déjà. Si votre site est lent à la base, il le restera, même avec une couche « PWA » par-dessus. Utilisez un outil comme PageSpeed Insights pour repérer les blocages et optimiser vos images, scripts et cache.
Une fois ces bases en place, passons à la pratique !
La méthode la plus simple : utiliser un plugin PWA pour WooCommerce
Pour les débutants (et même pour les développeurs pressés), les plugins PWA sont une excellente porte d’entrée. Ils vous évitent de coder à la main tout ce qui concerne le manifeste, le service worker et la configuration.
Étape 1 : Installer le plugin
Connectez-vous à votre tableau de bord WordPress, puis rendez-vous dans Extensions > Ajouter. Recherchez “SuperPWA” ou “PWA for WP & AMP”. Ces deux extensions sont gratuites et très populaires. Installez celle de votre choix, puis activez-la.
Pour ce tutoriel, prenons l’exemple de SuperPWA (facile à configurer et compatible WooCommerce).
Étape 2 : Configurer les options principales
Dans le menu latéral, cliquez sur SuperPWA > Settings. Vous allez pouvoir personnaliser plusieurs paramètres :
- App Name : le nom qui s’affichera sous l’icône sur l’écran d’accueil (ex : “Ma Boutique Bio”) ;
- App Short Name : une version courte du nom, utilisée si le titre est trop long ;
- App Icon : importez une image carrée d’au moins 512×512 pixels, idéalement au format PNG transparent ;
- Splash Screen : choisissez la couleur d’arrière-plan qui s’affichera pendant le chargement ;
- Start URL : indiquez la page d’accueil de votre boutique (souvent “/”).
Cliquez sur “Save Settings”, et c’est déjà opérationnel !
Étape 3 : Tester la PWA
Ouvrez votre boutique depuis un smartphone Android avec Google Chrome. Vous devriez voir une petite bannière : “Ajouter à l’écran d’accueil”. En l’installant, vous obtenez une icône d’application identique à celle d’une app native.
Lorsque vous l’ouvrez, votre boutique s’affiche en plein écran, sans barre d’adresse ni onglets. Et cerise sur le gâteau : si vous coupez Internet, certaines pages restent accessibles grâce au cache local géré par le service worker.
Étape 4 : Personnaliser les comportements avancés
SuperPWA vous permet d’aller plus loin :
- définir quelles pages doivent être mises en cache (accueil, fiches produits, panier, etc.),
- choisir la stratégie de mise en cache (cache-first, network-first, etc.),
- ou encore activer les notifications push avec Firebase.
Même sans toucher au code, vous obtenez déjà une PWA complète et fonctionnelle.
La méthode manuelle : pour comprendre ce qui se passe “sous le capot”
Si vous aimez comprendre comment les choses fonctionnent, ou si vous souhaitez personnaliser votre boutique au maximum, vous pouvez créer votre boutique WooCommerce PWA sans plugin. C’est un peu plus technique, mais rien d’insurmontable.
Étape 1 : Créer le fichier manifest.json
Ce fichier indique au navigateur comment afficher et identifier votre PWA. Créez un fichier nommé manifest.json à la racine de votre site (souvent dans /public_html ou /wp-content/uploads si vous n’avez pas accès directement à la racine).
Voici un exemple simple :
{
"name": "Ma Boutique WooCommerce",
"short_name": "MaBoutique",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0073aa",
"icons": [
{
"src": "/wp-content/uploads/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/wp-content/uploads/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Ce code dit simplement :
– quel nom doit porter l’application,
– quelle URL ouvrir au lancement,
– quelles couleurs utiliser,
– et quelles icônes afficher.
Ensuite, dans votre fichier header.php, ajoutez la ligne suivante dans la balise <head> :
<link rel="manifest" href="/manifest.json">C’est ce lien qui indique au navigateur que votre site possède un manifeste et peut être installé comme une application.
Le cœur d’une PWA : le Service Worker
Si le manifeste donne à votre boutique son apparence d’application, le Service Worker, lui, lui donne ses super-pouvoirs. C’est un petit script JavaScript qui agit comme un intermédiaire entre le navigateur et le serveur. Il peut intercepter les requêtes, stocker des fichiers en cache et même permettre la navigation sans connexion Internet.
Pour simplifier : imaginez le Service Worker comme un employé malin placé entre votre client et votre site. Quand un visiteur charge une page, cet employé se souvient des fichiers déjà téléchargés (images, styles, produits, etc.) et les ressort rapidement sans avoir besoin d’aller chaque fois demander au serveur.
C’est lui qui rend une PWA si rapide et fluide, même sur un réseau faible.
Étape 1 : créer le fichier du Service Worker
À la racine de votre site, créez un fichier nommé service-worker.js. Collez-y ce code de base :
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?const CACHE_NAME = 'woocommerce-pwa-v1';
const urlsToCache = [
'/',
'/wp-content/themes/votre-theme/style.css',
'/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js'
];
// Installation du Service Worker
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
// Interception des requêtes
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
// Retourne la version en cache si elle existe
return response || fetch(event.request);
})
);
});Ce petit script :
- crée un cache nommé « woocommerce-pwa-v1 » ;
- stocke des fichiers essentiels pour votre site (accueil, CSS, JavaScript) ;
- puis intercepte les requêtes pour servir les fichiers depuis le cache si possible.
Bien sûr, vous pouvez adapter la liste urlsToCache en y ajoutant vos propres pages, comme /boutique/, /panier/, ou /produit/nom-du-produit/.
Étape 2 : enregistrer le Service Worker dans votre site
Ajoutez maintenant ce bout de code dans le footer.php de votre thème, juste avant la balise </body> :
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker enregistré :', reg))
.catch(err => console.error('Erreur Service Worker :', err));
});
}
</script>Dès qu’un visiteur arrive sur votre site, le navigateur va enregistrer ce Service Worker et commencer à mettre en cache les pages que vous avez définies.
Étape 3 : vérifier son fonctionnement
Pour tester, ouvrez votre boutique WooCommerce avec Google Chrome, puis appuyez sur F12 pour ouvrir les Outils de développement. Dans l’onglet Application, sélectionnez Service Workers : vous devriez voir votre fichier service-worker.js affiché comme “activated and running”.
Si vous rechargez la page, coupez votre connexion Internet, et tentez à nouveau d’accéder à votre boutique, surprise : elle s’affiche toujours ! Les fichiers sont désormais chargés directement depuis le cache.
Améliorer l’expérience hors ligne
Par défaut, votre boutique ne peut pas afficher toutes les pages hors connexion (notamment les fiches produits non encore visitées). Mais il est possible d’améliorer ce comportement.
Ajouter une page “hors ligne” personnalisée
Créez une page WordPress nommée “Hors ligne” avec un message simple du type :
“Vous êtes actuellement hors connexion. Revenez dès que votre connexion est rétablie pour continuer vos achats.”
Ensuite, ajoutez dans votre service-worker.js :
const OFFLINE_URL = '/hors-ligne/';
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).catch(() => caches.match(OFFLINE_URL))
);
});Ainsi, si un utilisateur tente d’accéder à une page non encore mise en cache, il sera redirigé vers votre page “hors ligne”. Une manière élégante d’éviter les erreurs “Page non disponible”.
Optimiser le cache et la performance
Les PWA brillent surtout par leur vitesse. Mais pour que votre boutique WooCommerce reste performante, il faut gérer intelligemment le cache.
Le code précédent stocke simplement quelques fichiers, mais WooCommerce génère beaucoup de contenu dynamique (panier, commandes, stock, etc.). Il ne faut donc pas tout mettre en cache n’importe comment.
a) Ne pas mettre en cache les pages dynamiques
Les pages comme /panier/ ou /commande/ doivent toujours être chargées depuis le réseau pour afficher les informations à jour. Vous pouvez les exclure ainsi :
self.addEventListener('fetch', event => {
if (event.request.url.includes('/panier') || event.request.url.includes('/commande')) {
return;
}
});b) Mettre à jour le cache automatiquement
Chaque fois que vous modifiez votre site (nouveaux produits, changement de design…), pensez à changer le nom du cache dans votre fichier service worker (woocommerce-pwa-v1 devient woocommerce-pwa-v2, par exemple).
Cela forcerait le navigateur à retélécharger les nouvelles ressources.
Tester votre PWA
Avant de crier victoire, il faut s’assurer que tout fonctionne comme prévu.
Ouvrez Google Chrome, puis allez sur votre boutique. Appuyez sur F12 → Lighthouse → Progressive Web App, puis lancez l’audit.
Cet outil de Google va analyser votre site et lui attribuer une note de compatibilité PWA. Il vous indiquera :
- si le manifeste est bien détecté,
- si le Service Worker fonctionne,
- si le site est accessible en HTTPS,
- et si votre boutique est installable sur mobile.
Une note supérieure à 90/100 signifie que votre boutique est parfaitement prête à être utilisée comme une application.
Aller plus loin : notifications et installation
Une fois votre PWA fonctionnelle, vous pouvez lui ajouter des fonctionnalités avancées.
Notifications push
Grâce à des services comme Firebase Cloud Messaging, vous pouvez envoyer des notifications à vos clients directement sur leur téléphone : “Un nouveau produit est disponible !”, “Votre commande a été expédiée !”, etc.
Les plugins comme PWA for WP & AMP ou OneSignal intègrent cette fonction sans une ligne de code.
Écran d’installation
Pour encourager vos visiteurs à installer la PWA, vous pouvez afficher un petit bandeau personnalisé : “Ajoutez notre boutique à votre écran d’accueil pour un accès rapide !”
C’est possible via un simple script JavaScript, ou en utilisant les options incluses dans SuperPWA.
Cas concret : l’expérience d’un commerçant local
Prenons l’exemple de Sophie, gérante d’une boutique de bijoux artisanaux sous WooCommerce. Elle n’avait pas les moyens de développer une application mobile, mais ses clients se plaignaient que le site mettait trop de temps à charger sur smartphone.
Après avoir installé SuperPWA et activé le cache hors ligne, ses clientes peuvent maintenant parcourir les produits même dans le métro. Les ventes ont augmenté de 17 % en deux mois, simplement parce que la navigation est devenue fluide et agréable.
Moralité : une PWA, ce n’est pas un gadget. C’est un vrai levier de croissance, surtout pour les petites entreprises qui veulent rivaliser avec les grands sites e-commerce.
Votre boutique WooCommerce, plus proche que jamais de vos clients
Transformer votre boutique WooCommerce en PWA, c’est un peu comme offrir une seconde vie à votre site web. Vous le rendez plus rapide, plus accessible et surtout plus moderne. Vos clients peuvent l’installer comme une vraie application, le consulter sans connexion, et profiter d’une expérience fluide où qu’ils soient.
L’intérêt majeur de cette approche, c’est qu’elle ne nécessite pas de refonte complète :
en quelques clics avec un plugin comme SuperPWA, ou en ajoutant deux fichiers à la main (manifest.json et service-worker.js), vous obtenez une boutique capable de rivaliser avec les applications natives.
Et contrairement à une application classique, pas besoin de passer par l’App Store ou Google Play. Votre site reste 100 % libre, tout en offrant les mêmes avantages.
Les Progressive Web Apps incarnent une nouvelle ère du web : celle où les sites deviennent des expériences interactives, rapides et proches de l’utilisateur. Alors, si vous gérez une boutique WooCommerce et que vous voulez fidéliser vos clients sans exploser votre budget, la PWA est sans doute le meilleur investissement que vous puissiez faire cette année.
