소개

처음 이 용어를 들었을 때 저는 이 용어들이 별도의 스레드를 사용하여 동일한 작업을 수행하고 있다고 생각했습니다. 그렇다면 왜 이 두 용어가 필요한가요?

그러나 사실을 말하자면, 이 두 용어와 작동 방식 사이에는 큰 차이가 있습니다.

자세히 설명하도록 노력하겠습니다.

이 두 가지의 공통점은

1. Javascript의 기본 단일 스레드를 차단하지 않고 별도의 스레드에서 실행됩니다.

웹 작업자

• 여기서 작업자 스레드는 메인 스레드를 방해하지 않고 작업을 수행할 수 있습니다.
• 이미지 조작/처리, 과도한 계산, 데이터 처리 등 상당한 양의 CPU가 필요한 작업에 사용됩니다.
• DOM에 액세스할 수 있는 기능이 없으며 네트워크 요청을 가로챌 수 없습니다.
• 수명 주기가 없습니다.

서비스 워커

• 추가 기능을 갖춘 일종의 웹 워커입니다.
• 브라우저와 별도로 실행될 수 있습니다./브라우저가 닫힌 경우에도 마찬가지입니다.
• PWA의 핵심 구성 요소입니다. 오프라인 지원, 백그라운드 동기화, 푸시 알림과 같은 기능을 활성화하는 데 사용되었기 때문입니다.
• 브라우저와 네트워크 사이에 있는 프록시 서버처럼 작동합니다.

서비스 워커의 생애주기

1. 등록

• 여기서 서비스 워커 자바스크립트 파일이 어디에 있는지 브라우저에 알려드리겠습니다.

if ('serviceWorker' in navigator) {
// wrap it in try/catch / promisses
   await navigator.serviceWorker.register('/service-worker.js')
}

2. 설치

• 브라우저가 서비스 워커를 새로운 것으로 간주하면 설치 이벤트가 트리거됩니다.

아래 코드를 service-worker.js
에 작성해야 합니다.

self.addEventListener('install', (event) => {
// do your operations
})

3. 활성화

• 설치 후 여기로 이동합니다.

 self.addEventListener('activate', (event) => {
// Do your Operation
})

4. 게으른

• 서비스 워커가 아무것도 하지 않을 때는 유휴 상태입니다.

5. 가져오기/메시지

• 네트워크 요청/메시지가 올 때마다 서비스 워커가 깨어나 제어권을 가집니다.

  self.addEventListener('fetch', (event) => {
  // Do your Opeation
})

6. 종료

• 사용하지 않는 경우 브라우저는 메모리 절약을 위해 서비스 워커를 종료합니다. 하지만 우리가 모를 때.

서비스 직원을 매우 오랫동안 유지할 수 있습니다.

예:-

크롬에서 이 링크를 열면 많은 서비스 워커가 정지된 것을 볼 수 있으며 검사/시작 및 메시지 보내기와 같은 많은 작업을 수행할 수 있습니다.

chrome://serviceworker-internals/

브라우저가 닫혀 있어도 서비스 작업자를 깨울 수 있는 방법.

메모:-
이를 위해 푸시를 사용하여 깨울 수 있지만 이 사용을 위해서는 브라우저에 알림 권한을 부여해야 합니다. 그렇지 않으면 방법이 없습니다.

브라우저가 아직 열려 있는 경우 다른 방법이 적합합니다.

1. 이벤트 가져오기

• 이 이벤트는 가져오기 요청이 이루어질 때마다 시작됩니다.

  self.addEventListener('fetch', event => {
  // Handle fetch event
});

2. 메시지

• 이 이벤트는 다른 스크립트에서 메시지를 받으면 시작됩니다. (통신이 일어나는 Service Worker 기타 Javascript 파일)

   self.addEventListener('message', (event) => {
// Handle message Event
})

3. 푸시

• 푸시 메시지가 수신되면 이 이벤트가 시작됩니다.

  self.addEventListener('push', (event) => {
// Handle Push Event
})

4. 동기화 이벤트

• 이 이벤트는 백그라운드 동기화 이벤트가 수신되면 시작됩니다.

  self.addEventListener('sync', (event) => {
// handle background Sync Event
})

참조

1. https://frontendmasters.com/courses/Background-javascript