Comment transformer votre site WordPress en PWA en 6 étapes

Transformez facilement votre blog ou site vitrine WordPress en PWA sans passer par une extension dédiée ! Découvrez les étapes clés pour améliorer les performances, l’expérience utilisateur et boostez votre SEO avec un site rapide, fiable et installable comme une application mobile.

Cet article prend 6 minutes à lire et comporte 1474 mots.

Introduction

Pass­er son site Word­Press en Pro­gres­sive Web App (PWA) n’est plus réservé aux géants du web ! J’ai passé ce site en PWA en moins de 5 min­utes — mais avec l’aide de chat­G­PT, j’en con­viens 😉 Ce qui donne à cet arti­cle un statut par­ti­c­uli­er : après m’être servi de chat­G­PT pour accélér­er ce blog, je m’en suis égale­ment servi pour établir la trame de l’ar­ti­cle… j’ai gag­né du temps, la rédac­tion en a été sim­pli­fiée.

Avec quelques ajuste­ments sim­ples, un blog ou un site vit­rine peut devenir rapi­de, fiable et instal­lable comme une appli­ca­tion mobile, sans utilis­er d’ex­ten­sion dédiée.

Voyons ensem­ble com­ment faire pro­pre­ment, avec unique­ment du code et deux exten­sions, une pour le code et une pour la mise en cache.

C’est quoi une PWA et pourquoi l’utiliser sur un blog ou sur un site vitrine ?

Une appli­ca­tion web pro­gres­sive ou PWA (Pro­gres­sive Web App) offre une expéri­ence flu­ide, même non con­nec­tée, et s’in­stalle sur smart­phone comme une appli­ca­tion Android ou iOS native. De plus, la PWA offre des avan­tages non nég­lige­ables pour un blog ou un site vit­rine :

• un temps de charge­ment ultra rapi­de.
• une lec­ture hors ligne pos­si­ble.
• une meilleure fidéli­sa­tion (icône sur l’écran d’ac­cueil).
• une SEO amélioré (Google aime les sites rapi­des et fiables).

Prérequis

Avant de com­mencer :

• Votre site doit être en HTTPS (cer­ti­fi­cat SSL act­if).
• Votre thème Word­Press doit être respon­sive (adap­té au mobile). Un thème respon­sive first et léger tel qu’Astra sera par­fait.
• Vous devez pou­voir accéder à votre héberge­ment via FTP (ou via un ges­tion­naire de fichiers).
• Même si ce n’est pas indis­pens­able, un édi­teur de code vous apportera plus de con­fort pour éditer et adapter les bouts de code pro­posés.
• Pensez à faire une sauve­g­arde avant toute mod­i­fi­ca­tion !

Étape 1 : Ajouter un manifeste

Le fichi­er manifest.json est un fichi­er de con­fig­u­ra­tion essen­tiel pour trans­former votre site en Pro­gres­sive Web App (PWA). Il définit des méta­don­nées comme le nom du site, l’icône, les couleurs et le com­porte­ment lors de l’in­stal­la­tion.

Ce fichi­er per­met à votre site de s’af­fich­er comme une appli­ca­tion native sur les appareils mobiles, avec la pos­si­bil­ité de l’a­jouter à l’écran d’ac­cueil et d’of­frir une expéri­ence hors ligne. En résumé, il améliore l’in­té­gra­tion et l’ex­péri­ence util­isa­teur de votre site web sur mobile.

Créez le fichi­er manifest.json à la racine de votre site et insérez‑y le code suiv­ant :

{
  "name": "Nom de votre site",
  "short_name": "NomCourt",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1976d2",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/wp-content/uploads/[chemin vers votre fichier favicon + nom de fichier]",
      "sizes": "192x192",
      "type": "image/png" // ou jpeg, ou gif…
    },
    {
      "src": "/wp-content/uploads/[chemin vers votre fichier favicon + nom de fichier]",
      "sizes": "512x512",
      "type": "image/png" // ou jpeg, ou gif…
    }
  ]
}

