Недавно я оказался в ситуации, когда потребовалась интеграция с рабочим ящиком для фоновой синхронизации в приложении. После некоторых проб, ошибок и успеха я решил написать эту статью, чтобы продемонстрировать самый простой из найденных мной способов интеграции workbox с приложением create-react-app.
В этой статье предполагается наличие базовых знаний о приложении create-react-app, workbox и среде React, поскольку мы будем использовать некоторую терминологию, связанную с этими технологиями. Не нужно быть профессионалом, достаточно знаний начального уровня.
1. Обновите serviceWorker.js.
Первым шагом является обновление файла serviceWorker.js в папке src. Мы будем обновлять функцию регистрации. На данный момент это выглядит так:
export function register(config) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); if (publicUrl.origin !== window.location.origin) { // Our service worker won't work if PUBLIC_URL is on a different origin // from what our page is served on. This might happen if a CDN is used to // serve assets; see https://github.com/facebook/create-react-app/issues/2374 return; } window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (isLocalhost) { // This is running on localhost. Let's check if a service worker still exists or not. checkValidServiceWorker(swUrl, config); // Add some additional logging to localhost, pointing developers to the // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being served cache-first by a service ' + 'worker. To learn more, visit https://bit.ly/CRA-PWA' ); }); } else { // Is not localhost. Just register service worker registerValidSW(swUrl, config); } }); } }
Мы собираемся обновить следующую строку:
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
To:
const swUrl = `${process.env.PUBLIC_URL}/custom-service-worker.js`;
Это позволит нам создать и зарегистрировать наш собственный файл служебного работника с именем «custom-service-worker.js». Вы можете называть это как хотите.
Если вы хотите протестировать это в процессе разработки, отключите проверку производственной среды в следующей строке:
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator)
2. Создайте пользовательский файл сервис-воркера.
Следующим шагом является создание файла настраиваемого сервисного воркера в общей папке нашего приложения. Оно должно совпадать с именем, которое мы использовали на шаге 1. В нашем случае «custom-service-worker.js»
Мы можем импортировать и использовать рабочую панель отсюда:
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js') if (workbox) { console.log(`Yay! Workbox is loaded 🎉`); } else { console.log(`Boo! Workbox didn't load 😬`); }
Как только Workbox загружается из CDN, создается объект workbox, позволяющий нам использовать API рабочей панели.
Мы можем самостоятельно разместить рабочий ящик, загрузив файлы в папку в нашей общей папке одним из двух способов:
Обратите внимание, что рабочий ящик будет кэшировать все модули, на которые есть ссылки, при загрузке через CDN. Эти модули будут доступны для автономного использования после первого обращения к ним.
Следовательно, вам не нужно размещать рабочий ящик самостоятельно, если это вас беспокоит.
Чтобы загрузить рабочий ящик, если мы размещаемся на собственном хостинге, нам нужно будет сделать следующее:
importScripts('/third_party/workbox/workbox-sw.js'); workbox.setConfig({ modulePathPrefix: '/third_party/workbox/' });
В этом случае папка workbox находится в папке third_party в общей папке нашего приложения.
Теперь мы, наконец, можем использовать рабочую панель. Мы можем использовать деструктуризацию, чтобы получить доступ к различным модулям рабочего окна:
const { backgroundSync, routing, strategies } = workbox
3. Зарегистрируйте обслуживающего работника.
Последний шаг - регистрация сервис-воркера в нашем приложении. Перейдите к файлу index.js в папке src и измените следующую строку:
serviceWorker.unregister();
To:
serviceWorker.register();
Если вам понравилась эта статья, подумайте о том, чтобы подписаться на мой личный веб-сайт, чтобы получить ранний доступ к моему контенту, прежде чем он будет опубликован на Medium (не волнуйтесь, он по-прежнему бесплатный, без раздражающих всплывающих окон!). Также не стесняйтесь комментировать этот пост. Я хотел бы услышать ваши мысли!
Первоначально опубликовано на https://kelvinmwinuka.com 5 августа 2020 г.