[html] 웹 앱의 오프라인 지원 기능

22 Dec 2023

html

웹 앱은 온라인 및 오프라인 환경에서 모두 작동할 수 있어야 합니다. 사용자가 오프라인 상태일 때도 웹 앱이 일부 기능을 계속 사용할 수 있게 하는 것이 중요합니다. 이를 위해 웹 앱에서 지원하는 오프라인 기능에 대해 알아보겠습니다.

1. 오프라인 캐싱

오프라인 상태에서도 사용자가 최근에 방문한 페이지나 데이터를 볼 수 있도록 오프라인 캐싱이 중요합니다. 이를 위해 웹 앱은 Service Worker와 Cache API를 사용하여 필요한 자원을 임시로 저장하고, 오프라인으로 사용할 수 있게 합니다.

// Service Worker 등록
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

// Cache API를 사용한 캐싱
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/styles/main.css',
        '/script/main.js'
      ]);
    })
  );
});

2. 오프라인 경험 개선

사용자가 오프라인 상태일 때에도 웹 앱을 통해 데이터를 추가하거나 조작할 수 있어야 합니다. 웹 앱은 오프라인 상황에 대비하여 로컬 데이터베이스를 사용하거나, 변경된 내용을 온라인으로 동기화할 수 있는 기능을 제공해야 합니다.

// IndexedDB를 사용한 로컬 데이터 저장
var request = indexedDB.open('my-database', 1);
request.onerror = function(event) {
  console.log('Database error: ' + event.target.errorCode);
};
request.onsuccess = function(event) {
  db = event.target.result;
};

3. 오프라인 상태 감지

웹 앱은 사용자가 오프라인으로 전환했을 때 오프라인 상태를 감지하여 사용자에게 적절한 메시지를 표시해야 합니다. 또한 온라인으로 다시 전환될 때에도 이를 감지하여 적절한 조치를 취할 수 있어야 합니다.

// 오프라인 상태 감지
window.addEventListener('offline', function(e) {
  alert('오프라인 상태입니다. 일부 기능을 사용할 수 없습니다.');
});

// 온라인 상태 감지
window.addEventListener('online', function(e) {
  alert('온라인 상태입니다. 모든 기능을 사용할 수 있습니다.');
});

위와 같은 오프라인 지원 기능을 통해 웹 앱은 온라인과 오프라인 상태를 함께 고려하여 더 나은 사용자 경험을 제공할 수 있습니다.

참고 문헌: