Как построить пользовательскую PWA с Workbox в приложении Create-React-App

Автор оригинала: FreeCodeCamp Community Member.

Примечание: Это третий в серии постов о PWA внутри реагирования. Для быстрой грунтовки см. Предыдущие два поста здесь и здесь Отказ

В этом последующем сообщении я собираюсь взять вас через то, как построить пользовательское прогрессивное веб-приложение (PWA), используя Библиотека Workbox Google Не выбрасывая из оболочки Create-React-App (CRA).

Workbox – это сборник библиотек, которые облегчают создание автономных функций. WorkBox также считается преемником SW-regache Библиотека, которую CRA использует для генерации SW по умолчанию.

Был несколько разговоров о CRA, мигрирующих из SW-regache Для Workbox (ссылка этот вопрос для деталей). К сожалению, ничто, кажется, пока ничего не придет.

Цели

Настройте CRA Build для использования React-App-Rewareed Отказ (React-app-reware – это библиотека для настройки сборки CRA по умолчанию, не выбрасывая)
Используйте React-app-rep-rewired, чтобы настроить сборку, чтобы использовать рабочую копию для создания сервисного работника
Построить очень простое приложение TODO
Реализуйте вне фоновые функции для приложения TODO с помощью Workbox. Оффлайн функционал мы будем ориентироваться: а) кэш восстановил активы, чтобы их можно было подавать в автономном режиме б) Разрешить публикацию данных офлайн

Представляя Workbox в CRA

Во-первых, создайте свежий репозиторий CRA со следующей командой:

npx create-react-app react-app-rewire-workbox

Это должно настроить новую папку с соответствующим именем. Как только у вас установлена эта папка, CD в папку и создайте файл сервисного работника в общедоступной папке. Я позвонюю мою Custom-Service-Worker.js Отказ

Однажды вы сделали это, продолжайте и удалите чек на Node_env быть установленным на производство внутри RegisterServiceWorker.js.

Наконец, внутри Custom-Service-Worker.js Файл, вставьте следующий код:

Этот фрагмент кода – это то, что я поднял прямо из Веб-сайт Workbox Отказ Вы используете ImportCripts линия, чтобы ввести глобальную переменную с именем Workbox в ваш файл. Скрипт вашего импорта подается через CDN. У вас есть простая проверка, чтобы увидеть, правильно ли переменная будет загружена скриптом или нет.

Итак, у нас теперь есть Workbox, работая для нас в среде Dev. Далее давайте выясним, как реализовать React-App-Rewareed в CRA.

Реализация React-App-Rewired в CRA

Добавьте React-App-Rewareed Пакет к папке вашего проекта, используя следующую команду:

npm install --save-dev react-app-rewired

Теперь, если вы читаете Документы , они упомянут, что вам нужно настроить Config-reflides.js Файл в корневом каталоге вашего проекта. Давайте выясним, что это делает первым.

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

Вы можете экспортировать объект из этого файла с помощью трех клавиш: WebPack, Jest, Devserver. Соответствующие функции позволяют настроить конфигурацию сервера WebPack производства, конфигурацию шума и, наконец, конфигурацию сервера разработки WebPack.

Если вы посмотрите на DevServer ключ в Config-reflides.js Файл, вы заметите, что мы ледили configfunction.tostring () вместо того, чтобы просто Configfunction Отказ Это потому, что если вы попробуете последнее, узел просто будет печатать [Функция] к консоли.

Откройте свой Package.json Файл и замените команду сценариев для начала с racted-app-revired Старт Отказ

Создание приложения Todo

До сих пор нам удалось ввести Workbox в нашу оформление Dev и также представила React-App-Rewareed в нашу CRA Shell. Давайте оставим вещи, так как они есть, и построить образец приложения TODO и получить его в среде Dev.

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

Это будет включать:

Базовый уровень пользовательского интерфейса (я собираюсь полностью игнорировать для этого.)
А JSON-Server Мы можем запросить данные из

Я не собираюсь слишком много деталей о настройке этого, потому что все довольно простой. Я включаю ссылку на Git Reppo с рабочей версией этого приложения в конце этой статьи, чтобы вы могли посмотреть на это.

Вот компонент Todo, который я написал.

Компонент запрашивает запрос на JSON-Server Я настроил и получает ответ, состоящий из массива Тодоса. Затем компонент оказывает эти тодос. Как я уже сказал, крайне прост.

Настроить JSON-Server Запустите следующую команду:

npm install --save json-server

Создайте файл под названием DB.JSON со следующей структурой

Наконец, запустите следующую команду в терминале:

json-server --watch db.json --port 8000

Это запускает локальный сервер на порту 8000 и смотрит на DB.JSON файл для любых изменений. В случае, если что-либо изменяется, сервер перезагружается. Это очень простой способ издеваться на сервер для тестирования вашего приложения.

