Одно простое руководство, показывающее, как можно выполнять сетевое кэширование, фоновое обновление и другие полезные функции с помощью простого изменения.
Ладно, время истории. Я столкнулся с этой уникальной проблемой, когда работал над проектом React на работе. У нас было требование преобразовать наш веб-сайт в прогрессивное веб-приложение (PWA) и включить сетевое кэширование, чтобы улучшить взаимодействие с пользователем.
Быстрый поиск в Google о PWA показал мне, что мне нужно создать файл сервис-воркера и добавить в него все мои функции, чтобы разблокировать возможности, подобные приложениям.
Все просто, верно? Я так и думал (наивно)
Чтобы помочь мне, CRA поставлялся со своим собственным файлом сервис-воркера из коробки, и казалось, что мне нужно было просто обновить одну строку кода, чтобы включить это.
Я внес это изменение и смог локально наблюдать магию SW в своем браузере. Я приступил к реализации остальной части моей логики, готовой к сборке и развертыванию.
Проблема
CRA использует Workbox, отличный инструмент для работы с возможностями PWA. Но вот проблема. Инструмент еще недостаточно хорошо интегрирован, чтобы мы могли добавлять в него свои конфигурации, поэтому он использует набор поведения по умолчанию при сборке, очень похожий на то, как веб-пакет работает с CRA.
Это объясняет, почему мои изменения PWA работали на локальном хосте, но возвращались к значениям по умолчанию при развертывании.
Чтобы заставить наше пользовательское ПО работать с производственной сборкой CRA, нам придется переопределить этот процесс, и это то, что мы сделаем дальше.
Тестовая среда
И чуть не забыл. Учитывая, что это рабочий проект, я не могу рисковать испортить код только для того, чтобы что-то попробовать. Итак, я решил проверить это на другом (с низким уровнем риска) проекте, моем портфолио веб-сайт.
Решение
Теперь моей целью был способ переопределить процессы CRA, и я имел в виду как раз правильный инструмент. React App Rewired (RAR)
RAR, если вы с ним не знакомы, — это инструмент, который позволяет вам добавлять пользовательские конфигурации для вашего процесса сборки, которые затем переопределяют значения по умолчанию CRA. После того, как вы настроите его, вы, по сути, добавите новый файл, в котором будут храниться все необходимые вам конфигурации.
Я не буду вдаваться в подробности настройки RAR, так как достаточно собственной документации.
Конфигурация рабочего ящика
Теперь, когда у меня есть способ переопределить CRA, я пошел дальше и написал SW-файл с нужными мне возможностями PWA.
И я создал свой config-overrides.js в корне проекта и заставил его заменить SW-файл по умолчанию на тот, который я создал.
Так что теперь RAR будет заменять файлы во время сборки, и мой новый блестящий PWA будет работать. Давайте проверим это.
Я использовал команды RAR для создания своего сайта, и да! новый файл SW был там.
И это было!
Что дальше
Учитывая, что подобная функциональность была бы действительно полезна огромному количеству разработчиков, CRA рассматривает возможность добавления пользовательского файла конфигурации рабочего ящика, вы можете отслеживать его ход здесь
Как только это будет интегрировано в CRA, мы выиграли больше не нужно такое исправление.
А пока, надеюсь, я смог вам помочь!
