서비스 워커의 수명 주기는 가장 복잡한 부분입니다. AI가 무엇을 하고 있는지, 어떤 이점이 있는지 모르면 AI가 나와 싸우고 있다고 느낄 수 있습니다. 하지만 작동 방식을 알게 되면 웹과 네이티브 패턴의 장점을 결합하여 사용자에게 원활하고 눈에 잘 띄지 않는 업데이트를 제공할 수 있습니다.
자세히 살펴보겠지만 각 섹션의 시작 부분에 있는 글머리기호로 알아야 할 내용의 대부분을 확인할 수 있습니다.
인텐트
수명 주기의 목적은 다음과 같습니다.
- 오프라인 우선을 지원합니다.
- 새 서비스 워커가 기존 워커를 방해하지 않고 준비되도록 허용합니다.
- 범위 내 페이지가 전체적으로 동일한 서비스 워커 (또는 서비스 워커 없음)로 제어되는지 확인합니다.
- 한 번에 하나의 사이트 버전만 실행되는지 확인합니다.
마지막 항목은 매우 중요합니다. 서비스 워커가 없으면 사용자가 사이트에 탭 하나를 로드한 후 나중에 다른 탭을 열 수 있습니다. 이로 인해 두 버전의 사이트가 동시에 실행될 수 있습니다. 이는 괜찮은 경우도 있지만 스토리지를 다루는 경우 공유 스토리지를 어떻게 관리해야 하는지에 대한 의견이 두 탭에서 서로 매우 달라질 수 있습니다. 이로 인해 오류가 발생하거나 심각한 경우 데이터가 손실될 수 있습니다.
첫 번째 서비스 워커
간단히 말하면 다음과 같습니다.
install이벤트는 서비스 워커가 받는 첫 번째 이벤트이며 한 번만 발생합니다.installEvent.waitUntil()에 전달된 프라미스는 설치 시간과 설치의 성공 또는 실패를 나타냅니다.- 서비스 워커는 설치가 완료되고 '활성' 상태가 될 때까지
fetch및push와 같은 이벤트를 수신하지 않습니다. - 기본적으로 페이지 요청 자체가 서비스 워커를 거치지 않는 한 페이지 가져오기는 서비스 워커를 거치지 않습니다. 따라서 서비스 워커의 효과를 보려면 페이지를 새로고침해야 합니다.
clients.claim()는 이 기본값을 재정의하고 제어되지 않는 페이지를 제어할 수 있습니다.
다음 HTML을 살펴보세요.
<!DOCTYPE html>
An image will appear here in 3 seconds:
<script>
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW registered!', reg))
.catch(err => console.log('Boo!', err));
setTimeout(() => {
const img = new Image();
img.src = '/dog.svg';
document.body.appendChild(img);
}, 3000);
</script>
서비스 워커를 등록하고 3초 후에 강아지 이미지를 추가합니다.
서비스 워커 sw.js는 다음과 같습니다.
self.addEventListener('install', event => {
console.log('V1 installing…');
// cache a cat SVG
event.waitUntil(
caches.open('static-v1').then(cache => cache.add('/cat.svg'))
);
});
self.addEventListener('activate', event => {
console.log('V1 now ready to handle fetches!');
});
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// serve the cat SVG from the cache if the request is
// same-origin and the path is '/dog.svg'
if (url.origin == location.origin && url.pathname == '/dog.svg') {
event.respondWith(caches.match('/cat.svg'));
}
});
고양이 이미지를 캐시하고 /dog.svg 요청이 있을 때마다 제공합니다. 하지만 위 예시를 실행하면 페이지를 처음 로드할 때 강아지가 표시됩니다. 새로고침하면 고양이가 표시됩니다.
범위 및 제어
서비스 워커 등록의 기본 범위는 스크립트 URL을 기준으로 ./입니다. 즉, //example.com/foo/bar.js에 서비스 워커를 등록하면 기본 범위가 //example.com/foo/입니다.
페이지, 작업자, 공유 작업자를 clients라고 합니다. 서비스 워커는 범위 내에 있는 클라이언트만 제어할 수 있습니다. 클라이언트가 '제어'되면 가져오기가 범위 내 서비스 워커를 거칩니다. 클라이언트가 null 또는 서비스 워커 인스턴스인 navigator.serviceWorker.controller를 통해 제어되는지 감지할 수 있습니다.
다운로드, 파싱, 실행
.register()를 호출하면 첫 번째 서비스 워커가 다운로드됩니다. 스크립트가 다운로드 또는 파싱되지 않거나 초기 실행에서 오류가 발생하면 등록 약속이 거부되고 서비스 워커가 삭제됩니다.
Chrome의 DevTools에 콘솔과 애플리케이션 탭의 서비스 워커 섹션에 오류가 표시됩니다.