ReactJS의 서비스 워커

1. React 서비스 워커란?
2. 서비스 워커의 기능
3. React 서비스 작업자를 활성화하는 방법
4. 서비스 작업자 구성
5. 결론

전화기가 오프라인 상태이고 앱에서 메시지를 계속 수신할 수 있는 경우 이는 서비스 작업자의 작업입니다.

완벽한 예는 성경 모바일 앱입니다. 할당된 시간이 끝나면 사용자는 푸시 알림이라는 앱에서 매일 기억 구절을 받게 됩니다. Instagram 앱도 마찬가지입니다. 우리는 오프라인이지만 여전히 앱에서 알림을 받습니다.

다행스럽게도 React는 이 기능을 프레임워크에 주입했으며 이 기사에서는 서비스 작업자에 대해 알아야 할 모든 정보를 안내합니다.

React 서비스 워커란?

서비스 작업자는 웹 브라우저와 웹 서버 간의 링크 역할을 하여 기존 웹 사이트를 향상시키는 특수 JavaScript 자산입니다.

그들의 기능은 웹사이트에 대한 오프라인 액세스를 제공하고 웹 페이지의 전반적인 성능을 향상시켜 웹사이트의 신뢰성을 향상시킵니다. 이는 웹 페이지의 일부 작업이 배경에 종속되어 웹 페이지가 필수 요소와 함께 작동하기 때문입니다.

오프라인 상태에서 사용자가 여전히 웹 사이트를 스크롤할 수 있는 것은 서비스 작업자의 수작업입니다.

서비스 워커는 localhost에서 실행되지 않는 한 HTTPS에서만 실행될 수 있으며 또한 특정 웹 페이지에 연결되어 있습니다. 사용자가 페이지에서 페이지로 전환할 때 지속적으로 재사용할 수 있습니다. 서비스 워커가 종료되면 정보 유지가 중지되므로 서비스 워커의 상태를 염두에 두어야 합니다.

서비스 워커의 기능

1. 서비스 작업자는 웹 사이트의 주요 측면을 캐시할 수 있습니다. 이렇게 하면 발이 가벼워지고(더 빨리 로드됨) 웹 사이트 성능이 향상됩니다.
2. 기존 웹 기술에서는 일반적으로 사용할 수 없는 기능인 알림 및 푸시 API를 활성화합니다.
3. 서비스 워커의 가용성으로 인해 사용자가 인터넷 기능을 잃어도 애플리케이션을 정상적으로 사용할 수 있습니다. 이는 서비스 작업자가 웹 사이트의 주요 부분을 캐시하는 데 도움을 주었기 때문입니다.
4. 앱이 오프라인 상태일 때 수행되는 작업은 인터넷이 완전히 복원되면 백그라운드에서 동기화될 수 있습니다.

React 서비스 작업자를 활성화하는 방법

새 React 프로젝트를 생성하기 위해 create-react-app을 사용할 때 기본적으로 서비스 작업자가 생성됩니다. 프로젝트의 src 폴더에서 serviceWorker.js 파일을 찾을 수 있습니다.

그러나 서비스 워커는 기본적으로 작동하지 않습니다. 우리는 그것을 구성해야 할 것입니다.

서비스 워커를 등록해야 합니다. src/index.js 파일로 이동하여 serviceWorker.unregister(); 줄을 찾습니다. serviceWorker.register();로 변경합니다.

서비스 워커를 등록하면 작동할 수도 있고, React 앱의 프로덕션 버전이 만들어지면 서비스 워커도 함께 활성화됩니다.

서비스 작업자 구성

React 앱을 만들 때 service-worker.js는 기본적으로 웹 페이지와 직접 연결된 콘텐츠를 캐시합니다. 예를 들어 웹 페이지에 삽입된 비디오가 있습니다. custom-service-worker.js라는 새 파일을 생성한 다음 register()를 편집하여 생성한 새 파일을 로드해야 합니다.

serviceWorker.js 파일에서 34행 주변에서 load() 이벤트 리스너를 찾고 아래와 같이 사용자 정의 파일을 추가합니다.

window.addEventListener('load', () => {
  const swUrl = `${process.env.PUBLIC_URL}/custom-service-
worker.js`;
  ...
}

완료되면 다음에 package.json 파일을 업데이트합니다.

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

이제 Google의 Workbox 플러그인을 설치해야 합니다. npm install --save-dev workbox-build를 사용합니다. workbox 플러그인은 백그라운드 동기화와 같은 기능을 서비스 워커에 쉽게 통합하는 데 유용합니다.

다음으로 아래와 같이 Create React App(CRA)에게 새로 생성된 커스텀 서비스 워커를 삽입하도록 지시하는 config 파일을 생성합니다.

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
module.exports = function override(config, env) {
  config.plugins = config.plugins.map((plugin) => {
    if (plugin.constructor.name === 'GenerateSW') {
      return new WorkboxWebpackPlugin.InjectManifest({
        swSrc: './src/custom-service-worker.js',
        swDest: 'service-worker.js'
      });
    }
    return plugin;
  });
  return config;
};

마지막으로 아래와 같이 특정 디렉터리를 캐시하는 사용자 지정 작업자를 만듭니다.

workbox.routing.registerRoute(
    new RegExp('/path/to/cache/directory/'), workbox.strategies.NetworkFirst());
workbox.precaching.precacheAndRoute(self.__precacheManifest || [])

이 부분을 완료하면 애플리케이션을 빌드할 수 있습니다.

결론

서비스 작업자가 제공하는 기능은 웹 응용 프로그램을 원활하게 실행하는 데 이상적이며 시간이 지나면 웹 응용 프로그램을 지금보다 훨씬 더 잘 수행할 수 있는 새롭고 흥미로운 기능을 만드는 데 사용될 것입니다.