서비스 워커가 설치되면 나중에 오프라인 상태에서 페이지를 제공해야 하는 특정 리소스를 캐시하도록 브라우저에 알릴 수 있습니다. 설치와 마찬가지로 event.respondWith(p)에 대한 약속을 전달하여 가져오기 이벤트를 차단할 수 있으며 약속이 이행되면 네트워크로 이동하려는 기본 작업 대신 작업자가 응답합니다. caches.match를 사용하여 캐시된 응답을 찾고 네트워크로 이동하지 않고 해당 응답을 반환할 수 있습니다. 예를 들어 서비스 워커가 있는 페이지가 처음 로드될 때 서비스 워커가 설치되고 활성화되지만 페이지의 네트워크 요청을 가로챌 수는 없습니다. 첫 번째 단계는 서비스 워커를 등록하는 것입니다. 맹목적으로 등록을 시도하는 대신 ServiceWorker를 사용할 수 있음을 감지합니다. 이 서비스 작업자가 제어하는 페이지가 리소스를 요청할 때마다 가져오기 이벤트가 발생합니다. 이것은 가져 오기 또는 XMLHttpRequest에 국한되지 않습니다. 대신, 그것은 첫 번째 로드에 HTML 페이지에 대 한 요청도 이해, JS와 CSS 리소스 뿐만 아니라, 글꼴, 모든 이미지, 등. 또한 다른 원본에 대한 요청은 ServiceWorker의 가져오기 처리기에 의해 도 포착됩니다. 예를 들어 인기 있는 이미지 호스팅 사이트에 대한 CDN인 i.imgur.com 대한 요청은 작업자가 제어하는 클라이언트(예: 브라우저 탭)에서 요청이 시작된 한 서비스 작업자에 의해 포착됩니다. 가장 먼저 해야 할 일은 서비스 워커를 등록하는 것입니다.
이 작업은 브라우저에서 지원하는 경우에만 작동합니다. 즉, 이 자습서에서 찾을 수 있는 다음 의 모든 코드 조각은 navigator.serviceWorker가 있는 경우에만 유효합니다. 참고 : 서비스 작업자 구현에서 es6 화살표 함수 구문을 사용하고 있습니다 addEventListener를 사용하여 설치 이벤트에 대한 이벤트 처리기를 등록할 수 있습니다. using event.waitUntil 제공 된 p 약속에 설치 프로세스를 차단 합니다. 예를 들어 리소스 중 하나를 다운로드하지 못해 약속이 거부되면 서비스 워커가 설치되지 않습니다. 여기서는 caches.open(이름)을 사용 하 여 캐시를 열고 제공 된 리소스에 대 한 응답을 다운로드 하 고 저장 하는 cache.addAll (리소스)에 매핑 에서 반환 된 약속을 활용할 수 있습니다. 웹 푸시 API 사용의 가장 간단한 예입니다. 페이지가 열려 있지 않은 경우에도 사용자에게 알림을 보냅니다. 우리가 볼 수 있듯이, 서비스 워커의 새 버전은 즉시 적용 되지 않습니다., 그것은 대기 상태의 일종에! 그리고 이것으로, 우리는 이제 서비스 작업자 수명 주기에 대한 좋은 이해를 가지고 있으므로 요약해 보겠습니다.