JavaScript Academy · 강의

서비스 워커 등록하기

서비스 워커를 설치하고 활성화합니다.

서비스 워커 등록하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

서비스 워커란 무엇인가요

서비스 워커는 페이지와 분리되어 브라우저가 백그라운드에서 실행하는 스크립트입니다. 프로그래밍 가능한 네트워크 프록시로 동작하여 요청을 가로채고, 캐시된 응답을 제공하며, 오프라인 환경을 지원할 수 있습니다.

기능 감지

모든 환경이 서비스 워커를 지원하는 것은 아닙니다. 이전 브라우저에서도 기능이 원활하게 축소되도록 등록하기 전에 navigator.serviceWorker가 있는지 확인하세요.

if ('serviceWorker' in navigator) {
  // safe to register
}

등록하기

서비스 워커의 스크립트 URL을 navigator.serviceWorker.register에 전달해 등록합니다. 이 메서드는 등록 객체로 완료되는 프라미스를 반환합니다.

navigator.serviceWorker.register('/sw.js')
  .then(reg => console.log('registered, scope:', reg.scope))
  .catch(err => console.log('registration failed:', err));

등록 범위

범위는 워커가 제어하는 URL 집합입니다. 기본적으로 스크립트가 있는 디렉터리가 범위가 됩니다. /sw.js에 있는 워커는 전체 사이트를 제어하고, /app/sw.js에 있는 워커는 /app/만 제어합니다.

navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.

명시적 범위 설정하기

옵션을 사용해 범위를 좁힐 수 있지만, 서버에서 특수 헤더를 설정하지 않는 한 스크립트가 있는 디렉터리보다 범위를 넓힐 수는 없습니다.

navigator.serviceWorker.register('/sw.js', {
  scope: '/dashboard/'
});

HTTPS 요구 사항

서비스 워커에는 보안 컨텍스트가 필요합니다. 실제 환경에서는 HTTPS를 사용해야 합니다. 개발 환경에서는 localhost가 보안 환경으로 취급됩니다. 이렇게 하면 공격자가 네트워크 프록시를 가로채는 것을 막을 수 있습니다.

설치 이벤트

워커가 처음 등록되면 install 이벤트가 실행됩니다. 일반적으로 이곳에서 필수 자산을 미리 캐시하여 앱이 오프라인에서도 작동하도록 합니다.

// sw.js
self.addEventListener('install', (event) => {
  console.log('service worker installing');
});

활성화 이벤트

설치 후 워커는 activate를 실행합니다. 페이지를 제어하기 전에 이전 버전에서 남은 오래된 캐시를 정리하는 곳입니다.

// sw.js
self.addEventListener('activate', (event) => {
  console.log('service worker activated');
});

수명 주기

서비스 워커는 다음 상태를 거칩니다.

설치 중 — 설치 처리기를 실행하는 중
설치됨/대기 중 — 준비가 완료되어 인계할 차례를 기다리는 중
활성화 중 / 활성화됨 — 이제 페이지를 제어하는 중

기본적으로 새 워커는 기존 페이지가 닫힐 때까지 기다린 후 활성화됩니다.

요청 가로채기

활성화된 워커는 fetch 이벤트를 통해 자신의 범위에서 발생하는 모든 네트워크 요청을 감지합니다. 캐시나 네트워크에서 응답하거나 두 가지를 조합할 수 있습니다.

// sw.js
self.addEventListener('fetch', (event) => {
  // event.request describes the outgoing request
  console.log('intercepted', event.request.url);
});

등록 복습

서비스 워커를 등록하려면 기능을 감지하고, 스크립트 URL과 함께 register를 호출하며, 범위와 HTTPS 요구 사항을 확인해야 합니다. 또한 워커 스크립트 안에서 install, activate, fetch 이벤트를 처리해야 합니다.

빠른 확인

서비스 워커 등록에 대한 이해도를 확인해 보세요.

복습

서비스 워커를 등록하는 방법을 배웠습니다.

'serviceWorker' in navigator로 기능을 감지합니다.
register(url, { scope })는 프라미스를 반환합니다.
범위의 기본값은 스크립트가 있는 디렉터리이며 HTTPS가 필요합니다.
워커에서 install, activate, fetch를 처리합니다.

다음은 캐시 API입니다.

자주 묻는 질문

“서비스 워커 등록하기” 강의는 무료인가요?

네 — “서비스 워커 등록하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“서비스 워커 등록하기”에서 뭘 배우나요?

서비스 워커를 설치하고 활성화합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“서비스 워커 등록하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기