서비스 워커

사용자는 느리거나 불안정한 네트워크 연결에서 앱이 안정적으로 시작되기를 기대합니다. 오프라인일 때도 있습니다. 사용자는 가장 최근에 상호작용한 콘텐츠를 기대하며 미디어 트랙이나 티켓, 여행 일정과 같은 콘텐츠를 제공하고 사용할 수 있어야 합니다 요청이 불가능한 경우 사용자는 앱이 자동으로 실패하거나 다운됩니다 그리고 이 모든 것이 빨리 일어나기를 바랍니다. 따라서 밀리초 단위의 수익은 로드 시간이 0.1초만 개선되더라도 전환율이 10%까지 개선될 수 있습니다. 서비스 워커는 프로그레시브 웹 앱 (PWA)이 사용자의 있습니다.

</ph>

앱이 서비스 워커의 범위에 포함되는 리소스를 요청할 때, 서비스 워커가 요청을 가로채고 네트워크 프록시 역할을 하고 사용자가 오프라인 상태입니다. 그런 다음 서버에서 리소스를 제공할지 결정할 수 있고 이미 저장된 데이터를 삭제한 경우와 마찬가지로 네트워크에서 해당 데이터를 로컬 알고리즘에서 생성할 수 있습니다. 이렇게 하면 플랫폼 앱과 같은 고품질 환경을 제공해야 합니다. 앱이 오프라인 상태입니다.

서비스 워커 등록

서비스 워커가 페이지를 제어하기 전에 있습니다. 즉, 사용자가 처음으로 PWA를 열면 모든 네트워크가 요청이 서버에 직접 전달됩니다. 관리할 수 있는 권한이 없습니다.

PWA에서는 브라우저가 Service Worker API를 지원하는지 여부를 확인한 후 서비스 워커를 등록할 수 있습니다. 로드된 후 서비스 워커는 자체적으로 요청을 가로채고 대응합니다.

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register("/serviceworker.js");
}

서비스 워커가 등록되었는지 확인

서비스 워커가 등록되어 있는지 확인하려면, 즐겨 사용하는 브라우저입니다.

Firefox 및 Chromium 기반 브라우저 (Microsoft Edge, Chrome 또는 삼성 인터넷):

1. 개발자 도구를 연 다음 응용 프로그램 탭을 클릭합니다.
2. 왼쪽 창에서 서비스 워커를 선택합니다.
3. 서비스 워커의 스크립트 URL이 "Activated"입니다. 자세한 내용은 수명 주기를 참조하세요. Firefox의 경우, 상태는 '실행 중'일 수 있습니다. '중지됨'으로 표시됩니다.

Safari의 경우:

1. 개발을 클릭합니다. 서비스 워커.
2. 이 메뉴에서 현재 출처의 항목을 확인하세요. 항목을 클릭하면 서비스 워커의 컨텍스트에 대한 검사기를 엽니다.

</ph> <ph type="x-smartling-placeholder"></ph>

범위

서비스 워커가 있는 폴더에 따라 범위가 결정됩니다. 서비스 워커 example.com/my-pwa/sw.js에 있는 앱은 그 아래의 모든 탐색을 제어할 수 있습니다. my-pwa 경로(예: example.com/my-pwa/demos/) 서비스 워커는 범위 내의 항목 (페이지, 작업자, 통칭하여 "클라이언트")만 제어합니다. 이 범위는 브라우저 탭 및 PWA 창에 적용됩니다.

범위당 하나의 서비스 워커만 허용됩니다. 서비스 워커가 활성 상태인 경우 실행 중인 인스턴스의 수에 관계없이 일반적으로 (PWA 창 또는 브라우저 탭)은 메모리에 있습니다.

Safari에는 파티션이라고 하는 더 복잡한 범위 관리가 있어서 교차 도메인 iframe에서 작동합니다. 웹키트(WebKit)의 블로그 게시물을 참고하세요.

Lifecycle

서비스 워커에는 별도로 설치 방법을 지시하는 수명 주기가 있습니다. 를 실행합니다.

