이 Codelab은 웹 내에서 서비스 워커를 등록하는 방법을 보여줍니다. Chrome DevTools를 사용하여 동작을 관찰합니다. 또한 디버깅할 때 도움이 될 만한 몇 가지 디버깅 기법을 다루며 서비스 워커를 지원합니다
샘플 프로젝트 익히기
이 Codelab과 가장 관련성이 높은 샘플 프로젝트의 파일은 다음과 같습니다.
register-sw.js는 비어 있는 상태로 시작하지만 사용된 코드가 포함됩니다. 서비스 워커를 등록할 수 있습니다. 이미<script>를 통해 로드 중입니다. 태그 내부에 있는index.html태그입니다.service-worker.js도 마찬가지로 비어 있습니다. 이 파일에는 서비스 워커입니다.
서비스 워커 등록 코드에 추가
서비스 워커 (현재 service-worker.js 파일과 같은 빈 작업도 가능)
는
등록됨
있습니다. 이 작업은 다음 호출로 수행할 수 있습니다.
navigator.serviceWorker.register(
'/service-worker.js'
)
register-sw.js 파일에서 찾을 수 있습니다.
그러나 코드를 추가하기 전에 코드를 추가하기 전에 알아 두어야 할 몇 가지 사항이 있습니다. 있습니다.
첫째, 모든 브라우저가
지원
서비스 워커를 지원합니다 이런 현상은 이전 버전의 브라우저에서 특히
자동으로 업데이트되지 않습니다. 따라서 포드를 확장하기 위해
조건부로 navigator.serviceWorker.register():
navigator.serviceWorker만 지원됩니다.
둘째, 서비스 워커를 등록하면 브라우저가
service-worker.js 파일이 포함되어 있으며, URL을 다운로드하여 채울 수도 있습니다.
서비스 워커의 리소스에 있는 코드에 따라
install
및
activate
이벤트 핸들러에 의해 처리됩니다.
추가 코드를 실행하고 애셋을 다운로드하면 배터리가
브라우저가 현재 데이터를 표시하는 데 사용할 수 있는 귀중한 리소스를
있습니다. 이러한 간섭을 방지하려면 재생 시간을 지연하는 것이 좋습니다.
브라우저가 서비스 워커의 렌더링을 완료할 때까지
표시됩니다. 근사치를 구하는 편리한 방법은
window.load 이벤트가 시작되었습니다.
이 두 점을 종합하여 다음 범용 서비스 워커를
등록 코드를 register-sw.js 파일에 추가합니다.
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
일부 서비스 워커 로깅 코드 추가
service-worker.js 파일에는 서비스 워커의 모든 로직이 있습니다.
구현이 될 것입니다. 서비스 워커와 함께 사용하는
수명 주기 이벤트
Cache Storage API
웹 앱의 네트워크 트래픽에 대한 지식을 활용하여
서비스 워커를 호출하여 웹 앱의 모든 요청을 처리할 준비가 되었습니다.
하지만... 이게 다 나중에 배울 내용입니다. 이 단계에서는 Chrome의 DevTools 사용에 익숙해지기 위해 서비스 워커의 상태를 디버그합니다
이를 위해 다음 코드를 service-worker.js에 추가합니다. 그러면
다양한 이벤트에 대한 응답으로 DevTools 콘솔에 메시지를 보냅니다 (그러나 많은 작업을 수행하지는 않음).
기타):
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
self.addEventListener('activate', (event) => {
console.log('Inside the activate handler:', event);
});
self.addEventListener(fetch, (event) => {
console.log('Inside the fetch handler:', event);
});
DevTools의 서비스 워커 패널 익히기
이제 코드가 register-sw.js 및 service-worker.js에 추가되었습니다.
이제 샘플 프로젝트의 라이브 버전을 방문하여
작동 중인 서비스 워커를 볼 수 있습니다
- 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음
전체 화면
입니다. - `Control+Shift+J` (또는 Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- 콘솔 탭을 클릭합니다.
다음과 같은 로그 메시지가 표시됩니다. 서비스 워커가 설치 및 활성화되었음을 보여줍니다.
그런 다음 Applications(애플리케이션) 탭으로 이동하여 Service Workers(서비스 워커) 패널을 선택합니다. 다음과 같이 표시되어야 합니다.
이것은 소스 URL이
웹 앱 solar-donkey.glitch.me의 경우 현재 service-worker.js
실행 중입니다 또한 현재 한 클라이언트 (영업 중)가 1개라는
탭)로 구성될 수 있습니다.
이 패널에 있는 링크(예: Unregister 또는 stop)를 사용하면
현재 등록된 서비스 워커에 대한 변경사항을 디버깅할 수 있습니다.
서비스 워커 업데이트 흐름 트리거
서비스 워커로 개발할 때 알아야 할 핵심 개념 중 하나는 Kubernetes의 업데이트 흐름을 따릅니다.
사용자가 서비스 워커를 등록하는 웹 앱을 방문하면
기기에 설치된 service-worker.js의 현재 사본의 코드로
사용할 수 있습니다. 그런데 포드의 버전을
업데이트하면 어떻게 될까요?
service-worker.js 파일 중 하나를 사용해야 할까요?
재방문자가 서비스 워커의 범위 내에 있는 URL로 돌아오면
브라우저가 자동으로 최신 service-worker.js를 요청하고
변경사항을 확인합니다. 서비스 워커 스크립트의 내용이 다르면
그러면 새 서비스 워커가 설치하고 활성화하고
최종적으로 제어할 수 있게 됩니다
프로젝트의 코드 편집기로 돌아가서 코드를 원하는 대로 변경하여 이 업데이트 흐름을 시뮬레이션할 수 있습니다. 한 가지 빠른 변경 사항은 다음을
self.addEventListener('install', (event) => {
console.log('Inside the install handler:', event);
});
작업에 사용되는 제품:
self.addEventListener('install', (event) => {
console.log('Inside the UPDATED install handler:', event);
});
변경한 후 샘플 앱의 라이브 버전으로 돌아갑니다. DevTools Application 탭이 계속 열려 있는 상태에서 페이지를 새로고침합니다. 다음과 같이 표시됩니다. 다음과 같습니다.
이것은 여기에 두 가지 버전의 서비스 워커가 설치됨을
있습니다. 이미 활성화된 이전 버전이 실행 중이며
제어할 수 있습니다. 업데이트된 버전의 서비스 워커가 나열됩니다.
바로 아래에 있습니다 이것은
waiting 상태,
관리자가 제어하는 모든 열린 탭이
닫히게 됩니다.
이 기본 동작을 사용하면 새
서비스 워커는 동작에 근본적인 차이가 있습니다(예:
이전 버전과 호환되지 않는 리소스로 응답하는 fetch 핸들러
사용자가 웹 앱을 모두 종료하기 전까지는 적용되지 않습니다.
웹 앱의 이전 인스턴스를
확인할 수 있습니다
요약
이제 서비스 워커를 등록하는 프로세스에 익숙해지셨을 것입니다. 서비스 워커의 동작을 관찰할 수 있는 기능을 제공합니다.
이제 캐싱 전략 구현을 시작할 수 있는 좋은 위치에 있으며 웹 앱을 안정적이고 안정적으로 로드하는 데 도움이 되는 유용한 기능을 빠릅니다