Код BoilerPlate. Реализация сервисного работника с использованием приложения ReactJS.
Сервисный работник кэширует веб-страницы вместе с другими ресурсами в отдельной области хранения под названием CacheStorage.
Жизненный цикл сервисного работника
У сервисного работника есть жизненный цикл, который полностью отделен от вашей веб-страницы. Чтобы установить сервис-воркер для своего сайта, вам необходимо его зарегистрировать.
Это следующий жизненный цикл сервис-воркера.
Давайте начнем с добавления файла сервис-воркера в ваше реагирующее приложение.
Шаг 1. Я создал свое реагирующее приложение с помощью `create-react-app npm package`.
Шаг 2. `**Create-react -app**` также предоставляет файл сервисного работника. мы не собираемся использовать этот файл сервис-воркера по умолчанию. мы создадим новый файл сервис-воркера с нуля.
Если вы создали свое приложение для реагирования, используя собственную конфигурацию, вам не нужно выполнять следующий шаг.
Если вы создали свое приложение, используя create- react-app, вам следует удалить файл serviceWorker.js и удалить следующий код из index.js.
Шаг 3. Создайте файл `sw.js` в вашей общей папке корневого каталога и добавьте следующий код javascript в файл index.html общей папки.
В приведенном выше коде мы проверяем serviceWorker в объекте навигатора (который используется для обнаружения браузера) и регистрируем сервисного работника с областью действия корневого каталога, а затем после регистрации мы проверяем, готов ли сервисный работник или нет. С помощью вышеуказанного шага сервисный работник активируется и начнет работать, но приложение все равно не будет работать в автономном режиме, потому что мы не написали никакого кода для кэширования и извлечения какого-либо статического содержимого в файле sw.js.
но если вы проверите вкладку приложения app. вы можете увидеть что-то вроде этого.
Шаг 4. Теперь откройте файл sw.js и добавьте следующий код.
Слушатель событий Install открывает объект caches, а затем заполняет его списком ресурсов, которые мы хотим кэшировать. Одна важная особенность операции addAll заключается в том, что это либо все, либо ничего. Если один из файлов отсутствует или не может быть получен, вся операция addAll завершается сбоем.
мы добавили прослушиватель во время события установки сервис-воркера, и мы переведем событие установки в состояние ожидания, чтобы кэшировать наши статические данные. (Используя переменную **CACHE_NAME**, вы можете назвать объект кэширования в CacheStorage). Внутри аргумента **cache.addAll** мы передаем список файлов, которые нам нужно кэшировать, таких как css, html, json и связанные файлы и т. д. Успешное возвращение обещания операции addAll, которую мы вызываем self.skipWaiting() который используется для изменения состояния сервис-воркера с ожидания на активное.
Шаг 5 (**Событие активации**): Теперь мы проверим, активируется наш сервис-воркер или нет, поэтому добавим следующий код в sw.js .
**Прослушиватель событий активации** проверит состояние активации сервис-воркера.
(вы можете взять под контроль неконтролируемых клиентов, вызвав client.claim() в сервис-воркере после его активации. Дополнительные пояснения с примером.)
> Шаг 6 (**Fetch Event**): Когда сервис-воркер контролирует страницу, он может перехватывать каждый запрос, который делает страница, и решать, что делать с запросом. Ответ на каждый запрос мы можем сопоставить с нашим кешем хранилища. Если ответ на запрос уже доступен в кеше, мы можем вернуть кешированный ответ, в противном случае мы можем кешировать ответы на новый запрос в наше кешированное хранилище.
Я использую navigator.onLine, чтобы проверить, подключены ли мы к Интернету или нет, так что я кеширование нового ответа.
Если мы используем наше приложение в автономном режиме, оно будет взято из хранилища кеша.
(условие navigator.onLine полезно для получения новых статических изменений нашего приложения).
Теперь ваше приложение готово к работе в автономном режиме.
Это была реализация шаблонного кода сервис-воркера в реагирующем приложении.
О PWA нужно многое узнать. Пожалуйста, перейдите по ссылкам ниже.
Удачного кодирования!
Ресурсы: https://developers.google.com/web/fundamentals/primers/service-workers
Похлопайте мне, если эта статья оказалась вам полезной.
Подпишитесь на меня:
Твиттер: https://twitter.com/softfolayanyemi
Linkedin: https://www.linkedin.com/in/folayan-yemi
Github: http://github.com /еммифолаян