서비스 워커 수명 주기는 서비스 워커를 등록하는 것으로 시작됩니다. 이 그런 다음 서비스 워커 파일을 다운로드하고 파싱합니다. 파싱하는 경우 성공하면 서비스 워커의 install 이벤트가 발생합니다. install 이벤트 한 번만 실행됩니다

서비스 워커 설치는 사용자 권한을 요구하지 않고 자동으로 수행되므로 사용자가 PWA를 설치하지 않더라도 Service Worker API는 Safari나 Chrome 브라우저처럼 PWA 설치를 지원하지 않는 플랫폼에서도 데스크톱 기기의 Firefox

설치 후 서비스 워커를 활성화해야만 PWA를 포함하여 클라이언트를 제어합니다. 서비스 워커가 서비스를 클라이언트를 제어하면 activate 이벤트가 실행됩니다. 하지만 기본적으로 활성화된 서비스 워커는 다음 페이지를 새로고침하거나 PWA를 다시 열어 해당 페이지로 이동하는 데 걸리는 시간을 절약할 수 있습니다.

self를 사용하여 서비스 워커의 전역 범위에서 이벤트를 수신 대기할 수 있습니다. 객체:

serviceworker.js

// This code executes in its own worker or thread
self.addEventListener("install", event => {
   console.log("Service worker installed");
});
self.addEventListener("activate", event => {
   console.log("Service worker activated");
});

서비스 워커 업데이트

브라우저에서 서비스 워커를 감지하면 서비스 워커가 업데이트됩니다. 서비스 워커 파일의 새 버전과 클라이언트 바이트별로 다릅니다.

설치가 완료되면 새 서비스 워커는 활성화될 때까지 대기합니다. 이전 서비스 워커는 더 이상 클라이언트를 제어하지 않습니다. 이 상태를 'waiting'으로 설정하면 브라우저에서 한 개의 버전만 서비스 워커가 동시에 실행되고 있는지 확인해야 합니다

페이지를 새로고침하거나 PWA를 다시 열어도 새 서비스 워커가 제어 사용자는 모든 탭과 창을 닫거나 다른 창으로 이동해야 다시 돌아가 새 서비스 워커에 새 서비스 워커를 제어 자세한 내용은 서비스 워커 수명 주기를 참조하세요.

서비스 워커 수명

설치 및 등록된 서비스 워커가 모든 네트워크 요청을 관리할 수 있음 확인할 수 있습니다 활성화 및 종료를 통해 자체 스레드에서 실행됨 브라우저에 의해 제어되므로 PWA가 열리거나 닫힙니다. 서비스 워커가 자체 스레드에서 실행되지만 메모리 내 상태 서비스 워커 실행 간에 유지되지 않을 수 있으므로 IndexedDB 또는 다른 리소스 중 하나에서 사용할 수 있는지 여부 사용할 수 있습니다

서비스 워커가 아직 실행 중이 아닌 경우 네트워크 요청이 있을 때마다 서비스 워커가 시작됩니다. 범위 내에서 전송되거나 주기적 백그라운드 동기화 또는 푸시 메시지가 표시될 수 있습니다

서비스 워커가 몇 초 동안 유휴 상태이거나 그동안 너무 바빠서 고마워요. 확인 시간은 브라우저마다 다릅니다. 만약 서비스 워커가 종료되고 이를 시작하는 이벤트가 발생하면 시작됩니다

기능

등록된 서비스 워커와 활성 서비스 워커는 실행 수명 주기를 설정합니다. 하지만 기본적으로 서비스 워커 파일 자체에는 동작이 없습니다. 어떤 광고 항목도 캐시하거나 게재하지 리소스 이러한 작업은 코드가 해야 하는 일입니다. 자세한 내용은 확인할 수 있습니다

서비스 워커의 기능은 프록시 또는 HTTP 요청을 처리하는 데 그치지 않습니다. 그 외에도 백그라운드와 같은 다른 목적으로 다른 기능을 사용할 수 있습니다. 웹 푸시 알림 및 프로세스 결제 등이 포함됩니다. 다음에 대해 기능의 이러한 추가사항입니다.

리소스

• Service Worker API (MDN)
• 서비스 워커 사고방식
• 서비스에서 WebKit 작업자 지원
• 서비스 워커의 ES 모듈
• 서비스 워커 수명 주기