Реагировать - Не могу найти serviceWorker.js файл в папке src приложения

#javascript #reactjs

Вопрос:

Я новичок в react и следую различным руководствам, пытаясь понять основы. Я использую v17 от react.

В этих руководствах я видел файл в структуре папок с именем serviceWorker.js это используется для создания прогрессивного веб-приложения.

Я сгенерировал свой проект с помощью npx, но в моей структуре папок я не могу найти этот файл. Это ошибка? или это что-то устаревшее? или я должен добавить его вручную?

1. Если вы использовали npx create-react-app , он должен присутствовать в src/ папке. Не могли бы вы добавить скриншот вашей структуры каталогов?

2. @CerebralFart файл больше не создается с версии 4. теперь он называется reportWebVitals

3. @azium, я этого не знал, спасибо за исправление!

4. также вы можете создать новый проект из шаблона cra npx create-react-app my-app --template cra-template-pwa , вы получите этот файл

5. Спасибо вам за ответы!!

Ответ №1:

Я столкнулся с той же проблемой, я ожидал найти это в моем index.js:

 import * as serviceWorker from './serviceWorker';
serviceWorker.unregister();

Я снова посмотрел на свой index.js чтобы посмотреть, что настроил и нашел create-react-app:

 import reportWebVitals from './reportWebVitals';
reportWebVitals();

Это заменило ServiceWorker в версии 4 CRA от октября 2020 года.

Ответ №2:

Начиная с CRA 4, вы можете либо зарегистрироваться, используя cra-template-pwa , либо создав свой собственный src/service-worker.js файл.

Но, похоже, вам нужно сделать это только в том случае, если вы хотите отказаться от использования режима offline / cache-first. Остальные инструменты PWA включены в CRA.

Все это объясняется в https://create-react-app.dev/docs/making-a-progressive-web-app

Ответ №3:

Я решил это, создав проект следующим образом:

 $npx create-react-app name-pwa --template cra-template-pwa

и в файловой структуре вы найдете файл service-worker.js и serviceWorkerRegistration.js

и теперь в вашем index.js просто измените отмену регистрации с помощью register:

 serviceWorkerRegistration.register();