프론트엔드 프로그레시브 웹 앱: 서비스 워커 구현 마스터하기

프로그레시브 웹 앱(PWA)은 기존 웹사이트와 네이티브 모바일 애플리케이션 간의 격차를 해소하며 웹 개발의 중요한 발전을 나타냅니다. PWA를 뒷받침하는 핵심 기술 중 하나는 서비스 워커입니다. 이 가이드는 서비스 워커 구현에 대한 포괄적인 개요를 제공하며, 글로벌 사용자를 위한 강력하고 매력적인 PWA 구축을 위한 핵심 개념, 실제 예제 및 모범 사례를 다룹니다.

서비스 워커란 무엇인가?

서비스 워커는 웹 페이지와 별개로 백그라운드에서 실행되는 자바스크립트 파일입니다. 프로그래밍 가능한 네트워크 프록시 역할을 하여 네트워크 요청을 가로채고 PWA가 이를 처리하는 방식을 제어할 수 있게 해줍니다. 이를 통해 다음과 같은 기능이 가능합니다:

• 오프라인 기능: 사용자가 오프라인 상태일 때도 콘텐츠에 접근하고 앱을 사용할 수 있도록 합니다.
• 캐싱: 애셋(HTML, CSS, 자바스크립트, 이미지)을 저장하여 로딩 시간을 개선합니다.
• 푸시 알림: 사용자가 앱을 적극적으로 사용하지 않을 때도 시기적절한 업데이트를 전달하고 상호작용합니다.
• 백그라운드 동기화: 사용자가 안정적인 인터넷 연결을 가질 때까지 작업을 지연시킵니다.

서비스 워커는 웹에서 진정한 앱과 같은 경험을 만드는 데 중요한 요소이며, PWA를 더욱 신뢰할 수 있고 매력적이며 성능이 뛰어나게 만듭니다.

서비스 워커 생명주기

서비스 워커 생명주기를 이해하는 것은 올바른 구현에 필수적입니다. 생명주기는 여러 단계로 구성됩니다:

1. 등록(Registration): 브라우저가 특정 범위(제어하는 URL)에 대해 서비스 워커를 등록합니다.
2. 설치(Installation): 서비스 워커가 설치됩니다. 이 단계에서 일반적으로 필수 애셋을 캐시합니다.
3. 활성화(Activation): 서비스 워커가 활성화되어 네트워크 요청을 제어하기 시작합니다.
4. 유휴(Idle): 서비스 워커가 백그라운드에서 실행되며 이벤트를 기다립니다.
5. 업데이트(Update): 새 버전의 서비스 워커가 감지되면 업데이트 프로세스가 시작됩니다.
6. 종료(Termination): 브라우저가 리소스를 절약하기 위해 서비스 워커를 종료합니다.

서비스 워커 구현: 단계별 가이드

1. 서비스 워커 등록하기

첫 번째 단계는 메인 자바스크립트 파일(예: `app.js`)에 서비스 워커를 등록하는 것입니다.

            if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

            

              
                Copy
              
            
          

이 코드는 브라우저가 `serviceWorker` API를 지원하는지 확인합니다. 지원하는 경우 `service-worker.js` 파일을 등록합니다. 서비스 워커를 지원하지 않는 브라우저를 위해 정상적인 대체 기능을 제공하기 위해 등록 중 발생할 수 있는 오류를 처리하는 것이 중요합니다.

2. 서비스 워커 파일 생성하기 (service-worker.js)

이곳에 서비스 워커의 핵심 로직이 위치합니다. 설치 단계부터 시작하겠습니다.

설치

설치 단계에서는 일반적으로 PWA가 오프라인으로 작동하는 데 필요한 필수 애셋을 캐시합니다. 여기에는 HTML, CSS, 자바스크립트 및 잠재적으로 이미지와 폰트가 포함됩니다.

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

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

            

              
                Copy
              
            
          

이 코드는 캐시 이름(`CACHE_NAME`)과 캐시할 URL 배열(`urlsToCache`)을 정의합니다. `install` 이벤트 리스너는 서비스 워커가 설치될 때 트리거됩니다. `event.waitUntil()` 메서드는 서비스 워커가 활성화되기 전에 설치 프로세스가 완료되도록 보장합니다. 내부에서는 지정된 이름으로 캐시를 열고 모든 URL을 캐시에 추가합니다. 앱을 업데이트할 때 캐시를 쉽게 무효화하기 위해 캐시 이름에 버전 관리(`my-pwa-cache-v1`)를 추가하는 것을 고려하세요.

