Ошибка MIME-типа ServiceWorker ('text / html') в регистре (React)

Question

Текущее поведение:

Служебный работник не регистрируется из-за ошибки, указанной ниже

Ожидаемое поведение:

Регистр работника службы

---

Подробности

Опубликовано как проблема github: https://github.com/facebook/create-react-app/issues/8593

Работник службы выдает следующую ошибку при попытке зарегистрироваться:

Ошибка при регистрации работника службы:
Исключение DOME: не удалось зарегистрировать ServiceWorker для области ('http://localhost: 3000 / ') с помощью сценария ('http://localhost: 3000 / sw. js '):
Сценарий имеет неподдерживаемый тип MIME (' text / html '). приставка. @ index. js: 1

sw.js отображается на вкладке источников инструментов Chrome dev, но не регистрируется.

Версия React: 16.12.0

Сообщение об ошибке:

Ошибка при регистрации сервисного работника: DOMException:
Не удалось зарегистрировать ServiceWorker для области ('http://localhost: 3000 / ') со сценарием (' http://localhost: 3000 / sw. js '):
Сценарий имеет неподдерживаемый тип MIME (' text / html ').

Сбой ServiceWorker на вкладке проверки Chrome:

---

Шаги для воспроизведения:

Регистрация работника службы в действии (перейдите от отмены регистрации к регистрации или поместите код ПО непосредственно в индекс. html, или используйте более простое ПО. Все это приводит к одной и той же ошибке при запуске в приложении dev или сборке реагирования.)

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

---

Кроме того, `http://localhost: 3000 / sw. js при использовании ПО по умолчанию от React возвращает это HTML:

Использование Пример кода выше возвращает индекс. html (по умолчанию 404, http://localhost: 3000 / ) при попытке доступа к http://localhost: 3000 / sw. js

---

Предлагаемые исправления:

Переместить sw.js в папку publi c, выдает эту ошибку:

---

Есть ли способ изменить заголовок (с text/html на application/javascript) специально для sw.js при подаче в браузер в React?

Я попытался следовать некоторым статьям Medium по регистрации пользовательских сервисов в React, чтобы выгода ...

Answer 1

Вы можете написать код на стороне сервера для обработки файла sw. js. ниже приведен код nodejs, который перехватывает запрос файла sw. js, читает из папки и отправляет обратно в браузер.

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

Answer 2

При запуске сервера веб-пакетов он отображает индекс по умолчанию. html для отсутствующего ресурса.

Если вы используете браузер для загрузки http://localhost:3000/sw.js, вы фактически увидите приложение с отрендеренной реакцией (запущенное индекс. html). Вот почему тип MIME html, а не javascript.

. Этот откат к индексу. html предназначен для поддержки SPA с внешними маршрутами. Например, /product/123/reviews не имеет такого файла html в бэкэнде, приложение SPA JS позаботится об этом во внешнем интерфейсе.

Почему ваш файл отсутствует? Я предполагаю, что вы создали этот файл в папке root вашего проекта.

Сервер разработки Webpack не обслуживает эту папку root.

Переместите ваш sw.js в папку public/ вашего проекта, он будет обслуживаться как положено.