Les applications web progressives (PWA) exploitent des technologies modernes comme les Service Workers et le Cache Storage pour opérer sans connexion réseau. Ce guide détaille les étapes essentielles pour construire une application H5 fonctionnelle hors ligne.

1. Implémenter les Service Workers

Les Service Workers, un type de Web Workers, agissent en arrière-plan pour gérer les requêtes réseau et mettre en cache les ressources, assurant ainsi la disponibilité hors ligne.

if (navigator.serviceWorker) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js')
      .then(function(registration) {
        console.log('Enregistrement réussi, étendue: ', registration.scope);
      })
      .catch(function(err) {
        console.error('Échec de l\'enregistrement: ', err);
      });
  });
}

2. Configurer la Mise en Cache

Dans le fichier sw.js, définissez les ressources à stocker pour l'accès hors ligne en réponce aux événements d'installation et de récupération.

const CACHE_VERSION = 'offline-store-v2';
const REQUIRED_ASSETS = [
  '/',
  '/css/theme.css',
  '/js/core.js',
  '/media/logo.svg'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_VERSION)
      .then(function(cache) {
        console.log('Cache initialisé');
        return cache.addAll(REQUIRED_ASSETS);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(storedResponse) {
        return storedResponse || fetch(event.request);
      })
  );
});

3. Gérer les Mises à Jour du Cache

Pour maintenir l'efficacité, supprimez les anciens caches lors de l'activation du Service Worker, en ne conservant que la version actuelle.

self.addEventListener('activate', function(event) {
  var allowedCaches = ['offline-store-v2'];
  event.waitUntil(
    caches.keys()
      .then(function(cacheKeys) {
        return Promise.all(
          cacheKeys.filter(function(key) {
            return allowedCaches.indexOf(key) === -1;
          }).map(function(key) {
            return caches.delete(key);
          })
        );
      })
  );
});

4. Tester le Fonctionnement Hors Ligne

Utilisez les outils de développement du navigateur, comme les DevTools de Chrome, pour simuler un état sans réseau et vérifier que les ressources en cache se chargent correctement.

5. Optimiser l'Expérience Utilisateur

Améliorez l'ergonomie en fournissant des indicateurs visuels en mode hors ligne, tels que des notifications ou des animations de chargement. Optimisez également les temps de chargement initiaux en réduisant la taille des ressources pour minimiser l'utilisation des données.