Étape 2 : Créer un Service Worker

Le fichi­er sw.js (Ser­vice Work­er) est un script JavaScript qui s’exé­cute en arrière-plan de votre site web, per­me­t­tant de gér­er des fonc­tion­nal­ités comme le cache, la ges­tion des noti­fi­ca­tions push, et le fonc­tion­nement hors ligne.

Il inter­cepte les requêtes réseau, ce qui per­met de met­tre en cache des ressources (comme des pages et des images) et de les servir même sans con­nex­ion Inter­net. En résumé, il per­met d’amélior­er la per­for­mance, la fia­bil­ité et l’ex­péri­ence util­isa­teur de votre site, notam­ment pour les PWA.

À la racine de votre site, créez un fichi­er sw.js :

const CACHE_NAME = 'static-cache-v1';
const urlsToCache = [
  '/',
  '/offline.html',
  '/wp-content/themes/[votre-theme]/style.css',
  '/wp-content/themes/[votre-theme]/js/main.js'
];

// Installation
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

// Activation
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => 
      Promise.all(
        cacheNames.filter((cacheName) => cacheName !== CACHE_NAME)
                  .map((cacheName) => caches.delete(cacheName))
      )
    )
  );
});

// Fetch
self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request)
      .catch(() => caches.match(event.request) || caches.match('/offline.html'))
  );
});

Étape 3 : Enregistrer le manifeste JSON et le Service Worker

Ajoutez un bout de code via Code Snip­pets :

add_action('wp_head', function() {
    echo '<link rel="manifest" href="/manifest.json">';
    echo '<meta name="theme-color" content="#0d6efd">';
});

add_action('wp_footer', function() {
    ?>
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js')
          .then(function() { console.log('Service Worker enregistré !'); });
      }
	self.addEventListener('activate', function(event) {
	  event.waitUntil(
		caches.keys().then(cacheNames => {
		  return Promise.all(
			cacheNames.filter(name => name !== CACHE_NAME)
			  .map(name => caches.delete(name))
		  );
		}).then(() => self.clients.claim())
	  );
	});
	</script>
    <?php
});

Étape 4 : Prévoir une page offline

