web-dev-qa-db-fra.com

Erreur de type ServiceWorker MIME ('text / html') sur le registre (React)

Le comportement actuel:

Le technicien de service ne s'inscrit pas en raison de l'erreur ci-dessous

Le comportement attendu:

Registres des travailleurs de service

Détails

Publié en tant que problème github: https://github.com/facebook/create-react-app/issues/859

Le technicien de service donne l'erreur suivante lors de la tentative d'inscription:

Erreur lors de l'inscription du technicien de service:
DOMException: impossible d'enregistrer un ServiceWorker pour scope (' http: // localhost: 3000 / ') avec script (' http: // localhost: 3000/sw .js '):
Le script a un type MIME non pris en charge ('text/html'). console. @ index.js: 1

sw.js s'affiche dans l'onglet sources des outils de développement Chrome, mais pas d'enregistrement.

Version React: 16.12.0

Message d'erreur:

Erreur lors de l'inscription du service worker: DOMException:
Impossible d'enregistrer un ServiceWorker pour scope (' http: // localhost: 3000 / ') avec script (' http: // localhost: 3000/sw.js '):
Le script a un type MIME non pris en charge ('text/html').

Échec de ServiceWorker dans l'onglet Inspect de Chrome: Chrome Error

Étapes à suivre pour reproduire:

Enregistrez un Service Worker dans React (passez de unregister à register, ou placez le code SW directement dans index.html, ou utilisez un SW plus simple. Tous provoquent la même erreur lors de l'exécution, en dev ou une application build react.)

Exemple SW:

export function register() {
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("./sw.js")
      .then(function(registration) {
        // Successful registration
        console.log(
          "Hooray. Registration successful, scope is:",
          registration.scope
        );
      })
      .catch(function(error) {
        // Failed registration, service worker won’t be installed
        console.log(
          "Whoops. Service worker registration failed, error:",
          error
        );
      });
  }
}

Aussi, ` http: // localhost: 3000/sw.js lors de l'utilisation du SW par défaut de React renvoie ce HTML:

enter image description here

L'utilisation de l'exemple de code ci-dessus renvoie index.html (par défaut 404, http: // localhost: 3000 / ) lors de la tentative d'accès http: // localhost: 3000/sw.js =

Correctifs suggérés:

Bouge toi sw.js dans le dossier public, donne cette erreur: Public folder error

Existe-t-il un moyen de changer l'en-tête (de text/html à application/javascript) pour spécifiquement sw.js lorsqu'il est servi au navigateur dans React?

J'ai essayé de suivre quelques articles de Medium sur l'enregistrement du service personnaliséWorkers dans React, en vain ...

javascripthtmlnode.jsreactjsservice-worker
7
Sean Moody

Vous pouvez écrire du code côté serveur pour gérer le fichier sw.js. ci-dessous est le code nodejs qui intercepte la demande de fichier sw.js et lit le dossier et le renvoie au navigateur.

app.get('/sw.js', (req, res) => {
  if (__DEVELOPMENT__) {
    http.get('http://localhost:4001/static/build/sw.js', (r) => {
      res.set({
        'Content-Type': 'text/javascript',
        'Cache-Control': 'max-age=0, no-cache, no-store, must-revalidate'
      });
      r.setEncoding('utf8');
      r.pipe(res);
    }).on('error', (e) => {
      console.error(`Error in sending sw.js in dev mode : ${e.message}`);
    });
  } else {
    res.setHeader('Cache-Control', 'max-age=0, no-cache, no-store, must-revalidate');
    res.sendFile('sw.js', { root: path.join(__ROOT_DIRECTORY__, 'assets', 'build') }); // eslint-disable-line no-undef
  }
});
0
Rahul Jain

Cela peut être un double de celui-ci 61776698

Principal pense que vous devez savoir: Créez le servieWorker dans le dossier public afin d'être traité comme un fichier .js et non un fichier texte/html.

Enregistrez ensuite ce service dans votre index.js

Étape 1, créez public/sw.js 

self.addEventListener('message', async (event) => {
  console.log('Got message in the service worker', event);
});

Étape 2, créez src/sw-register.js 

export default function LocalServiceWorkerRegister() {
  const swPath = `${process.env.PUBLIC_URL}/sw-build.js`;
  if ('serviceWorker' in navigator && process.env.NODE_ENV !== 'production') {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register(swPath).then(registration => {
        console.log('Service worker registered');
      });
    });
  }
}

Étape 3, dans src/index.js , ajoutez ces deux lignes

import LocalServiceWorkerRegister from './sw-register';
...
LocalServiceWorkerRegister();

Vous pouvez modifier certaines choses en fonction de vos besoins, mais avec ces modifications, vous devriez pouvoir travailler avec un technicien de service personnalisé dans une application create-react-app

0
Jhonatan