Quiero actualizar la aplicación PWA cuando haya nuevo contenido disponible. Dado que no podemos acceder a DOM desde el trabajador del servicio, ¿cómo puedo hacer exactamente eso? El trabajador del servicio reconoce correctamente el nuevo contenido, pero no puedo vincular un enlace o contexto para mostrar mi botón modal o de actualización en reaccionar. ¿Alguna ayuda?
registro de trabajador de servicio y función onUpdate :
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) { // At this point, the updated precached content has been fetched, // but the previous service worker will still serve the older // content until all client tabs are closed. // setUpdate(true); // registration.waiting.postMessage({ type: 'SKIP_WAITING' }); console.log( 'New content is available and will be used when all ' + 'tabs for this page are closed. See https://cra.link/PWA.' ); // Execute callback if (config && config.onUpdate) { config.onUpdate(registration); } } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. console.log('Content is cached for offline use.'); // Execute callback if (config && config.onSuccess) { config.onSuccess(registration); } } } }; }; }) .catch((error) => { console.error('Error during service worker registration:', error); }); }esta función está en el archivo serviceWorkerRegistration.js . Podemos agregar registration.waiting.postMessage({ type: 'SKIP_WAITING' }); función para llamar a skipWaiting pero no espera la interacción del usuario y no puede recargar la página. como puedo solucionar eso
Puede intentar pasar una función onUpdate cuando registre el trabajador del servicio. En esa función, envíe un mensaje SKIP_WAITING al trabajador del servicio seguido de una recarga de página.
onUpdate: (registration) => { console.log("SW: sending SKIP_WAITING message to get updated serviceworker to take effect now (without manual restart)") // Old serviceworker will be stopped/new serviceworker started without reload registration.waiting.postMessage({type: 'SKIP_WAITING'}) window.location.reload() }El trabajador de su servidor debe tener un controlador de mensajes SKIP_WAITING. Algo como esto:
self.addEventListener('message', (event) => { console.log("SW: received message event = "+JSON.stringify(event)) if (event.data && event.data.type === 'SKIP_WAITING') { self.skipWaiting(); }});Esto es trabajo para mí.
Lo que todavía me cuesta es cómo actualizar la aplicación si el usuario deja la aplicación abierta. Como en,
y lo deja abierto por los siglos de los siglos...
Esto probablemente debería ir en una nueva pregunta, pero pensé que podría ser relevante para su caso de uso.