M

MLOG

한국어

서비스 워커를 사용하여 전 세계 사용자에게 빠르고 안정적이며 매력적인 오프라인 우선 웹 애플리케이션을 만드는 방법을 알아보세요.

서비스 워커: 오프라인 우선 웹 애플리케이션 구축하기

오늘날 사용자들은 네트워크 연결이 제한적이거나 불가능할 때에도 웹 애플리케이션이 빠르고 안정적이며 접근 가능하기를 기대합니다. 바로 이 지점에서 "오프라인 우선" 설계 개념이 중요해집니다. 서비스 워커는 개발자가 오프라인에서도 원활하게 작동하는 웹 애플리케이션을 구축하여 우수한 사용자 경험을 제공할 수 있게 해주는 강력한 기술입니다.

서비스 워커란 무엇인가?

서비스 워커는 메인 브라우저 스레드와 분리되어 백그라운드에서 실행되는 자바스크립트 파일입니다. 웹 애플리케이션과 네트워크 사이에서 프록시 역할을 하며, 네트워크 요청을 가로채고 캐싱을 관리합니다. 서비스 워커는 다음과 같은 작업을 처리할 수 있습니다:

중요한 점은 서비스 워커가 웹 페이지가 아닌 브라우저에 의해 제어된다는 것입니다. 이를 통해 사용자가 탭이나 브라우저 창을 닫았을 때에도 작동할 수 있습니다.

왜 오프라인 우선인가?

오프라인 우선 웹 애플리케이션을 구축하면 다음과 같은 수많은 이점이 있습니다:

서비스 워커의 작동 방식

서비스 워커의 생명 주기는 여러 단계로 구성됩니다:

  1. 등록: 서비스 워커가 브라우저에 등록되며, 제어할 애플리케이션의 범위를 지정합니다.
  2. 설치: 서비스 워커가 설치되며, 이 과정에서 일반적으로 정적 자산을 캐시합니다.
  3. 활성화: 서비스 워커가 활성화되어 웹 애플리케이션을 제어하기 시작합니다. 이 과정에는 오래된 서비스 워커를 등록 해제하고 오래된 캐시를 정리하는 작업이 포함될 수 있습니다.
  4. 유휴 상태: 서비스 워커는 유휴 상태를 유지하며 네트워크 요청이나 다른 이벤트를 기다립니다.
  5. 가져오기(Fetch): 네트워크 요청이 발생하면 서비스 워커가 이를 가로채 캐시된 콘텐츠를 제공하거나 네트워크에서 리소스를 가져올 수 있습니다.

서비스 워커로 오프라인 우선 구현하기: 단계별 가이드

다음은 서비스 워커를 사용하여 오프라인 우선 기능을 구현하는 기본적인 예시입니다:

1단계: 서비스 워커 등록하기

메인 자바스크립트 파일(예: `app.js`)에서: 


if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('서비스 워커가 등록되었습니다. 범위:', registration.scope);
    })
    .catch(function(error) {
      console.log('서비스 워커 등록 실패:', error);
    });
}

이 코드는 브라우저가 서비스 워커를 지원하는지 확인하고 `service-worker.js` 파일을 등록합니다. 범위는 서비스 워커가 제어할 URL을 정의합니다.

2단계: 서비스 워커 파일 만들기 (service-worker.js)

다음 코드로 `service-worker.js`라는 파일을 만드세요:


const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/images/logo.png'
];

