오프라인 웹 애플리케이션은 사용자가 인터넷에 연결되지 않은 상태에서도 작동할 수 있는 웹 애플리케이션입니다. 이러한 애플리케이션은 신속하고 안정적인 사용자 경험을 제공하며, 네트워크 연결이 불안정한 환경에서도 작동할 수 있습니다.
자바스크립트의 fetch API는 웹 애플리케이션에서 데이터를 가져오는 데 사용되는 고급 네트워킹 인터페이스입니다. 이 API를 사용하여 오프라인 웹 애플리케이션을 구현하는 방법을 알아보겠습니다.
1. 캐싱 지원하기
오프라인 상태에서 사용자가 애플리케이션을 이용하기 위해 필요로 하는 데이터를 캐싱하여 저장합니다. 이를 위해 Service Worker를 사용할 수 있습니다. Service Worker는 웹 애플리케이션과 브라우저 사이에서 대리자 역할을 합니다.
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);
});
}
Service Worker를 등록하기 위해 navigator.serviceWorker.register()를 호출하고, Service Worker 스크립트의 경로를 전달합니다.
Service Worker 스크립트의 예시:
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-cache')
.then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/script.js'
]);
})
);
});
위의 예시 코드에서는 웹 애플리케이션의 핵심 파일을 캐싱하고 있습니다. caches.open()을 사용하여 캐시를 열고, cache.addAll()을 사용하여 캐시에 파일을 추가합니다.
2. 오프라인 상황에서 데이터 가져오기
fetch API를 사용하여 네트워크 연결이 가능한 경우에는 서버에서 데이터를 가져오고, 그렇지 않은 경우에는 캐시된 데이터를 사용합니다.
function getDataFromCacheOrNetwork(url) {
return caches.match(url)
.then((response) => {
if (response && navigator.onLine) {
// 캐시된 데이터가 있고, 온라인 상태일 경우
return fetch(url)
.then((networkResponse) => {
// 서버에서 데이터 가져오기
return networkResponse;
})
.catch((error) => {
console.error('Network request failed:', error);
return response;
});
} else {
// 캐시된 데이터 사용
return response;
}
})
.catch((error) => {
console.error('Cache match failed:', error);
});
}
위의 예시 코드에서 caches.match()를 사용하여 캐시된 데이터를 가져옵니다. 가져온 데이터와 navigator.onLine을 사용하여 온라인 상태인지 확인한 후, 필요한 경우에만 서버에서 데이터를 가져옵니다.
3. 런타임 캐싱
Runtime Caching은 Service Worker를 사용하여 오프라인 상태에서 애플리케이션 요청에 대한 응답을 제어하는 방법입니다.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then((response) => {
if (response) {
// 캐시에 저장된 응답 사용
return response;
}
return fetch(event.request)
.then((networkResponse) => {
// 동적으로 요청에 대한 응답을 캐싱하고 반환
return caches.open('my-cache')
.then((cache) => {
cache.put(event.request, networkResponse.clone());
return networkResponse;
});
})
.catch(() => {
console.error('Network request failed');
});
})
);
});
위의 예시 코드에서 Service Worker의 fetch 이벤트를 사용하여 요청에 대한 응답 조작을 수행합니다. caches.match()를 사용하여 캐시된 응답을 찾고, 없는 경우에만 서버에서 데이터를 가져옵니다. 가져온 데이터를 캐시에 저장한 후에는 해당 응답을 반환합니다.
이와 같이 자바스크립트의 fetch API를 사용하여 오프라인 웹 애플리케이션을 구현할 수 있습니다. 오프라인 상황에서도 애플리케이션이 제대로 작동하고 필요한 데이터를 효율적으로 관리할 수 있습니다.