В этом уроке мы собираемся создать 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, которое автоматически обновляется при изменениях.
Если у вас есть вопросы, не стесняйтесь оставлять комментарии :)