Наконец, обновите свой App.js Файл Чтобы отразить ваш новый компонент TODO и удалить JSX по умолчанию из этого файла.

Выпустите приложение (внутри окна incognito) и посмотрите, что он выглядит сейчас. Вы должны увидеть список TODOS и входную коробку под ними с помощью кнопки для отправки. Как я уже сказал, очень простой пользовательский интерфейс.

После того, как вы получите все, что настроили, давайте посмотрим способ сделать этот материал в автономном режиме с помощью Workbox.

Примечание: Во время тестирования службы рабочего функциональности в среде Dev, всегда убедитесь, что вы делаете это в новом окне Incognito каждый раз. Он делает тестирование и отладку гораздо меньше головной боли, потому что ваши данные не хранятся на сессиях.

Реализация кэширования с Workbox

Теперь, если вы пойдете вперед и откроете панель инструментов Chrome, вы должны увидеть что-то, что выглядит следующее под вкладкой приложения.

Проверьте флажок «Оффлайн», а затем попробуйте перезагрузить веб-страницу. Это, вероятно, не удастся с ошибкой, говоря, что не было обнаружено сетевого подключения. Если вы посмотрите на вкладку Network, вы увидите кучу неудачных сетевых запросов.

Самый очевидный, который не удастся, это запрос на наше JSON-Server Чтобы получить список TODOS. Давайте исправить это первым. Откройте Custom-Service-Worker.js Файл и добавьте в следующий код

workbox.routing.registerRoute(  'http://localhost:8000/todos',  workbox.strategies.networkFirst())

Это создает стратегию кэширования NetworkFirst Для любых запросов, сделанных для http://localhost: 8000/Todos конечная точка. Изображение ниже дает вам четкое объяснение того, что NetworkFirst Стратегия подразумевает. Вы всегда проверяете сеть первым, и только в случае сбое сети вы переходите к кэше, чтобы получить ресурс. Это типичная стратегия, которую вы можете использовать при запросе API, который, вероятно, обеспечивает свежие данные.

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

Bundle JS, который обслуживается нашим локальным сервером Dev.
index.html файл

Добавьте следующий код в Custom-Service-Work.js

