Покажите компонент оповещения, когда вы натолкнули нового работника службы, позволяя пользователю сразу же обновлять свою страницу
Create React App (CRA) отлично подходит для разработки прогрессивных веб -приложений (PWAS). Он имеет встроенное поведение в автономном/кэше. Это не включено по умолчанию, но вы можете выбрать. Он использует работников обслуживания и имеет много подводных камней, о которых вы можете прочитать из Официальные документы Анкет
Эта часть покажет вам, как запустить предупреждение (или тост или на самом деле любой компонент, который вы хотите), когда вы обновили своего обслуживающего работника. Обычно это будет, когда в вашем приложении есть несколько новых обновлений, и вы хотите, чтобы пользователь увидел их сразу.
Эта часть предполагает, что у вас есть новый проект, созданный с CRA. Если вы этого не сделаете, вы можете сделать это легко с:
npx create-react-app my-app
Регистрация работника службы
Если вы перемещаетесь в src/index.js Вы находите на последней строке:
serviceWorker.unregister();
Переключить его на:
serviceWorker.register();
И регистрация обслуживающего работника в значительной степени сделана. Если вы развернете свое приложение на сайт с поддержкой HTTPS, оно будет кэшировано.
Помните, что внедрение работника обслуживания в CRA работает только в производстве. Вы можете убедиться, что он работает, проверив автономный флажок с вкладки Network Chrome Devtools и перезагрузить страницу.
Это все еще показывает ваше приложение!
Ваш обновленный работник службы не виден?
Теперь приходит более сложная часть. Вы добавляете или изменяете код в своем приложении и развертываете, но пользователи не видят ваши обновления. Как говорится в документах:
Поведение по умолчанию состоит в том, чтобы консервативно сохранить обновленный работник службы в состоянии «ожидание ». Это означает, что пользователи в конечном итоге увидят более старый контент, пока не закроют (перезагрузка недостаточно) их существующие, открытые вкладки.
Что если вы хотите, чтобы пользователи видели ваши новые обновления, не закрывая все вкладки? CRA также предоставляет этот вариант.
В src/serviceworker.js это функция с именем Registervalidsw Это обеспечивает доступ к обновлениям и событиям успеха работников службы с помощью обратных вызовов, а также печатает информацию об этих событиях в консоли. Вот как вы знаете, когда показать, что приложение кэшируется для автономного использования или есть более новая версия.
Registervalidsw Функция принимает два аргумента – второй – тот, который нас интересует. конфигурация может быть объектом, у которого есть onsuccess и onupdate обратные вызовы в нем. Теперь вы должны задаться вопросом, как и где мы можем сделать такой объект?
Если вы посмотрите, где Registervalidsw называется, вы видите, что это происходит от Регистр функций экспорта (config) . Это та же самая функция, которую мы видели на последней строке в src/index.js Анкет Теперь мы вернулись в наш собственный код, и мы могли бы сделать что -то вроде:
serviceWorker.register({
onSuccess: () => store.dispatch({ type: SW_INIT }),
onUpdate: reg => store.dispatch({ type: SW_UPDATE, payload: reg }),
});
Когда эти функции вызываются, они отправляют функцию, и вы можете делать с ними все, что хотите, например, показать сообщение.
С onsuccess Это проще – вы можете просто показать предупреждение где -то на своей странице. Возможно, в нем говорится: «Страница была сохранена для автономного использования». С помощью OnuPdate вы хотите сообщить пользователю, что есть более новая версия, и вы можете добавить кнопку с «нажмите, чтобы получить последнюю версию».
Показание предупреждения пользователя, когда страница впервые сохраняется для автономного использования
В приведенном выше примере я использовал Redux Store для отправки действия, и у меня есть магазин с:
const initalState = {
serviceWorkerInitialized: false,
serviceWorkerUpdated: false,
serviceWorkerRegistration: null,
}
Теперь при отправке SW_INIT Тип действия, мы меняем ServiceWorkerInitialized Государство в Верно и может использовать этот селектор внутри любого компонента React.
В моем src/app.js (или любой другой компонент), мы получаем его из магазина с крючками Redux:
const isServiceWorkerInitialized = useSelector( state => state.serviceWorkerInitialized );
И мы можем показать предупреждение, когда это Верно :
{isServiceWorkerInitialized && (
Предупреждение, когда работник обслуживания установлен
Показание пользователю предупреждение и кнопку, когда доступна новая версия работника службы
Используя ту же шаблон, мы показываем компоненты оповещения, когда работники обслуживания были обновлены.
{isServiceWorkerUpdated && (
На этот раз мы добавляем функцию OnClick, которая будет запускаться при нажатии на кнопку «Обновление» внутри компонента оповещения. Потому что мы хотим, чтобы пользователь нажимал на кнопку и получил новую версию приложения.
Вся магия внутри Updateserviceworker функция, которую мы собираемся создать.
Этот пример использует CRA V3, который имеет небольшое дополнение, сгенерированное внутри Public/Service-Worker.js файл. (Если вы используете более старую версию CRA, я тоже создал решение для этого – просто напишите мне.)
Skipwaiting это функция, которая заставляет вашего нового работника службы стать активным, и в следующий раз, когда пользователь открывает браузер и попадает на вашу страницу, он может увидеть новую версию, не делая ничего.
Вы можете прочитать больше о Skipwaiting от Mdn Анкет Но это просто заставляет вашего работника обслуживания быть активным, и вы видите изменения только в следующий раз. Мы хотим, чтобы у пользователя была новая версия прямо сейчас. Вот почему мы должны назвать это, а затем самостоятельно обновить страницу, но только после того, как новый работник службы активна.
Чтобы назвать это, нам нужен экземпляр нашего нового обслуживающего работника. Если вы прокрутите обратно туда, где мы зарегистрировали работника службы, вы можете увидеть onupdate У функции был аргумент, называемый рег . Это объект регистрации, и это наш экземпляр. Это будет отправлено в ServiceWorkerRegistration Собственность в магазине Redux, и мы можем получить наше ожидание SW от ServiceWorkerRegistration.Waiting Анкет
Это будет наша функция, которая будет вызвана, когда пользователь нажимает кнопку «Обновление» внутри оповещения:
const updateServiceWorker = () => {
const registrationWaiting = serviceWorkerRegistration.waiting;
if (registrationWaiting) {
registrationWaiting.postMessage({ type: 'SKIP_WAITING' });
registrationWaiting.addEventListener('statechange', e => {
if (e.target.state === 'activated') {
window.location.reload();
}
});
}
};
Поскольку работник службы является работником и, следовательно, в другом потоке, чтобы отправить любые сообщения в другой поток, мы должны использовать Worker.postmessage ( mdn ). Тип сообщения 'Skip_waiting' Как мы видели из сгенерированных Public/Service-Worker.js файл.
И мы создаем eventlistener, который ожидает нашего нового изменения состояния обслуживания работников, и когда он активирован, мы сами перезагружаем страницу. И это в значительной степени.
Теперь пользователь может видеть, что есть более новая версия, и если он хочет, он может обновить ее сразу.
Предупреждение, когда доступен новый сервисный работник
Вывод
Я думаю, что хорошо позволить пользователю решить, хотят ли он сразу же новую версию или нет. У них есть возможность нажать кнопку «Обновление» и получить новую версию или просто игнорировать ее. Затем новая версия приложения будет доступна, когда они закроют свои вкладки, и снова откроют ваше приложение.
Спасибо.
Вот ссылка на Пример репозитория Анкет
Оригинал: “https://dev.to/glukmann/let-users-know-when-you-have-updated-your-service-worker-in-create-react-app-3il9”