Chapitre 11 : App Shell

1. Navigation Preload

Normalement, le navigateur attend que le Service Worker démarre avant de lancer la requête réseau pour la page. Cela peut ajouter une latence. Navigation Preload permet de lancer la requête réseau en parallèle du démarrage du SW.

2. Activer le Preload

self.addEventListener('activate', event => {
  event.waitUntil(async function() {
    if (self.registration.navigationPreload) {
      await self.registration.navigationPreload.enable();
    }
  }());
});

3. L'App Shell (Squelette)

L'App Shell est l'interface statique minimale mise en cache. Voici comment l'utiliser avec le preload :

self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
      const preloadResponse = await event.preloadResponse;
      if (preloadResponse) return preloadResponse;

      return caches.match('/app-shell.html') || fetch(event.request);
    })());
  }
});