Transformer votre site en PWA installable avec mode hors ligne

Prompt

Agis comme un développeur web spécialisé dans les Progressive Web Apps, les service workers et les stratégies de cache.

Contexte :
- Site ou application : {{site}}
- Stack et hébergement : {{stack}}
- Niveau de fonctionnement hors ligne : {{niveau_hors_ligne}}
- Priorités : {{priorites}}

Si le site comporte des espaces privés, des données personnelles ou du contenu qui change souvent, demande-moi comment ils sont gérés avant de décider ce qui sera mis en cache.

Livrables :
1. Le manifest de l'application web : nom, nom court, couleurs, display, start_url, scope et icônes (192 et 512 px, plus une version maskable), avec les balises à ajouter au HTML.
2. Le service worker avec une stratégie par type de ressource, expliquée dans un tableau : précache du squelette de l'application, stale-while-revalidate pour le CSS, le JS et les images, network-first avec délai maximal pour le HTML, et réseau uniquement pour l'API authentifiée.
3. La page hors ligne et la façon de la servir quand le réseau échoue.
4. Le versionnage des caches, le nettoyage des anciens dans l'événement activate et un flux de mise à jour qui prévient l'utilisateur d'une nouvelle version au lieu de recharger par surprise.
5. Le code d'enregistrement du service worker et l'alternative avec Workbox si elle convient mieux à {{stack}}.
6. Les limites connues sur iOS et Safari à vérifier, en précisant qu'il faut les contrôler dans la documentation actuelle.
7. Comment tester : panneau Application des DevTools, simulation hors ligne, audit d'installabilité et cas de test concrets.

Contraintes :
- Le site doit être servi en HTTPS ; rappelle-le si l'hébergement ne le garantit pas.
- Ne mets pas en cache des réponses contenant des données personnelles ou de session.
- N'ajoute ni notifications push ni synchronisation en arrière-plan sauf si mes priorités le demandent.
- Marque avec [À COMPLÉTER] les couleurs, noms et icônes que je ne t'ai pas fournis.

Format : tableau des stratégies, un bloc de code par fichier avec son chemin et une liste de tests.

Comment l'utiliser

Exemple d'utilisation

Exemple de résultat

const VERSION = 'v1';
const SHELL = `shell-${VERSION}`;
const PAGES = `pages-${VERSION}`;
const RESSOURCES = `ressources-${VERSION}`;
const PRECACHE = ['/', '/hors-ligne/', '/manifest.webmanifest']; // [À COMPLÉTER : CSS/JS hachés d'Astro]

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(SHELL).then((cache) => cache.addAll(PRECACHE)));
});

self.addEventListener('activate', (event) => {
  const actuels = [SHELL, PAGES, RESSOURCES];
  event.waitUntil(caches.keys().then((cles) =>
    Promise.all(cles.filter((c) => !actuels.includes(c)).map((c) => caches.delete(c)))));
});

const stocker = (nom, request, res) => {
  if (res.ok) { const copie = res.clone(); caches.open(nom).then((c) => c.put(request, copie)); }
  return res;
};

self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.method !== 'GET' || new URL(request.url).origin !== location.origin) return;
  if (request.mode === 'navigate') {
    event.respondWith(fetch(request).then((res) => stocker(PAGES, request, res))
      .catch(async () => (await caches.match(request)) ?? caches.match('/hors-ligne/')));
    return;
  }
  event.respondWith(caches.match(request).then((enCache) => {
    const reseau = fetch(request).then((res) => stocker(RESSOURCES, request, res)).catch(() => enCache);
    return enCache ?? reseau;
  }));
});

Informations clés

Catégorie

Programmation et développement · Créer des sites web

Type de résultat

Code

Niveau

Intermédiaire

Conçu pour

ChatGPT, Claude, Gemini et Microsoft Copilot

Vérifié sur

En attente de vérification éditoriale

Variables

Site ou application, Stack et hébergement, Fonctionnement hors ligne et Priorités

Langue

Français

Prix

Gratuit, sans inscription

Mis à jour

07/11/2026

Questions fréquentes