¿Cómo implementar skipWaiting con Create React App?

Luego de de una extensa compilación de información hemos podido resolver esta escollo que pueden tener algunos de nuestros lectores. Te dejamos la respuesta y deseamos serte de gran apoyo.

La CRA buildservice-worker.js archivo ahora (v3 plus) incluye código para manejar skipWaiting:

self.addEventListener('message', (event) => 
  if (event.data && event.data.type === 'SKIP_WAITING') 
    self.skipWaiting();
  
);

La función de registro serviceWorker.js archivo que se llama en index.js ahora acepta un parámetro de configuración:

serviceWorker.register(
  onUpdate: registration => 
    const waitingServiceWorker = registration.waiting

    if (waitingServiceWorker) 
      waitingServiceWorker.addEventListener("statechange", event => 
        if (event.target.state === "activated") 
          window.location.reload()
        
      );
      waitingServiceWorker.postMessage( type: "SKIP_WAITING" );
    
  
);

Esto omitirá la espera y luego actualizará la página una vez que se haya aplicado la actualización.

En serviceWorker.js archivo puede encontrar este código

if (config && config.onUpdate) 
    config.onUpdate(registration);
 

Entonces implemente la función config.onUpdate

crear un archivo swConfig.js

export default 
 onUpdate: registration => 
   registration.unregister().then(() => 
   window.location.reload()
 )
,
onSuccess: registration => 
  console.info('service worker on success state')
  console.log(registration)
 ,

En índice.js enviar la función de implementación a serviceWorker

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import swConfig from './swConfig'

ReactDOM.render(, 
document.getElementById('root'));
serviceWorker.register(swConfig);

Consulte este repositorio https://github.com/wgod58/create_react_app_pwaupdate

Usé un paquete llamado https://github.com/bbhlondon/cra-append-sw para agregar el siguiente código para llamar a skipWaiting:

self.addEventListener('message', event => 
  if (event.data === 'skipWaiting') 
    self.skipWaiting();
  
);

Si te animas, tienes el poder dejar un ensayo acerca de qué te ha parecido esta reseña.

---

---

Utiliza Nuestro Buscador