JavaScript 오프라인 기능 구현: 웹의 새로운 지평을 열다! 🚀

Service Worker 등록하기

먼저, 웹 앱의 메인 JavaScript 파일에서 다음과 같은 코드를 작성해야 해:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
    

이 코드는 브라우저가 Service Worker를 지원하는지 확인하고, 지원한다면 '/sw.js' 파일을 Service Worker로 등록하는 역할을 해.

기본적인 Service Worker 구조

const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', function(event) {
  // 설치 단계에서 수행할 작업
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  // 네트워크 요청을 가로채서 처리하는 작업
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});
    

1. Cache Only

이 전략은 말 그대로 캐시에만 의존해. 네트워크는 전혀 사용하지 않고 오직 캐시에 있는 데이터만 사용하는 거야. 항상 같은 내용을 보여줘야 하는 정적 리소스에 적합해.

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request));
});
    

2. Network Only

이건 Cache Only의 반대야. 항상 네트워크를 통해 새로운 데이터를 가져오는 전략이지. 실시간 데이터가 중요한 경우에 사용해.

self.addEventListener('fetch', function(event) {
  event.respondWith(fetch(event.request));
});
    

3. Cache First, Falling Back to Network

이 전략은 먼저 캐시를 확인하고, 캐시에 없으면 네트워크로 요청을 보내는 방식이야. 오프라인 기능을 구현할 때 가장 많이 사용되는 전략이지.

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        return response || fetch(event.request);
      })
  );
});
    

4. Network First, Falling Back to Cache

이 전략은 먼저 네트워크로 요청을 보내고, 실패하면 캐시를 사용해. 최신 데이터를 우선으로 하면서도 오프라인 기능을 지원하고 싶을 때 사용하기 좋아.

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request)
      .catch(function() {
        return caches.match(event.request);
      })
  );
});
    

5. Stale-While-Revalidate

이 전략은 캐시된 응답을 즉시 반환하면서 동시에 네트워크 요청을 보내 캐시를 업데이트해. 빠른 응답과 최신 데이터 유지를 동시에 할 수 있는 방법이야.

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('my-cache').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        var fetchPromise = fetch(event.request).then(function(networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        });
        return response || fetchPromise;
      });
    })
  );
});
    

캐시 정리하기

self.addEventListener('activate', function(event) {
  var cacheWhitelist = ['my-site-cache-v2'];

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

IndexedDB 열기

먼저 데이터베이스를 열어야 해:

let db;
const request = indexedDB.open('MyDatabase', 1);

request.onerror = function(event) {
  console.log('데이터베이스 열기 실패');
};

request.onsuccess = function(event) {
  db = event.target.result;
  console.log('데이터베이스 열기 성공');
};

request.onupgradeneeded = function(event) {
  db = event.target.result;
  const objectStore = db.createObjectStore('talents', { keyPath: 'id' });
};
    

이 코드는 'MyDatabase'라는 이름의 데이터베이스를 열고, 'talents'라는 객체 저장소를 만들어. 여기에 재능 정보를 저장할 수 있겠지?

데이터 추가하기

function addTalent(talent) {
  const transaction = db.transaction(['talents'], 'readwrite');
  const objectStore = transaction.objectStore('talents');
  const request = objectStore.add(talent);
  
  request.onerror = function(event) {
    console.log('재능 추가 실패');
  };
  
  request.onsuccess = function(event) {
    console.log('재능 추가 성공');
  };
}

// 사용 예시
addTalent({ id: 1, name: '웹 개발', category: 'IT' });
    

데이터 읽기

function getTalent(id) {
  const transaction = db.transaction(['talents']);
  const objectStore = transaction.objectStore('talents');
  const request = objectStore.get(id);

  request.onerror = function(event) {
    console.log('재능 정보 가져오기 실패');
  };

  request.onsuccess = function(event) {
    if (request.result) {
      console.log('재능:', request.result);
    } else {
      console.log('해당 재능 정보 없음');
    }
  };
}

// 사용 예시
getTalent(1);
    

데이터 수정하기

function updateTalent(talent) {
  const transaction = db.transaction(['talents'], 'readwrite');
  const objectStore = transaction.objectStore('talents');
  const request = objectStore.put(talent);

  request.onerror = function(event) {
    console.log('재능 정보 수정 실패');
  };

  request.onsuccess = function(event) {
    console.log('재능 정보 수정 성공');
  };
}

// 사용 예시
updateTalent({ id: 1, name: '웹 개발', category: 'IT', level: '중급' });
    

데이터 삭제하기

function deleteTalent(id) {
  const transaction = db.transaction(['talents'], 'readwrite');
  const objectStore = transaction.objectStore('talents');
  const request = objectStore.delete(id);

  request.onerror = function(event) {
    console.log('재능 정보 삭제 실패');
  };

  request.onsuccess = function(event) {
    console.log('재능 정보 삭제 성공');
  };
}

// 사용 예시
deleteTalent(1);
    

1. 오프라인 상태 감지 및 알림

사용자가 오프라인 상태가 됐을 때 이를 알려주는 게 좋아. 그래야 사용자가 현재 상황을 이해하고 그에 맞게 행동할 수 있거든. 다음과 같은 코드를 사용할 수 있어:

window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

function updateOnlineStatus(event) {
  const condition = navigator.onLine ? "온라인" : "오프라인";
  const status = document.getElementById("status");
  status.textContent = condition;
  status.className = condition;

  if (condition === "오프라인") {
    showNotification("인터넷 연결이 끊겼습니다. 오프라인 모드로 전환합니다.");
  } else {
    showNotification("인터넷에 다시 연결되었습니다.");
  }
}

function showNotification(message) {
  const notification = document.createElement('div');
  notification.textContent = message;
  notification.style.position = 'fixed';
  notification.style.top = '10px';
  notification.style.right = '10px';
  notification.style.padding = '10px';
  notification.style.backgroundColor = '#333';
  notification.style.color = '#fff';
  notification.style.borderRadius = '5px';
  document.body.appendChild(notification);

  setTimeout(() => {
    document.body.removeChild(notification);
  }, 3000);
}
    

이렇게 하면 사용자는 자신의 연결 상태를 항상 알 수 있게 돼. 재능넷에서 이 기능을 사용하면 사용자들이 오프라인 상태에서도 안심하고 서비스를 이용할 수 있겠지? 😊

2. 백그라운드 동기화

사용자가 오프라인 상태에서 어떤 작업을 수행했을 때, 다시 온라인이 되면 자동으로 그 작업을 서버와 동기화하는 기능을 구현할 수 있어. 이를 위해 Background Sync API를 사용할 수 있지. 예를 들어:

// Service Worker에서
self.addEventListener('sync', function(event) {
  if (event.tag === 'sync-talents') {
    event.waitUntil(syncTalents());
  }
});

async function syncTalents() {
  const db = await openDB('MyDatabase', 1);
  const talents = await db.getAll('talents');
  
  for (let talent of talents) {
    if (talent.needsSync) {
      try {
        await fetch('/api/talents', {
          method: 'POST',
          body: JSON.stringify(talent)
        });
        talent.needsSync = false;
        await db.put('talents', talent);
      } catch (error) {
        console.error('동기화 실패:', error);
      }
    }
  }
}

// 메인 스크립트에서
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('sync-talents');
});
    

