이 페이지는 Cloud Translation API를 통해 번역되었습니다.

프로그레시브 웹 앱: 오프라인으로 전환

1. 환영합니다

이 실습에서는 기존 웹 애플리케이션을 오프라인으로 작동하도록 만듭니다. 이 Codelab은 프로그레시브 웹 앱 워크숍의 동반 Codelab 시리즈 중 첫 번째입니다. 이 시리즈에는 7개의 Codelab이 더 있습니다.

학습할 내용

직접 서비스 워커 작성
기존 웹 애플리케이션에 서비스 워커 추가
서비스 워커와 캐시 스토리지 API를 사용하여 리소스를 오프라인에서 사용할 수 있도록 만들기

유의해야 할 사항

기본 HTML 및 JavaScript

필요한 항목

서비스 워커를 지원하는 브라우저

2. 설정하기

이 Codelab을 완료하는 데 필요한 시작 코드를 클론하거나 다운로드하여 시작하세요.

저장소를 클론하는 경우 starter 브랜치에 있는지 확인합니다. ZIP 파일에는 해당 브랜치의 코드도 포함되어 있습니다.

이 코드베이스에는 Node.js 14 이상이 필요합니다. 코드를 사용할 수 있게 되면 코드 폴더의 명령줄에서 npm ci를 실행하여 필요한 모든 종속 항목을 설치합니다. 그런 다음 npm start를 실행하여 Codelab의 개발 서버를 시작합니다.

소스 코드의 README.md 파일은 배포된 모든 파일에 대한 설명을 제공합니다. 또한 이 Codelab 전반에서 작업할 주요 기존 파일은 다음과 같습니다.

키 파일

js/main.js - 기본 애플리케이션 JavaScript 파일
service-worker.js - 애플리케이션의 서비스 워커 파일

3. 오프라인 테스트

변경하기 전에 웹 앱이 현재 오프라인으로 작동하지 않는지 테스트해 보겠습니다. 이렇게 하려면 컴퓨터를 오프라인으로 전환하고 웹 앱을 새로고침하거나 Chrome을 사용하는 경우 다음 단계를 따르세요.

Chrome 개발자 도구를 엽니다.
애플리케이션 탭으로 전환
서비스 워커 섹션으로 전환
오프라인 체크박스를 선택합니다.
Chrome 개발자 도구를 닫지 않고 페이지 새로고침

오프라인 체크박스가 선택된 서비스 워커가 열린 Chrome 개발자 도구 애플리케이션 탭

사이트를 테스트하고 오프라인에서 로드되지 않는 것을 확인했으므로 이제 온라인 기능을 추가할 차례입니다. 오프라인 체크박스를 선택 해제하고 다음 단계로 진행합니다.

4. 오프라인 소통 연계

이제 기본 서비스 워커를 추가할 차례입니다. 이는 서비스 워커 등록과 리소스 캐싱이라는 두 단계로 이루어집니다.

서비스 워커 등록

이미 빈 서비스 워커 파일이 있으므로 변경사항이 표시되도록 애플리케이션에 등록해 보겠습니다. 이렇게 하려면 js/main.js 상단에 다음 코드를 추가합니다.

// Register the service worker
if ('serviceWorker' in navigator) {
  // Wait for the 'load' event to not block other work
  window.addEventListener('load', async () => {
    // Try to register the service worker.
    try {
      // Capture the registration for later use, if needed
      let reg;

      // Use ES Module version of our Service Worker in development
      if (import.meta.env?.DEV) {
        reg = await navigator.serviceWorker.register('/service-worker.js', {
          type: 'module',
        });
      } else {
        // In production, use the normal service worker registration
        reg = await navigator.serviceWorker.register('/service-worker.js');
      }

      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

설명

이 코드는 페이지가 로드된 후 사이트가 서비스 워커를 지원하는 경우에만 빈 service-worker.js 서비스 워커 파일을 등록합니다.

리소스 사전 캐시

웹 앱이 오프라인으로 작동하려면 브라우저가 네트워크 요청에 응답하고 요청을 라우팅할 위치를 선택할 수 있어야 합니다. 이렇게 하려면 service-worker.js에 다음을 추가하세요.

// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];

// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
  console.log('Service worker install event!');
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});

self.addEventListener('activate', (event) => {
  console.log('Service worker activate event!');
});

// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    }),
  );
});

이제 브라우저로 돌아가 미리보기 탭을 닫고 다시 엽니다. 서비스 워커의 다양한 이벤트에 해당하는 console.log가 표시됩니다.

그런 다음 다시 오프라인 상태로 전환하고 사이트를 새로고침합니다. 오프라인 상태에서도 로드되는 것을 확인할 수 있습니다.

설명

서비스 워커의 설치 이벤트 중에 Cache Storage API를 사용하여 명명된 캐시가 열립니다. 그런 다음 precacheResources에 지정된 파일과 경로가 cache.addAll 메서드를 사용하여 캐시에 로드됩니다. 필요하거나 요청될 때 파일을 캐시하는 것과 달리 설치 중에 파일 집합을 선제적으로 캐시하므로 이를 사전 캐싱이라고 합니다.

서비스 워커가 사이트를 제어하면 요청된 리소스가 프록시처럼 서비스 워커를 통과합니다. 각 요청은 이 서비스 워커에서 캐시를 검색하여 일치하는 항목이 있으면 캐시된 리소스로 응답하는 가져오기 이벤트를 트리거합니다. 일치하는 항목이 없으면 리소스가 정상적으로 요청됩니다.

리소스 캐싱을 통해 앱은 네트워크 요청을 방지하여 오프라인으로 작동할 수 있습니다. 이제 앱이 오프라인일 때 200 상태 코드로 응답할 수 있습니다.

5. 축하합니다.

서비스 워커와 캐시 스토리지 API를 사용하여 웹 앱을 오프라인으로 전환하는 방법을 배웠습니다.

이 시리즈의 다음 Codelab은 Workbox 사용입니다.