Registrierungsfehler des Servicemitarbeiters: Nicht unterstützter MIME-Typ (‘text/html’)

Ich benutze Erstellen-Reagieren-App mit einem ausdrücken Server.

create-react-app verfügt über einen vorkonfigurierten ServiceWorker, der lokale Assets zwischenspeichert (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app).

Das Problem, auf das ich gestoßen bin, als ich versucht habe, auf meinem Server zu veröffentlichen, ist, dass die service-worker.js Datei verfügbar war, aber ich bekam Fehler in meiner Browserkonsole, als sie versuchte, sie zu registrieren.

Bei Firefox bekomme ich diesen Fehler:

Fehler bei der Registrierung des Servicemitarbeiters:

TypeError: ServiceWorker-Skript bei https://example.com/service-worker.js für Umfang https://example.com/ ist während der Installation auf einen Fehler gestoßen.

Auf Chrome erhalte ich den aussagekräftigeren Fehler:

Fehler bei der Service-Worker-Registrierung: DOMException: Fehler beim Registrieren eines ServiceWorker: Das Skript hat einen nicht unterstützten MIME-Typ (‘text/html’).

Sicher genug, wenn ich auf der Registerkarte Netzwerk meiner Entwicklertools nachschaue und nach dem suche service-worker.js Datei, kann ich sehen, dass sie den falschen MIME-Typ in den HTTP-Headern hat.

Ich konnte jedoch nicht verstehen, warum es den falschen MIME-Typ hat?

Anwenden dieser Änderung:

'/service-worker.js'  // ❌
'./service-worker.js' // ✅

mein Problem behoben.

_{(in navigator.serviceWorker.register('/service-worker.js'))}

Oder vielleicht brauchen Sie:

'%PUBLIC_URL%/serviceworker.js'

Vielen Dank an @DanielLord für seinen Kommentar.

In meiner Express-Serveranwendung habe ich eine Wildcard-Route (Sternchen / *), auf die umgeleitet wird 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"));
  });
}

Dies ist ein sehr verbreitetes Designmuster. Dies bedeutet jedoch, dass alle Anfragen nach unbekannten Textdateien zunächst umgeleitet werden index.htmlund kehren daher mit dem MIME-Typ von zurück "text/html"auch wenn es sich tatsächlich um eine JavaScript- oder SVG-Datei oder eine andere Art von Klartextdatei handelt.

Die Lösung, die ich gefunden habe, bestand darin, eine bestimmte Route hinzuzufügen service-worker.js Vor die Wildcard-Route:

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"));
});

Nun, wenn der Browser sucht service-worker.jsgibt Express es mit dem korrekten MIME-Typ zurück.

(Beachten Sie, dass, wenn Sie versuchen, die service-worker.js Route nach dem Platzhalter, es funktioniert nicht, da die Platzhalterroute überschrieben wird.)

Ich denke, dass die Service-Worker-Datei nicht vorhanden ist http://localhost:3000/service-worker.js Der Server gibt stattdessen index.html zurück. Dann hat die Registrierungsfunktion keine Ahnung, was sie mit einer index.html-Datei anfangen soll und sagt Ihnen, dass der MIME-Typ nicht stimmt.

Eine schnelle Lösung wäre, die Datei service-worker.js in die zu kopieren public Ordner, damit, wenn Sie treffen http://localhost:3000/service-worker.js Sie sehen die Datei im Browser.

Denken Sie daran, zu ChromeDev > Anwendungen > ServiceWorkers zu gehen und auf Abbestellen zu klicken. um das fehlerhafte zu entfernen. Denken Sie daran, auch den Cache zu deaktivieren

Von ServiceWorker unterstützte MIME-Typen sind „text/javascript“, application/javascript und application/x-javascript. Gehen Sie zu Ihrer Serverdatei und setzen Sie sie

    response.writeHead(201, {
        'Content-Type': 'application/javascript'
    });

Ich verwende nginx, um die Reaktions-App bereitzustellen, und ich habe dieses Problem behoben, indem ich Mime-Typen zu nginx hinzufügte:

http {
    include    mime.types; // <--- this line

    # another config details
}

Auch finden Sie mime.types-Datei hier

Falls Sie an NodeJS arbeiten, sollte die serviceWorker-Datei im öffentlichen Ordner abgelegt werden. Wenn Sie Webpack verwenden, um serviceWorker öffentlich zu exportieren, müssen Sie „copy-webpack-plugin“ verwenden.

Reagieren Sie: public/index.html

<script> 
  if ('serviceWorker' in navigator) {
    window.addEventListener('sw-cached-site.js', function() {
      navigator.serviceWorker.register('service-worker.js', {
        scope: "https://stackoverflow.com/",
      });
    });
  } 
  window.process = { env: { NODE_ENV: 'production' } };
</script>

Hinweis: Vollständige App/Site public/sw-cached-site.js

const cacheName="v1";
self.addEventListener('activate', (e) =>{
  e.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if(cache !== cacheName) { 
            return caches.delete(cache);
          }
        })
      )
    })
  )
});
self.addEventListener('fetch', e => { 
  e.respondWith(
      fetch(e.request)
        .then(res => {
            const resClone = res.clone();
            caches
                .open(cacheName)
                .then(cache => {
                    cache.put(e.request, resClone);
                }); 
                return res;
        }).catch(err => caches.match(e.request).then(res => res))
  );
});