EN · DE · RU · FR · ES

#2750 : serviceWorker.js

projectforge-webapp/src/serviceWorker.js Type : JavaScript/React · Rôle : Composant · Source : projectforge-webapp/src/serviceWorker.js 131 lignes · 92 code · 28 commentaires · 11 vides
Service worker PWA pour la mise en cache hors ligne, la synchronisation en arrière-plan et les capacités d'application web progressive.

Structure du code

Exportations : register, unregister

Code source (abrégé)

// Cela permet à l'application de se charger plus rapidement lors des visites ultérieures en production,
// et lui confère des capacités hors ligne. Cependant, cela signifie également que les développeurs (et les utilisateurs)
// ne verront les mises à jour déployées que lors des visites ultérieures d'une page, après la fermeture de tous les
// onglets ouverts sur la page, car les ressources précédemment mises en cache sont mises à jour en arrière-plan.

// Pour en savoir plus sur les avantages de ce modèle et sur la façon de l'adopter,
// lisez http://bit.ly/CRA-PWA

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    // [::1] est l'adresse IPv6 de localhost.
    window.location.hostname === '[::1]' ||
    // 127.0.0.1/8 est considéré comme localhost pour IPv4.
    window.location.hostname.match(
      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

export function register(config) {
if (import.meta.env.PROD && 'serviceWorker' in navigator) {
  const publicUrl = new URL(import.meta.env.BASE_URL, window.location.href);
  if (publicUrl.origin !== window.location.origin) {
    return;
  }
  window.addEventListener('load', () => {
    const swUrl = `${import.meta.env.BASE_URL}service-worker.js`;

      if (isLocalhost) {
        // Ceci s'exécute sur localhost. Vérifions si un service worker existe toujours ou non.
        checkValidServiceWorker(swUrl, config);

        // Ajout de quelques logs supplémentaires sur localhost, orientant les développeurs vers la
        // documentation du service worker/PWA.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'Cette application web est servie en priorité depuis le cache par un service ' +
              'worker. Pour en savoir plus, visitez http://bit.ly/CRA-PWA'
          );
        });
      } else {
        // Ce n'est pas localhost. Enregistrer simplement le service worker
        registerValidSW(swUrl, config);
      }
    });
  }
}

function registerValidSW(swUrl, config) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        if (installingWorker == null) {
          return;
        }
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // À ce stade, le contenu pré-mis à jour a été récupéré,
              // mais l'ancien service worker continuera de servir l'ancien contenu
              // jusqu'à ce que tous les onglets du client soient fermés.
              console.log(
                'Un nouveau contenu est disponible et sera utilisé lorsque tous les ' +
                  'onglets de cette page seront fermés. Voir http://bit.ly/CRA-PWA.'
              );

              // Exécuter le callback
              if (config && config.onUpdate) {
                config.onUpdate(registration);
              }
            } else {
              // À ce stade, tout a été pré-mis en cache.
              // C'est le moment idéal pour afficher un message
              // "Le contenu est mis en cache pour une utilisation hors ligne."
              console.log('Le contenu est mis en cache pour une utilisation hors ligne.');

              // Exécuter le callback
              if (config && config.onSuccess) {
                config.onSuccess(registration);
              }
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Erreur lors de l\'enregistrement du service worker :', error);
    });
}

function checkValidServiceWorker(swUrl, config) {
  // Vérifier si le service worker peut être trouvé. Si ce n'est pas le cas, recharger la page.
  fetch(swUrl)
    .then(response => {
      // S'assurer que le service worker existe et que nous obtenons bien un fichier JS.
      const contentType = response.headers.get('content-type');
      if (
        response.status === 404 ||
        (contentType != null && contentType.indexOf('javascript') === -1)
      ) {
        // Aucun service worker trouvé. Il s'agit probablement d'une application différente. Recharger la page.
        navigator.serviceWorker.ready.then(registration => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker trouvé. Procéder normalement.
        registerValidSW(swUrl, config);
      }
    })
    .catch(() => {
      console.log(
        'Aucune connexion Internet trouvée. L\'application fonctionne en mode hors ligne.'
      );
    });
}
// ... (tronqué, total 128 lignes)

Historique Git

bf988bc6d Élimination de 43 vulnérabilités npm : react-scripts→Vite, ESLint 9, nettoyage des dépendances, corrections de bugs
dcbcb3a34 application d'eslint aux fichiers redux
b265eb093 commit initial pour l'application web