EN · DE · RU · FR · ES

#2750: serviceWorker.js

projectforge-webapp/src/serviceWorker.js Tipo: JavaScript/React · Rol: Componente · Fuente: projectforge-webapp/src/serviceWorker.js 131 líneas · 92 código · 28 comentarios · 11 en blanco
Service worker de PWA para caché sin conexión, sincronización en segundo plano y capacidades de aplicación web progresiva.

Estructura del código

Exportaciones: register, unregister

Código fuente (resumido)

// Esto permite que la aplicación cargue más rápido en visitas posteriores en producción y le otorga
// capacidades sin conexión. Sin embargo, también significa que los desarrolladores (y usuarios)
// solo verán las actualizaciones implementadas en visitas posteriores a una página, después de que todas las
// pestañas abiertas en la página se hayan cerrado, ya que los recursos previamente almacenados en caché
// se actualizan en segundo plano.

// Para obtener más información sobre los beneficios de este modelo y las instrucciones sobre cómo
// optar, lea http://bit.ly/CRA-PWA

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    // [::1] es la dirección localhost IPv6.
    window.location.hostname === '[::1]' ||
    // 127.0.0.1/8 se considera localhost para 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) {
        // Esto se ejecuta en localhost. Verifiquemos si aún existe un service worker o no.
        checkValidServiceWorker(swUrl, config);

        // Agregar algunos registros adicionales a localhost, indicando a los desarrolladores la
        // documentación del service worker/PWA.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'Esta aplicación web está siendo servida con prioridad de caché por un service ' +
              'worker. Para obtener más información, visite http://bit.ly/CRA-PWA'
          );
        });
      } else {
        // No es localhost. Simplemente registrar el 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) {
              // En este punto, el contenido precacheadoy actualizado se ha obtenido,
              // pero el service worker anterior seguirá sirviendo el contenido
              // más antiguo hasta que todas las pestañas del cliente estén cerradas.
              console.log(
                'El nuevo contenido está disponible y se utilizará cuando todas las ' +
                  'pestañas de esta página estén cerradas. Consulte http://bit.ly/CRA-PWA.'
              );

              // Ejecutar callback
              if (config && config.onUpdate) {
                config.onUpdate(registration);
              }
            } else {
              // En este punto, todo se ha precacheadoy.
              // Es el momento perfecto para mostrar un
              // mensaje "El contenido está en caché para uso sin conexión."
              console.log('El contenido está en caché para uso sin conexión.');

              // Ejecutar callback
              if (config && config.onSuccess) {
                config.onSuccess(registration);
              }
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error durante el registro del service worker:', error);
    });
}

function checkValidServiceWorker(swUrl, config) {
  // Verificar si se puede encontrar el service worker. Si no se puede, recargar la página.
  fetch(swUrl)
    .then(response => {
      // Asegurar que el service worker exista y que realmente estemos obteniendo un archivo JS.
      const contentType = response.headers.get('content-type');
      if (
        response.status === 404 ||
        (contentType != null && contentType.indexOf('javascript') === -1)
      ) {
        // No se encontró service worker. Probablemente una aplicación diferente. Recargar la página.
        navigator.serviceWorker.ready.then(registration => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker encontrado. Proceder normalmente.
        registerValidSW(swUrl, config);
      }
    })
    .catch(() => {
      console.log(
        'No se encontró conexión a internet. La aplicación se está ejecutando en modo sin conexión.'
      );
    });
}
// ... (truncado, total 128 líneas)

Historial de Git

bf988bc6d Eliminar 43 vulnerabilidades npm: react-scripts→Vite, ESLint 9, limpieza de dependencias, correcciones de errores
dcbcb3a34 aplicando eslint a archivos redux
b265eb093 commit inicial para webapp