Недавно я оказался в ситуации, когда потребовалась интеграция с рабочим ящиком для фоновой синхронизации в приложении. После некоторых проб, ошибок и успеха я решил написать эту статью, чтобы продемонстрировать самый простой из найденных мной способов интеграции 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 рабочей панели.

Мы можем самостоятельно разместить рабочий ящик, загрузив файлы в папку в нашей общей папке одним из двух способов:

  1. Использование команды copyLibraries в workbox cli
  2. Скачивание файлов из выпуска Github

Обратите внимание, что рабочий ящик будет кэшировать все модули, на которые есть ссылки, при загрузке через 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 г.