이렇게 하면 재능넷 사용자가 오프라인 상태에서 새로운 재능을 추가하거나 기존 재능을 수정해도, 나중에 온라인이 되면 자동으로 서버와 동기화가 이루어지는 거야. 완전 편리하지 않아? 😎

3. 점진적 로딩

오프라인 상태에서는 모든 데이터를 한 번에 로드하기 어려울 수 있어. 이럴 때는 점진적 로딩 기법을 사용하면 좋아. 예를 들어:

async function loadTalents(page = 1, limit = 10) {
  const db = await openDB('MyDatabase', 1);
  const talents = await db.getAll('talents', null, limit, (page - 1) * limit);
  
  const container = document.getElementById('talents-container');
  talents.forEach(talent => {
    const element = createTalentElement(talent);
    container.appendChild(element);
  });

  if (talents.length === limit) {
    const loadMoreButton = document.createElement('button');
    loadMoreButton.textContent = '더 보기';
    loadMoreButton.onclick = () => loadTalents(page + 1, limit);
    container.appendChild(loadMoreButton);
  }
}

function createTalentElement(talent) {
  const element = document.createElement('div');
  element.textContent = `${talent.name} - ${talent.category}`;
  return element;
}

// 초기 로딩
loadTalents();
    

이렇게 하면 재능넷 사용자들이 오프라인 상태에서도 스무스하게 재능 목록을 탐색할 수 있어. 데이터를 조금씩 로드하니까 초기 로딩 시간도 빨라지고, 메모리 사용량도 줄일 수 있지. 일석이조야! 👍

4. 오프라인 전용 컨텐츠

오프라인 상태일 때만 볼 수 있는 특별한 컨텐츠를 제공하는 것도 좋은 아이디어야. 예를 들어, 간단한 미니게임이나 유용한 팁 같은 걸 보여줄 수 있지. 이렇게 하면 사용자들이 오프라인 상태를 불편하게 느끼지 않고 오히려 새로운 경험으로 받아들일 수 있어.

function showOfflineContent() {
  const offlineContent = document.getElementById('offline-content');
  offlineContent.style.display = 'block';
  
  const game = document.createElement('div');
  game.textContent = '🎮 오프라인 미니게임을 즐겨보세요!';
  game.onclick = startMiniGame;
  
  const tip = document.createElement('p');
  tip.textContent = '💡 오프라인에서도 이력서를 작성하고 수정할 수 있다는 사실, 알고 계셨나요?';
  
  offlineContent.appendChild(game);
  offlineContent.appendChild(tip);
}

function startMiniGame() {
  // 여기에 간단한 미니게임 로직을 구현
  alert('미니게임 시작!');
}

// 오프라인 상태 감지 시 호출
window.addEventListener('offline', showOfflineContent);
    

이런 식으로 하면 재능넷 사용자들이 오프라인 상태에서도 지루하지 않게 시간을 보낼 수 있겠지? 😄