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

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

1. 소개

이번 실습에서는 기존 웹 애플리케이션을 가져와 오프라인에서 작동하도록 합니다. 프로그레시브 웹 앱 워크숍용 컴패니언 Codelab 시리즈 중 첫 번째입니다. 이 시리즈에 Codelab이 7개 더 있습니다.

학습할 내용

직접 서비스 워커 작성
기존 웹 애플리케이션에 서비스 워커 추가
Service Worker 및 Cache Storage API를 사용하여 리소스를 오프라인에서 사용 가능하도록 만들기

유의해야 할 사항

기본 HTML 및 자바스크립트

필요한 항목

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

2. 설정하기

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

저장소를 클론한 경우 starter 분기에 있는지 확인합니다. ZIP 파일에도 이 분기의 코드가 포함되어 있습니다.

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

소스 코드의 README.md 파일은 분산된 모든 파일에 대한 설명을 제공합니다. 또한 다음은 Codelab을 통해 작업할 기�� 기존 파일입니다.

키 파일

js/main.js - 기본 애플리케이션 자바스크립트 파일
service-worker.js - 애플리케이션 서비스 워커 파일

3. 오프라인으로 테스트

변경하기 전에 현재 웹 앱이 현재 오프라인으로 작동하지 않는지 테스트해야 합니다. 그렇게 하려면 컴퓨터를 오프라인으로 전환하고 웹 앱을 새로고침하거나 Chrome을 사용합니다.

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

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

테스트를 완료해 오프라인에서 오프라인으로 로드하지 못한 경우 이제 온라인 기능을 추가할 차례입니다. 오프라인 체크박스를 선택 해제하고 다음 단계로 진행합니다.

4. 오프라인으로 전환

기본 서비스 워커를 추가할 차례입니다. 서비스 워커 등록 및 리소스 캐싱의 두 단계로 구성됩니다.

서비스 워커 등록

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

import swURL from 'sw:../service-worker.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 {
      const reg = await navigator.serviceWorker.register(swURL);
      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로 작업하기입니다.