웹 워커와 서비스 워커

소개

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

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

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

이 둘의 공통점은

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에서 이 링크를 열면 많은 서비스 워커가 걸려 있는 것을 볼 수 있으며 검사/시작 및 메시지 보내기와 같은 많은 작업을 수행할 수 있습니다.

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

위 내용은 웹 워커와 서비스 워커의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!