활성화

활성화 단계는 서비스 워커가 활성화되어 네트워크 요청을 제어하기 시작하는 때입니다. 이 단계에서 오래된 캐시를 정리하는 것이 좋은 관행입니다.

            self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

            

              
                Copy
              
            
          

이 코드는 모든 캐시 이름 목록을 가져와 `cacheWhitelist`에 없는 캐시를 삭제합니다. 이렇게 하면 PWA가 항상 최신 버전의 애셋을 사용하도록 보장됩니다.

리소스 가져오기

`fetch` 이벤트 리스너는 브라우저가 네트워크 요청을 할 때마다 트리거됩니다. 여기서 요청을 가로채고 캐시된 콘텐츠를 제공하거나, 캐시되지 않은 경우 네트워크에서 리소스를 가져올 수 있습니다.

            self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // Not in cache - fetch and add to cache
        return fetch(event.request).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two independent copies.
            const responseToCache = response.clone();

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

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

            

              
                Copy
              
            
          

이 코드는 먼저 요청된 리소스가 캐시에 있는지 확인합니다. 있으면 캐시된 응답을 반환합니다. 없으면 네트워크에서 리소스를 가져옵니다. 네트워크 요청이 성공하면 응답을 복제하여 캐시에 추가한 후 브라우저에 반환합니다. 이 전략은 캐시 우선, 그 다음 네트워크(Cache-First, then Network)로 알려져 있습니다.

캐싱 전략

다양한 캐싱 전략은 다양한 유형의 리소스에 적합합니다. 다음은 몇 가지 일반적인 전략입니다:

• 캐시 우선, 그 다음 네트워크(Cache-First, then Network): 서비스 워커는 먼저 리소스가 캐시에 있는지 확인합니다. 있으면 캐시된 응답을 반환합니다. 없으면 네트워크에서 리소스를 가져와 캐시에 추가합니다. 이것은 HTML, CSS, 자바스크립트와 같은 정적 애셋에 좋은 전략입니다.
• 네트워크 우선, 그 다음 캐시(Network-First, then Cache): 서비스 워커는 먼저 네트워크에서 리소스를 가져오려고 시도합니다. 네트워크 요청이 성공하면 네트워크 응답을 반환하고 캐시에 추가합니다. 네트워크 요청이 실패하면(예: 오프라인 모드) 캐시된 응답을 반환합니다. 이것은 최신 상태를 유지해야 하는 동적 콘텐츠에 좋은 전략입니다.
• 캐시 전용(Cache Only): 서비스 워커는 캐시에서만 리소스를 반환합니다. 이것은 변경될 가능성이 거의 없는 애셋에 좋은 전략입니다.
• 네트워크 전용(Network Only): 서비스 워커는 항상 네트워크에서 리소스를 가져옵니다. 이것은 항상 최신 상태여야 하는 리소스에 좋은 전략입니다.
• Stale-While-Revalidate: 서비스 워커는 캐시된 응답을 즉시 반환한 다음 백그라운드에서 네트워크로부터 리소스를 가져옵니다. 네트워크 요청이 완료되면 새 응답으로 캐시를 업데이트합니다. 이것은 빠른 초기 로드를 제공하고 사용자가 결국 최신 콘텐츠를 볼 수 있도록 보장합니다.

올바른 캐싱 전략을 선택하는 것은 PWA의 특정 요구 사항과 요청되는 리소스 유형에 따라 다릅니다. 업데이트 빈도, 최신 데이터의 중요성 및 원하는 성능 특성을 고려하세요.

업데이트 처리하기

서비스 워커를 업데이트하면 브라우저는 변경 사항을 감지하고 업데이트 프로세스를 트리거합니다. 새 서비스 워커는 백그라운드에 설치되며, 이전 서비스 워커를 사용하는 모든 열린 탭이 닫힐 때 활성화됩니다. `install` 이벤트 내에서 `skipWaiting()`을 호출하고 `activate` 이벤트 내에서 `clients.claim()`을 호출하여 업데이트를 강제할 수 있습니다.

            self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      }).then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    }).then(() => self.clients.claim())
  );
});

            

              
                Copy
              
            
          

