Estoy usando create-react-app con un servidor express .
create-react-app tiene un ServiceWorker preconfigurado que almacena en caché los activos locales ( https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making- una aplicación web progresiva ).
El problema que encontré cuando intenté publicar en mi servidor es que el archivo service-worker.js estaba disponible, pero recibía errores en la consola de mi navegador cuando intentaba registrarlo.
En Firefox, recibí este error:
Error durante el registro del trabajador del servicio:
TypeError: el script ServiceWorker en https://my-domain.com/service-worker.js para el alcance https://my-domain.com/ encontró un error durante la instalación.
En Chrome, obtengo el error más descriptivo:
Error durante el registro del trabajador de servicio: DOMException: no se pudo registrar un trabajador de servicio: el script tiene un tipo MIME no compatible ('texto/html').
Efectivamente, si miro en la pestaña Red de mis herramientas de desarrollador y busco el archivo service-worker.js , puedo ver que tiene el tipo MIME incorrecto en los encabezados HTTP.
Sin embargo, no pude entender por qué tiene el tipo MIME incorrecto.
Aplicando este cambio:
'/service-worker.js' // ❌ './service-worker.js' // ✅solucionó mi problema.
(en navigator.serviceWorker.register('/service-worker.js') )
O tal vez necesites:
'%PUBLIC_URL%/serviciotrabajador.js'
Gracias a @DanielLord por su comentario .
En mi aplicación de servidor Express, tengo una ruta comodín (asterisco / *) que redirige a index.html :
// Load React App // Serve HTML file for production if (env.name === "production") { app.get("*", function response(req, res) { res.sendFile(path.join(__dirname, "public", "index.html")); }); } Este es un patrón de diseño muy común. Sin embargo, significa que cualquier solicitud de archivos de texto desconocidos se redirige inicialmente a index.html y, por lo tanto, regresa con el tipo MIME de "text/html" , incluso si en realidad es JavaScript o SVG o algún otro tipo de archivo de texto sin formato.
La solución que encontré fue agregar una ruta específica para service-worker.js antes de la ruta comodín:
app.get("/service-worker.js", (req, res) => { res.sendFile(path.resolve(__dirname, "public", "service-worker.js")); }); app.get("*", function response(req, res) { res.sendFile(path.join(__dirname, "public", "index.html")); }); Ahora, cuando el navegador busque service-worker.js , Express lo devolverá con el tipo MIME correcto.
(Tenga en cuenta que si intenta agregar la ruta service-worker.js después del comodín, no funcionará porque la ruta comodín se anulará).
Creo que el archivo del trabajador del servicio no está presente en http://localhost:3000/service-worker.js por lo que el servidor devuelve index.html en su lugar. Luego, la función de registro no tiene idea de qué hacer con un archivo index.html y le dice que el tipo MIME no es correcto.
Una solución rápida sería copiar el archivo service-worker.js en la carpeta public para que cuando presione http://localhost:3000/service-worker.js vea el archivo en el navegador.
Recuerde ir a ChromeDev > Aplicaciones > ServiceWorkers y presione Cancelar suscripción. para eliminar el erróneo. Recuerda también deshabilitar caché