자바스크립트 fetch API를 사용한 오프라인 웹 애플리케이션 구현

10 Sep 2023

javascript

오프라인 웹 애플리케이션은 사용자가 인터넷 연결이 없는 상황에서도 동작할 수 있는 웹 앱을 말합니다. 이러한 애플리케이션을 구현하기 위해서는 사용자의 장치에 데이터를 캐시하고, 필요한 경우에는 캐시된 데이터를 사용해야 합니다. 자바스크립트의 fetch API를 사용하면 이러한 요구사항을 간단하게 구현할 수 있습니다.

fetch API 소개

fetch API는 네트워크 요청을 생성하고 응답을 처리하는 데 사용되는 웹 표준입니다. 이 API는 XMLHttpRequest와 비슷한 기능을 제공하지만, 더욱 간편하고 유연한 인터페이스를 제공합니다. fetch API를 사용하면 RESTful API, JSON 데이터, 이미지 등 다양한 자원을 가져올 수 있습니다.

fetch API를 이용한 오프라인 웹 애플리케이션 구현 절차

애플리케이션의 핵심 데이터를 로컬스토리지 또는 IndexedDB에 저장합니다.
애플리케이션이 인터넷에 접속되어 있는지 확인합니다.
인터넷에 접속되어 있는 경우, 핵심 데이터를 서버로부터 새로 가져옵니다.
가져온 데이터를 로컬스토리지 또는 IndexedDB에 저장합니다.
인터넷이 연결되어 있지 않은 경우 저장된 핵심 데이터를 사용하여 애플리케이션을 동작시킵니다.
인터넷이 연결되었을 때, 사용자가 새로고침을 요청할 경우 서버로부터 새로운 데이터를 가져와서 저장된 데이터를 업데이트합니다.

이제 위의 절차를 자바스크립트의 fetch API를 사용하여 구현해보겠습니다.

예제 코드

// 1. 로컬스토리지에 데이터 저장
function saveDataToLocalStorage(data) {
  localStorage.setItem('key', JSON.stringify(data));
}

// 2. 오프라인 확인 함수
function isOffline() {
  return !navigator.onLine;
}

// 3. 서버로부터 데이터 가져오기
function fetchDataFromServer() {
  return fetch('https://api.example.com/data')
    .then(response => response.json());
}

// 4. 가져온 데이터를 로컬스토리지에 저장
function saveDataToLocal(data) {
  saveDataToLocalStorage(data);
}

// 5. 로컬스토리지에서 데이터 가져오기
function fetchDataFromLocal() {
  const data = localStorage.getItem('key');
  return JSON.parse(data);
}

// 6. 데이터 업데이트
function updateData() {
  if (isOffline()) {
    const data = fetchDataFromLocal();
    // 데이터를 사용하여 애플리케이션 동작
  } else {
    fetchDataFromServer()
      .then(data => {
        saveDataToLocal(data);
        // 데이터를 사용하여 애플리케이션 동작
      });
  }
}

// 페이지 로드 시 데이터 업데이트
window.addEventListener('load', updateData);

// 새로고침 버튼 클릭 시 데이터 업데이트
const refreshButton = document.querySelector('#refresh-button');
refreshButton.addEventListener('click', updateData);

위의 예제 코드에서는 saveDataToLocalStorage 함수를 통해 데이터를 로컬스토리지에 저장하고, isOffline 함수를 통해 인터넷 연결 상태를 확인합니다. fetchDataFromServer 함수는 서버로부터 데이터를 가져오는데, 이때 fetch API를 사용하고 있습니다. 가져온 데이터는 saveDataToLocal 함수를 통해 로컬스토리지에 저장됩니다. fetchDataFromLocal 함수는 로컬스토리지로부터 데이터를 가져오는 역할을 합니다. 마지막으로 updateData 함수는 인터넷 연결 여부에 따라 데이터를 업데이트하고, 애플리케이션을 동작시킵니다.

이렇게 fetch API를 사용하여 오프라인 웹 애플리케이션을 구현할 수 있습니다. fetch API는 간편하게 네트워크 요청을 다룰 수 있는 기능을 제공하기 때문에 많은 개발자들에게 유용한 도구입니다.