`skipWaiting()`은 대기 중인 서비스 워커를 활성 서비스 워커로 강제 전환합니다. `clients.claim()`은 서비스 워커가 자신의 범위 내 모든 클라이언트, 심지어 자신 없이 시작된 클라이언트까지 제어할 수 있게 합니다.

푸시 알림

서비스 워커는 푸시 알림을 활성화하여 사용자가 PWA를 적극적으로 사용하지 않을 때도 다시 참여를 유도할 수 있습니다. 이를 위해서는 푸시 API와 Firebase 클라우드 메시징(FCM)과 같은 푸시 서비스를 사용해야 합니다.

참고: 푸시 알림 설정은 더 복잡하며 서버 측 구성 요소가 필요합니다. 이 섹션에서는 개략적인 개요를 제공합니다.

1. 사용자 구독: 사용자에게 푸시 알림을 보낼 권한을 요청합니다. 권한이 부여되면 브라우저에서 푸시 구독 정보를 얻습니다.
2. 구독 정보를 서버로 전송: 푸시 구독 정보를 서버로 전송합니다. 이 구독 정보에는 사용자 브라우저로 푸시 메시지를 보내는 데 필요한 정보가 포함되어 있습니다.
3. 푸시 메시지 전송: FCM과 같은 푸시 서비스를 사용하여 푸시 구독 정보를 이용해 사용자 브라우저로 푸시 메시지를 보냅니다.
4. 서비스 워커에서 푸시 메시지 처리: 서비스 워커에서 `push` 이벤트를 수신하고 사용자에게 알림을 표시합니다.

다음은 서비스 워커에서 `push` 이벤트를 처리하는 간단한 예제입니다:

            self.addEventListener('push', event => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/images/icon.png'
  };

  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

            

              
                Copy
              
            
          

백그라운드 동기화

백그라운드 동기화는 사용자가 안정적인 인터넷 연결을 가질 때까지 작업을 지연시킬 수 있게 해줍니다. 이는 사용자가 오프라인 상태일 때 양식을 제출하거나 파일을 업로드하는 등의 시나리오에 유용합니다.

1. 백그라운드 동기화 등록: 메인 자바스크립트 파일에서 `navigator.serviceWorker.ready.then(registration => registration.sync.register('my-sync'));`를 사용하여 백그라운드 동기화를 등록합니다.
2. 서비스 워커에서 동기화 이벤트 처리: 서비스 워커에서 `sync` 이벤트를 수신하고 지연된 작업을 수행합니다.

다음은 서비스 워커에서 `sync` 이벤트를 처리하는 간단한 예제입니다:

            self.addEventListener('sync', event => {
  if (event.tag === 'my-sync') {
    event.waitUntil(
      // Perform the deferred task here
      doSomething()
    );
  }
});

            

              
                Copy
              
            
          

서비스 워커 구현을 위한 모범 사례

• 서비스 워커를 작고 효율적으로 유지하세요: 큰 서비스 워커는 PWA의 속도를 저하시킬 수 있습니다.
• 요청되는 리소스 유형에 적합한 캐싱 전략을 사용하세요: 리소스마다 다른 캐싱 전략이 필요합니다.
• 오류를 정상적으로 처리하세요: 서비스 워커를 지원하지 않거나 서비스 워커가 실패하는 브라우저를 위한 대체 경험을 제공하세요.
• 서비스 워커를 철저히 테스트하세요: 브라우저 개발자 도구를 사용하여 서비스 워커를 검사하고 올바르게 작동하는지 확인하세요.
• 글로벌 접근성을 고려하세요: 위치나 장치에 관계없이 장애가 있는 사용자도 PWA에 접근할 수 있도록 설계하세요.
• HTTPS를 사용하세요: 서비스 워커는 보안을 위해 HTTPS가 필요합니다.
• 성능을 모니터링하세요: 라이트하우스(Lighthouse)와 같은 도구를 사용하여 PWA의 성능을 모니터링하고 개선할 부분을 식별하세요.

서비스 워커 디버깅

서비스 워커 디버깅은 어려울 수 있지만, 브라우저 개발자 도구는 문제 해결에 도움이 되는 여러 기능을 제공합니다:

