create-react-app과 손쉬운 워크박스 통합

최근에 애플리케이션에서 백그라운드 동기화를 위해 워크박스 통합이 필요한 상황에 처했습니다. 몇 번의 시행착오와 성공 끝에 나는 workbox를 create-react-app와 통합하는 가장 쉬운 방법을 보여주기 위해 이 기사를 쓰기로 결정했습니다.

이 기사에서는 이러한 기술과 관련된 몇 가지 용어를 사용할 것이기 때문에 create-react-app, workbox 및 react 프레임워크에 대한 기본 지식이 있다고 가정합니다. 전문가가 될 필요는 없으며 초보자 수준의 지식이면 충분합니다.

1. serviceWorker.js 업데이트

첫 번째 단계는 src 폴더 내의 serviceWorker.js 파일을 업데이트하는 것입니다. 등록 기능을 업데이트하겠습니다. 현재 다음과 같이 보입니다.

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`;

에게:

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'

여기에서 workbox를 가져와 사용할 수 있습니다.

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 😬`);
}

워크박스가 CDN에서 로드되면 워크박스 API를 사용할 수 있도록 워크박스 개체가 생성됩니다.

다음 두 가지 방법 중 하나로 공용 폴더의 폴더에 파일을 다운로드하여 워크박스를 자체 호스팅할 수 있습니다.

Using workbox cli's copyLibraries command

Downloading the files from a Github release

워크박스는 CDN을 통해 로드될 때 참조되는 모든 모듈을 캐시합니다. 이러한 모듈은 처음 참조된 후 오프라인에서 사용할 수 있습니다.

따라서 이것이 우려되는 경우 워크박스를 직접 호스팅할 필요가 없습니다.

자체 호스팅인 경우 워크박스를 로드하려면 다음을 수행해야 합니다.

importScripts('/third_party/workbox/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox/'
});

이 경우 워크박스 폴더는 애플리케이션의 공용 폴더에 있는 third_party 폴더에 포함되어 있습니다.

이제 드디어 workbox를 사용할 수 있습니다. 우리는 다른 workbox 모듈에 접근하기 위해 destructuring을 사용할 수 있습니다:

const { backgroundSync, routing, strategies } = workbox

3. 서비스 워커 등록

마지막 단계는 애플리케이션에 서비스 워커를 등록하는 것입니다. src 폴더의 index.js 파일로 이동하여 다음 줄을 변경합니다.

serviceWorker.unregister();

에게:

serviceWorker.register();

게시물Easy Workbox Integration with create-react-app이 Kelvin Mwinuka에 처음 등장했습니다.

이 기사가 마음에 들었다면 내 콘텐츠가 여기에 게시되기 전에 먼저 내 콘텐츠에 액세스할 수 있도록 내 website를 팔로우하는 것을 고려해 보세요(걱정하지 마세요. 성가신 팝업 광고 없이 여전히 무료입니다!). 또한 이 게시물에 댓글을 남겨주세요. 여러분의 생각을 듣고 싶습니다!