React PWA: Как правильно настроить файл манифеста и зарегистрировать работника службы

Question

Я новичок, чтобы реагировать и учился реагировать, разрабатывая небольшое приложение.Приложение было загружено с использованием create-реагировать-приложение и было развернуто с использованием страниц GitHub.Все работает нормально, но я не могу заставить работать PWA-часть приложения.

Если я нажимаю кнопку «Добавить на главный экран» на вкладке «Приложение» в инструменте разработчика Chrome, я получаю следующую ошибку

Сайт не может быть установлен: не найден соответствующий работник службы.Вам может потребоваться перезагрузить страницу или проверить, что работник службы для текущей страницы также контролирует начальный URL из манифеста

Мой файл manifest.json выглядит следующим образом

{
  "short_name": "Bill Splitter",
  "name": "205 Bill Splitter",
  "icons": [
    {
      "src": "logo.png",
      "sizes": "192X192 144X144 64x64 32x32 24x24 16x16",
      "type": "image/png"
    }
  ],
  "start_url": "index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

У меня мало знаний о работниках сферы обслуживания, и я верил, что оно будет автоматически зарегистрировано в приложении.Но я не уверен, что процесс сборки делает это.Как я могу это сделать.

Эту версию приложения можно найти по этой ссылке https://jishnuramesh.github.io/bill-splitter/

Answer 1

Согласно документации на Facebook,

По умолчанию процесс сборки создает файл рабочего сервиса, но он не будет зарегистрирован, поэтому он не получит контроль над вашим рабочим веб-приложением.

Чтобы подписаться на поведение в автономном режиме, разработчики должны искать в своем файле src / index.js следующее:

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers
serviceWorker.unregister();

Как указано в комментариипереключение serviceWorker.unregister () на serviceWorker.register () разрешит вам использовать работника сервиса.

см .: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app