workbox.routing.registerRoute(

  /\.(?:js|css|html)$/,

  workbox.strategies.networkFirst(),

workbox.routing.registerRoute(

  'http://localhost:3000',

  workbox.strategies.networkFirst()

Если вы заметите, первый маршрут в приведенном выше фрагменте кода является Regex объект. Это чистый и простой способ нацеливаться на несколько маршрутов с той же стратегией. Однако, если вы нацеливаете ресурс, который не соблюдает той же политики происхождения, обязательно укажите весь маршрут.

Это, конечно, не идеальный способ сделать вещи. В идеале мы хотим, чтобы статические активы, такие как барабаны JS, стилы и HTML-файлы, предварительно кэшируемые как часть процесса сборки WebPack. Мы доберемся до этого, но важно понимать, что нет черной магии. Это просто простое кеширование.

Идите вперед и снова поднимите страницу и откройте консоль. Вы должны увидеть кучу logs по Workbox о маршрутизации. Войдите в автономный режим и обновите страницу. Вы должны увидеть все нагрузку, как обычно. Если вы открываете журналы Workbox в консоли, вы увидите Workbox Pepart Out, независимо от того, не удалось, ответить ли сетевой запрос или удалось, и ответ Workbox на этот отказ (см. Скриншот ниже):

Реализация отложенной публикации данных с Workbox

Хорошо, в ближайшее время: как мы отправляем данные обратно на сервер без сетевого подключения?

Во-первых, давайте создадим способ публиковать данные в Интернете и убедиться, что он работает. Обновите свой Addtodo Функция внутри вашего компонента Todo, чтобы он выглядел следующее:

Все, что мы сделали, добавлена обработчик обратного вызова в SetState Таким образом, мы можем быть уведомлены, когда государство обновилось. На данный момент мы сделали почтовый запрос на JSON-Server Обновить DB.JSON с новым Тодо.

Попробуйте представить новый Todo, открыть DB.JSON И вы должны увидеть новый Todo, добавленный в ваш массив объектов.

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

Чтобы решить это, мы собираемся использовать что-то называемое backgroundsync, спецификация, для которого вы можете прочитать здесь Отказ То, как он должен работать, заключается в том, что всякий раз, когда вы делаете запрос на сервер для определенного ресурса (в нашем случае запрос на почту), если сеть не обнаружена, WorkBox будет хранить этот запрос в IndexedDB и сохранить опрос запроса на набор промежуток времени. Когда обнаружено сетевое соединение, запрос будет воспроизведен. Если сетевое соединение не установлено в предварительно определенный период времени, запрос отбрасывается.

Backgroundsync API использует что-то под названием Syncmanager под капотом. Вы можете прочитать об этом в документах MDN здесь Отказ К сожалению, как вы можете видеть, SyncManager не находится на трассе стандартов, а Chrome – единственный браузер, который имеет полностью реализованный SPEC. Это означает, что Chrome является единственным браузером, где это гарантировано надежно работать.

Нам нужно добавить какой-код в Custom-Service-Worker.js Чтобы получить фоновые вещи, работающие на нас. Добавьте следующий код в файл:

Мы используем фоновый плагин синхронизации, который Workbox предоставляет нам. Первый параметр, который вы предоставляете конструктору, – это имя очереди, которое вы хотите, чтобы Workbox создавать при сохранении неудачных запросов. Второй параметр – это объект параметров, где мы определяем максимальное количество времени, чтобы попытаться воспроизвести запросы внутри.

Наконец, мы регистрируем новый маршрут с методом Post, и настроив стратегию, которую мы хотим использовать для кэширования. Это очень похоже на то, что мы уже сделали за исключением определения производимого типа запроса, а также плагин, определенный для нашей стратегии.

Теперь попробуйте пройти через тот же сценарий отправки Todo без какого-либо сетевого подключения и соблюдайте то, что происходит в журнале. Вы получите журнал, который выглядит как следующий скриншот.

Вы можете посмотреть на запрос, который был добавлен, ищете IndexedDB под вкладкой приложения в окне Chrome devtools. Откройте перечисленные подкаталоги в разделе «Выпадающее меню IndexedDD», и вы должны увидеть, как сохранено запрос, ожидая воспроизведения.

Выключите опцию Offline в окне devtools, и вы должны увидеть новый всплывающую журнал Workbox. Это будет выглядеть следующее:

Приведенное выше изображение включает в себя Workbox, воспроизводя неудачный запрос в тот момент, когда он получает запрос синхронизации, и дает вам подтверждение, что ваш запрос был успешным. Если вы посмотрите на DB.JSON Теперь вы заметите, что новый TODO был добавлен в файл.

Ну, там мы идем. У нас есть способ воспроизвести неудачные запросы через сервис сейчас.

Далее нам нужно сделать, состоит в том, чтобы интегрировать плагин WebPack, поэтому Workbox может кэшировать статические активы как часть процесса сборки. Это избавится от необходимости явно иметь маршрут, чтобы кэшировать статические активы внутри нашего сервисного рабочего файла.

Pastaching статические активы

Это будет последний шаг. В этом разделе мы собираемся внести изменения в процесс сборки CRA, чтобы заставить его генерировать файл сервисного работника с помощью Workbox вместо SW-regache Отказ

Во-первых, установите следующие пакеты: Workbox-WebPack-Plugin и путь Отказ

Откройте Package.json Файл и отредактируйте скрипт сборки для запуска React-App-Rewareed вместо React-Scripts Точно так же, как мы сделали для начала сценария.

Наконец, откройте Config-reflides.js Файл и отредактируйте его, чтобы выглядеть следующее:

Есть пара вещей, которые мы делаем в этом файле.

Во-первых, мы проверяем, если это производственная сборка. Если это так, мы создаем объект конфигурации Workbox и предоставьте его на нашем пользовательском SW, а также путь вывода SW, который мы хотим.

Мы также предоставляем вариант под названием ImportWorkboxfrom и установить это на отключено Отказ

Это вариант, указывающий, что мы не хотим Workbox Imported из любого места, поскольку мы напрямуем запрашиваем его с CDN в нашем скрипте SW.

Наконец, у нас есть функция, которая называется RemoveWrecachePlugin Отказ Все это делает цикл через плагины, перечисленные в конфигурации WebPack, найдите правильный и верните индекс, чтобы мы могли его удалить.

Теперь идите вперед и запустите сборку для приложения и откройте файл SW, созданный в папке сборки. В моем случае этот файл SW имеет имя Custom-Service-Work.js

Вы заметите новую ImportCripts Вызов в верхней части файла, который, кажется, запрашивает файл манифеста PROCACH. Этот файл хранится в папке сборки, и если вы его откроете, вы должны увидеть список всех кэшированных статических активов на Workbox.

Заключение

Итак, мы достигли следующих целей:

Настройте CRA Build для использования React-App-Reware
Используйте React-app-rep-rewired, чтобы настроить сборку для использования рабочей коробки для создания сервисного работника – мы достигли этого, используя Workbox-WebPack-Plugin. Процесс сборки теперь автоматически кэширует все статические активы.
Построить очень простое приложение TODO
Реализуйте вне фоновые функции для приложения TODO с помощью Workbox. Оффлайн функционал мы будем ориентироваться: а) кэш восстановил активы, чтобы их можно было подавать в автономном режиме б) Разрешить публикацию данных офлайн

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