В этом уроке мы собираемся создать PWA из приложения React. Прогрессивное веб-приложение больше похоже на собственное приложение (его можно открыть в автономном режиме, получить доступ к ярлыку с главного экрана, отображать уведомления…).

Требования :

  • Ваше приложение создано с помощью create-react-app
  • Обслуживание вашего приложения по HTTPS

Делаем это красиво

Прежде всего, нам нужно будет установить несколько параметров в manifest.json файле вашей public папки, чтобы указать имя и значки вашего приложения.

Если у вас еще нет иконок для вашего приложения, вы можете сгенерировать их здесь.

Вот как должен выглядеть ваш manifest.json:

В качестве заставки по умолчанию используется имя и значок вашего приложения. Чтобы настроить пользовательские заставки, вот отличный учебник.

Давай согласимся

Зарегистрироваться очень просто, вам просто нужно войти в свой index.js и изменить serviceWorker.unregister() наserviceWorker.register().

Отныне все ваши статические ресурсы сайта будут кэшироваться, все обрабатывается приложением create-response-app. Замечательно, не правда ли?

Единственная проблема с PWA заключается в том, что всякий раз, когда вы вносите изменения на свой сайт, он не будет обновляться для старых посетителей, пока все открытые вкладки не будут закрыты ...

Чтобы исправить это, лучший способ улучшить взаимодействие с пользователем:

1) Обнаружение готовности обновления сервис-воркера

В вашем каталоге src откройте serviceWorker.js и в верхней части функции registerValidSW() добавьте следующее:

Здесь мы устанавливаем window.swupdateReady = true, чтобы иметь возможность проверять, готово ли обновление с App.js, вы также можете использовать localStorage или sessionStorage для этой цели.

2) Перезагрузите сайт при следующем изменении маршрута

В App.js прослушайте изменение маршрута в вашем маршрутизаторе и перезагрузите страницу, если обновление Service worker готово. С react-router-dom это выглядит так:

3) Пропустите требование «закрыть все вкладки».

На этом этапе вам нужно сделать npm run build, чтобы создать каталог build. В каталоге build откройте service-worker.js (будьте осторожны, это не тот же файл, что и serviceWorker.js в вашем srcкаталоге) и добавьте следующее:

Вам нужно будет проходить его после каждой сборки.

Если вы используете netlify, вам нужно открыть netlify.toml и добавить это:

Вуаля! Теперь у вас есть приложение PWA, которое автоматически обновляется при изменениях.

Если у вас есть вопросы, не стесняйтесь оставлять комментарии :)