self.addEventListener('install', function(event) {
  // 설치 단계 수행
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('캐시 열림');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // 캐시 히트 - 응답 반환
        if (response) {
          return response;
        }

        // 중요: 요청을 복제합니다.
        // 요청은 스트림이며 한 번만 소비할 수 있습니다. 캐시에서 한 번, 브라우저에서 fetch를 위해 한 번 소비하므로
        // 응답을 복제해야 합니다.
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // 유효한 응답을 받았는지 확인
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // 중요: 응답을 복제합니다.
            // 응답은 스트림이며 한 번만 소비해야 합니다.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

이 코드는 다음을 수행합니다:

3단계: 오프라인 기능 테스트하기

오프라인 기능을 테스트하려면 브라우저의 개발자 도구를 사용할 수 있습니다. Chrome에서는 개발자 도구를 열고 "Application" 탭으로 이동한 다음 "Service Workers"를 선택하세요. 그런 다음 "Offline" 확인란을 선택하여 오프라인 모드를 시뮬레이션할 수 있습니다.

고급 서비스 워커 기술

서비스 워커에 대한 기본적인 이해가 생겼다면, 다음과 같은 고급 기술을 탐색하여 오프라인 우선 애플리케이션을 향상시킬 수 있습니다:

캐싱 전략

리소스 유형과 애플리케이션의 요구 사항에 따라 사용할 수 있는 여러 캐싱 전략이 있습니다:

올바른 캐싱 전략을 선택하는 것은 특정 리소스와 애플리케이션의 요구 사항에 따라 달라집니다. 예를 들어, 이미지나 CSS 파일과 같은 정적 자산은 캐시 우선 전략을 사용하는 것이 가장 좋으며, 동적 콘텐츠는 네트워크 우선 또는 캐시 후 네트워크 전략이 더 유리할 수 있습니다.

백그라운드 동기화

백그라운드 동기화를 사용하면 사용자가 안정적인 네트워크 연결을 가질 때까지 작업을 지연시킬 수 있습니다. 이는 양식 제출이나 파일 업로드와 같은 작업에 유용합니다. 예를 들어, 인도네시아의 외딴 지역에 있는 사용자가 오프라인 상태에서 양식을 작성할 수 있습니다. 그러면 서비스 워커는 연결이 가능해질 때까지 기다렸다가 데이터를 제출할 수 있습니다.

푸시 알림

서비스 워커는 애플리케이션이 열려 있지 않을 때에도 사용자에게 푸시 알림을 보내는 데 사용될 수 있습니다. 이를 통해 사용자의 재참여를 유도하고 시기적절한 업데이트를 제공할 수 있습니다. 앱이 활발하게 실행되고 있는지 여부와 관계없이 실시간으로 사용자에게 속보 알림을 제공하는 뉴스 애플리케이션을 생각해 보세요.

Workbox

Workbox는 서비스 워커 구축을 더 쉽게 만들어주는 자바스크립트 라이브러리 모음입니다. 캐싱, 라우팅, 백그라운드 동기화와 같은 일반적인 작업을 위한 추상화를 제공합니다. Workbox를 사용하면 서비스 워커 코드를 단순화하고 유지 관리가 더 용이해집니다. 현재 많은 회사에서 PWA 및 오프라인 우선 경험을 개발할 때 Workbox를 표준 구성 요소로 사용합니다.

글로벌 사용자를 위한 고려 사항

글로벌 사용자를 위한 오프라인 우선 웹 애플리케이션을 구축할 때는 다음 요소를 고려하는 것이 중요합니다:

오프라인 우선 애플리케이션의 예시

몇몇 인기 있는 웹 애플리케이션은 서비스 워커를 사용하여 오프라인 우선 기능을 성공적으로 구현했습니다:

결론

서비스 워커는 빠르고, 안정적이며, 매력적인 오프라인 우선 웹 애플리케이션을 구축하기 위한 강력한 도구입니다. 자산을 캐싱하고, 네트워크 요청을 가로채고, 백그라운드 작업을 처리함으로써 서비스 워커는 네트워크 연결이 제한적이거나 불가능할 때에도 우수한 사용자 경험을 제공할 수 있습니다. 전 세계적으로 네트워크 접근성이 여전히 일관되지 않기 때문에, 오프라인 우선 설계에 집중하는 것은 웹에서 정보와 서비스에 대한 공평한 접근을 보장하는 데 매우 중요합니다.

이 가이드에 설명된 단계를 따르고 위에서 언급한 요소를 고려함으로써, 오프라인에서도 원활하게 작동하고 전 세계 사용자에게 즐거운 경험을 제공하는 웹 애플리케이션을 만들 수 있습니다. 서비스 워커의 힘을 받아들여 웹의 미래, 즉 네트워크 연결에 관계없이 모든 사람이 어디서나 웹에 접근할 수 있는 미래를 만들어 가십시오.