Promise와 함께 사용하는 오프라인 동기화 기능 개발

13 Sep 2023

Promise

현대 웹 애플리케이션은 모바일 장치에서도 사용할 수 있어야 하며, 가끔은 인터넷 연결이 불안정한 환경에서도 작동해야 합니다. 이를 위해서는 오프라인 동기화 기능이 필요한데, 이번 글에서는 Promise를 활용하여 오프라인 동기화 기능을 개발하는 방법을 알아보겠습니다.

1. IndexedDB를 사용하여 데이터 오프라인 저장

먼저, 오프라인 동기화 기능을 구현하기 위해 IndexedDB를 사용하여 데이터를 오프라인으로 저장합니다. IndexedDB는 웹 애플리케이션에서 대용량의 구조화된 데이터를 저장할 수 있는 로컬 데이터베이스입니다.

const openDatabase = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDatabase', 1);
    request.onupgradeneeded = () => {
      const db = request.result;
      const store = db.createObjectStore('myStore', { keyPath: 'id' });
    };
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
};

const saveData = (data) => {
  return openDatabase().then((db) => {
    const transaction = db.transaction(['myStore'], 'readwrite');
    const store = transaction.objectStore('myStore');
    data.forEach((item) => {
      store.put(item);
    });
    return transaction.complete;
  });
};

첫 번째 함수 openDatabase는 IndexedDB에 데이터베이스를 열고, 두 번째 함수 saveData는 데이터를 저장하는 함수입니다. saveData 함수에서는 openDatabase 함수를 호출하여 데이터베이스를 열고, 트랜잭션을 생성하여 데이터를 저장합니다.

2. 서비스 워커를 사용하여 데이터 동기화

데이터를 오프라인으로 저장했다면, 이제 서비스 워커를 사용하여 데이터를 동기화하는 기능을 구현해야 합니다. 서비스 워커는 웹 애플리케이션과 백그라운드 스레드 간에 통신을 담당하는 브라우저 기술입니다.

self.addEventListener('sync', (event) => {
  if (event.tag === 'syncData') {
    event.waitUntil(syncData());
  }
});

const syncData = () => {
  return openDatabase().then((db) => {
    const transaction = db.transaction(['myStore'], 'readwrite');
    const store = transaction.objectStore('myStore');
    return store.getAll().then((data) => {
      return fetch('/api/sync', {
        method: 'POST',
        body: JSON.stringify(data),
      }).then((response) => {
        if (response.ok) {
          return store.clear();
        }
      });
    });
  });
};

서비스 워커에서는 sync 이벤트를 리스닝하고, syncData 함수를 실행하는 로직을 작성합니다. syncData 함수에서는 데이터베이스에서 모든 데이터를 가져와 원격 서버로 동기화하는 로직을 수행합니다. 성공적으로 동기화되면 데이터베이스를 클리어합니다.

3. 사용자에게 동기화 기능 제공

이제 저장된 데이터를 온라인으로 동기화하는 기능을 사용자에게 제공해야 합니다. 사용자가 다시 온라인 상태가 되었을 때, 서비스 워커가 동기화를 수행합니다.

if (navigator.onLine) {
  navigator.serviceWorker.ready.then((registration) => {
    return registration.sync.register('syncData');
  });
}

위의 코드는 사용자가 온라인 상태인 경우, 서비스 워커를 등록하고 syncData 이벤트를 등록합니다. 이 때, syncData 이벤트가 발생하면 서비스 워커에서 동기화 작업이 수행됩니다.

요약

이처럼 Promise와 IndexedDB, 서비스 워커를 사용하여 오프라인 동기화 기능을 개발할 수 있습니다. IndexedDB를 사용하여 데이터를 오프라인으로 저장하고 서비스 워커를 통해 데이터를 동기화하는 방식은 모바일 환경에서 안정적인 웹 애플리케이션을 구현하는데 유용합니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

#Promise #OfflineSync #IndexedDB #ServiceWorker