Si votre héberge­ment est momen­tané­ment indisponible, une page sta­tique sera servie aux vis­i­teurs. Pour cela, créez un fichi­er offline.html :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hors connexion</title>
  <style>
    body {
      background: #fafafa;
      color: #333;
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 50px;
    }
    h1 {
      font-size: 2em;
      color: #1976d2;
    }
    p {
      font-size: 1.2em;
    }
    .logo {
      width: 100px;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <img src="/icons/icon-192x192.png" alt="Logo" class="logo">
  <h1>Vous êtes hors connexion</h1>
  <p>Pas d'inquiétude ! Dès que vous retrouverez Internet, tout redeviendra normal.</p>
</body>
</html>

Étape 5 : Mettre en cache vos pages WordPress avec “Serve Static”

Pour que votre Ser­vice Work­er fonc­tionne effi­cace­ment, vous devez servir des pages sta­tiques.
➡️ Le plu­g­in “Serve Sta­t­ic – Auto­mat­ic Word­Press Sta­t­ic Page Gen­er­a­tor” est par­fait pour cela !

Serve Sta­t­ic per­met de met­tre en cache la total­ité des pages de votre site. Les fichiers générés sont au for­mat HTML et ne néces­si­tent pas d’ap­pel en base de don­nées. D’où une plus grande réac­tiv­ité et des temps de charge­ment large­ment inférieurs.

Fonctionnement de Serve Static

• À chaque pub­li­ca­tion ou mise à jour d’une page/article, une ver­sion HTML sta­tique est générée.
• Les vis­i­teurs accè­dent directe­ment aux fichiers sta­tiques (sans exé­cuter PHP ou MySQL).
• Com­pat­i­ble avec votre Ser­vice Work­er pour une nav­i­ga­tion rapi­de et fiable.

Configuration de Serve Static

Après avoir instal­lé et activé l’ex­ten­sion, ren­dez-vous à Serv­er Sta­t­ic > Set­tings dans le menu latéral gauche de l’ad­min­is­tra­tion.

Con­fig­u­ra­tion recom­mandée :

• Activez la généra­tion automa­tique.
• Excluez les pages dynamiques si besoin (admin, for­mu­laires, etc.).

Une fois la con­fig­u­ra­tion ter­minée, ren­dez-vous à Serv­er Sta­t­ic > Cache gen­er­a­tor dans le menu latéral gauche de l’ad­min­is­tra­tion et cliquez sur le bou­ton “Cre­ate Cache Files”, les fichiers sta­tiques seront générés.

Étape 6 : Tester votre PWA

Utilisez Chrome Dev­Tools > Light­house pour véri­fi­er les per­for­mances, l’ac­ces­si­bil­ité, si l’op­tion PWA instal­lable est détec­tée.

Testez égale­ment l’ajout du site à l’écran d’ac­cueil sur un mobile Android ou iOS.

Mon expérience avec mon blog

Après avoir trans­for­mé mon pro­pre blog Word­Press en PWA en suiv­ant cette méth­ode, j’ai con­staté des amélio­ra­tions sen­si­bles :

• le score Page­speed Insights mobile est passé de 59 à 88 sans autre opti­mi­sa­tion ! 🚀
• le score Page­speed Insights desk­top a atteint 99.
• le temps de charge­ment perçu par les util­isa­teurs a été divisé par deux.

Bref : Les gains en per­for­mance et en expéri­ence util­isa­teur sont réels, avec très peu de tra­vail par rap­port aux béné­fices obtenus.

Limites et précautions

• Cette méth­ode est idéale pour un blog ou un site vit­rine.
• Pour un site avec forte inter­ac­tion util­isa­teur (comme une bou­tique WooCom­merce), un Ser­vice Work­er spé­ci­fique sera néces­saire.
• Pensez à tester votre nav­i­ga­tion offline sur plusieurs pages !
• Serve Sta­t­ic peut bug­ger : j’ai remar­qué qu’à chaque fois que j’en­reg­istre ne serait-ce qu’un brouil­lon, l’ensem­ble des fichiers de cache s’ef­facent.

📋 Checklist rapide

Étape	Action à réalis­er	Statut
HTTPS activé	Assurez-vous que votre site utilise un cer­ti­fi­cat SSL.	🔲
Thème respon­sive	Votre thème Word­Press doit être mobile-friend­ly.	🔲
Créer manifest.json	Ajouter les méta­don­nées de votre site pour l’in­stal­la­tion.	🔲
Ajouter <link rel="manifest"> dans <head>	Lier votre man­i­fest au site via header.php.	🔲
Créer sw.js (Ser­vice Work­er)	Gér­er le cache des pages et des ressources.	🔲
Enreg­istr­er le Ser­vice Work­er	Ajouter le script d’enregistrement dans footer.php.	🔲
Créer offline.html	Prévoir une page sim­ple pour les vis­i­teurs hors-ligne.	🔲
Installer “Serve Sta­t­ic”	Génér­er des pages HTML sta­tiques automa­tique­ment.	🔲
Tester avec Chrome Light­house	Véri­fi­er la con­for­mité et la per­for­mance de votre PWA.	🔲
Ajouter à l’écran d’ac­cueil	Tester l’ajout de votre site sur un mobile Android/iOS.	🔲

Conclusion (motivante)

En quelques étapes sim­ples et légères, votre blog ou site vit­rine Word­Press devient aus­si rapi­de qu’une appli­ca­tion mobile.
Vous offrez à vos vis­i­teurs une expéri­ence plus flu­ide, plus fiable, et vous boost­ez votre référence­ment naturel.
N’at­ten­dez plus : trans­formez votre Word­Press en PWA dès aujour­d’hui et passez dans une nou­velle dimen­sion du web !