웹 앱은 오프라인 환경에서도 작동할 수 있도록 처리해야 합니다. 이를 위해 Promise를 사용하여 오프라인 모드에서 웹 앱의 동작을 제어할 수 있습니다.

1. 오프라인 상태 확인

웹 앱의 오프라인 상태를 확인하기 위해 navigator.onLine 속성을 사용할 수 있습니다. 이 속성은 브라우저가 현재 온라인인지 오프라인인지를 나타냅니다.

if (navigator.onLine) {
    // 온라인 상태 처리
} else {
    // 오프라인 상태 처리
}

2. Promise를 사용한 네트워크 요청 처리

오프라인 상태에서 네트워크 요청을 처리하기 위해 Promise를 사용할 수 있습니다. Promise는 비동기적인 작업을 처리하는데 도움을 주는 자바스크립트 객체입니다.

function makeRequest(url) {
    return new Promise(function(resolve, reject) {
        if (navigator.onLine) {
            // 온라인 상태에서 네트워크 요청 처리
            fetch(url)
                .then(function(response) {
                    resolve(response);
                })
                .catch(function(error) {
                    reject(error);
                });
        } else {
            // 오프라인 상태에서 네트워크 요청 처리
            reject(new Error('오프라인 상태입니다.'));
        }
    });
}

// 사용 예시
makeRequest('https://api.example.com/data')
    .then(function(response) {
        // 요청 성공시 처리
        console.log(response);
    })
    .catch(function(error) {
        // 요청 실패시 처리
        console.error(error);
    });

위 코드에서 makeRequest() 함수는 fetch()를 사용하여 네트워크 요청을 처리합니다. 온라인 상태에서는 네트워크 요청이 정상적으로 처리되고, 오프라인 상태에서는 Promise가 에러를 반환합니다.

3. Service Worker를 사용한 오프라인 캐싱

더 나아가, Service Worker를 사용하여 웹 앱의 리소스를 오프라인 상태에서도 캐싱할 수 있습니다. Service Worker는 백그라운드에서 실행되는 스크립트로서, 네트워크 요청을 가로채고 캐시된 리소스를 반환하는 역할을 수행합니다.

```javascript // Service Worker 등록 if (‘serviceWorker’ in navigator) { navigator.serviceWorker.register(‘/service-worker.js’) .then(function(registration) { console.log(‘Service Worker 등록 성공:’, registration); }) .catch(function(error) { console.err