• 애플리케이션 탭: 크롬 개발자 도구의 애플리케이션 탭은 서비스 워커의 상태, 범위, 이벤트 등 관련 정보를 제공합니다.
• 콘솔: 콘솔을 사용하여 서비스 워커에서 메시지를 기록합니다.
• 네트워크 탭: 네트워크 탭은 PWA가 만든 모든 네트워크 요청을 보여주며, 캐시에서 제공되었는지 네트워크에서 제공되었는지를 나타냅니다.

국제화 및 현지화 고려 사항

글로벌 사용자를 위한 PWA를 구축할 때 다음 국제화 및 현지화 측면을 고려하세요:

• 언어 지원: HTML에서 `lang` 속성을 사용하여 PWA의 언어를 지정하세요. 모든 텍스트 콘텐츠에 대한 번역을 제공하세요.
• 날짜 및 시간 형식: `Intl` 객체를 사용하여 사용자의 로케일에 따라 날짜와 시간의 형식을 지정하세요.
• 숫자 형식: `Intl` 객체를 사용하여 사용자의 로케일에 따라 숫자의 형식을 지정하세요.
• 통화 형식: `Intl` 객체를 사용하여 사용자의 로케일에 따라 통화의 형식을 지정하세요.
• 오른쪽에서 왼쪽으로(RTL) 지원: PWA가 아랍어 및 히브리어와 같은 RTL 언어를 지원하는지 확인하세요.
• 콘텐츠 전송 네트워크(CDN): CDN을 사용하여 전 세계에 위치한 서버에서 PWA의 애셋을 제공하여 다른 지역의 사용자 성능을 향상시키세요.

예를 들어, 전자 상거래 서비스를 제공하는 PWA를 생각해보십시오. 날짜 형식은 사용자의 위치에 맞게 조정되어야 합니다. 미국에서는 MM/DD/YYYY를 사용하는 것이 일반적이지만, 유럽에서는 DD/MM/YYYY가 선호됩니다. 마찬가지로 통화 기호와 숫자 형식도 그에 맞게 조정되어야 합니다. 일본 사용자는 가격이 적절한 형식의 JPY로 표시되기를 기대할 것입니다.

접근성 고려 사항

접근성은 장애가 있는 사용자를 포함하여 모든 사람이 PWA를 사용할 수 있도록 만드는 데 매우 중요합니다. 다음 접근성 측면을 고려하세요:

• 시맨틱 HTML: 시맨틱 HTML 요소를 사용하여 콘텐츠에 구조와 의미를 부여하세요.
• ARIA 속성: ARIA 속성을 사용하여 PWA의 접근성을 향상시키세요.
• 키보드 내비게이션: PWA가 키보드를 사용하여 완전히 탐색 가능한지 확인하세요.
• 스크린 리더 호환성: 스크린 리더로 PWA를 테스트하여 시각 장애가 있는 사용자가 접근할 수 있는지 확인하세요.
• 색상 대비: 저시력 사용자가 PWA를 읽을 수 있도록 텍스트와 배경색 간에 충분한 색상 대비를 사용하세요.

예를 들어, 모든 상호작용 요소에 적절한 ARIA 레이블이 있어 스크린 리더 사용자가 그 목적을 이해할 수 있도록 하세요. 키보드 내비게이션은 명확한 포커스 순서로 직관적이어야 합니다. 텍스트는 시각 장애가 있는 사용자를 수용하기 위해 배경에 대해 충분한 대비를 가져야 합니다.

결론

서비스 워커는 강력하고 매력적인 PWA를 구축하기 위한 강력한 도구입니다. 서비스 워커 생명주기를 이해하고, 캐싱 전략을 구현하며, 업데이트를 처리함으로써 오프라인 상태에서도 원활한 사용자 경험을 제공하는 PWA를 만들 수 있습니다. 글로벌 사용자를 위해 구축할 때는 국제화, 현지화 및 접근성을 고려하여 위치, 언어 또는 능력에 관계없이 모든 사람이 PWA를 사용할 수 있도록 해야 합니다. 이 가이드에 요약된 모범 사례를 따르면 서비스 워커 구현을 마스터하고 다양한 글로벌 사용자 기반의 요구를 충족하는 뛰어난 PWA를 만들 수 있습니다.