HTML5 오프라인 애플리케이션 및 클라이언트 스토리지 구현

저자：Eve Cole 업데이트 시간：2025-01-25 09:00:03

오프라인 웹 애플리케이션 개발 지원은 HTML5의 또 다른 초점입니다. 소위 오프라인 웹 애플리케이션은 장치가 인터넷에 접속할 수 없는 경우에도 계속 실행할 수 있는 애플리케이션입니다.

오프라인 웹 애플리케이션을 개발하려면 여러 단계가 필요합니다. 첫 번째는 기기가 인터넷에 액세스할 수 있는지 여부를 앱이 인식하여 다음에 올바른 조치를 취할 수 있도록 하는 것입니다. 그런 다음 애플리케이션이 제대로 작동하려면 특정 리소스(이미지, Javascript, CSS 등)에 대한 액세스 권한도 있어야 합니다. 무엇보다 사용자가 데이터를 저장할 수 있는 로컬 공간이 있어야 하며, 인터넷 접속 여부에 관계없이 읽고 쓰는 데 방해가 되지 않습니다.

HTML5 및 관련 API를 사용하면 오프라인 애플리케이션 개발이 현실화됩니다.

오프라인 감지

장치가 온라인인지 오프라인인지 확인하기 위해 HTML5는 navigator.onLine 속성을 정의합니다. true 값은 장치가 인터넷에 액세스할 수 있음을 나타내고 false 값은 장치가 오프라인임을 나타냅니다.

 if (navigator.onLine) { // 정상적으로 작동합니다.} else { // 오프라인 상태에서 작업을 수행합니다.}

navigator.onLine에는 navigator.onLine 속성 외에도 특정 호환성 문제가 있으므로 네트워크 사용 가능 여부를 더 잘 확인하기 위해 HTML5는 온라인과 오프라인의 두 가지 이벤트도 정의합니다.

다음 두 이벤트는 네트워크가 오프라인과 온라인 사이를 전환할 때 창 개체에서 트리거됩니다.

 window.addEventListener('online', function() { // 정상적으로 작동함}); window.addEventListener('offline', function() { // 오프라인일 때 작업 수행});

실제 애플리케이션에서는 페이지가 로드된 후 navigator.onLine을 통해 초기 상태를 얻는 것이 가장 좋습니다. 그런 다음 위의 두 가지 이벤트를 사용하여 네트워크 연결 상태가 변경되는지 확인합니다. 위 이벤트가 발생하면 navigator.onLine 속성 값도 변경되지만, 네트워크 상태 변화를 감지하려면 이 속성을 수동으로 폴링해야 합니다.

애플리케이션 캐시

HTML5의 애플리케이션 캐시, 줄여서 appcache는 오프라인 웹 애플리케이션 개발을 위해 특별히 설계되었습니다. Appcache는 브라우저의 캐시와 분리된 캐시 영역입니다. 이 캐시에 데이터를 저장하려면 다운로드하고 캐시할 리소스를 나열하는 매니페스트 파일을 사용하세요. 설명 파일 예:

 캐시 매니페스트# Commentfile.jsfile.css

그런 다음 HTML로 인용하십시오.

 <html 매니페스트=./xxx.manifest>

xxx.manifest 파일의 MIME 유형은 text/cache-manifest여야 합니다.

이 API의 핵심은 applicationCache 개체입니다. 이 개체에는 상태 속성이 있으며, 이 속성의 값은 다음과 같은 애플리케이션 캐시의 현재 상태를 나타냅니다.

0: 캐시 없음, 즉 페이지와 관련된 애플리케이션 캐시가 없습니다.
1: 유휴 상태, 즉 애플리케이션 캐시가 업데이트되지 않았습니다.
2: 확인, 즉 설명 파일 다운로드 및 업데이트 확인
3: 다운로드 중, 즉 애플리케이션 캐시가 설명 파일에 지정된 리소스를 다운로드 중입니다.
4: 업데이트가 완료되었습니다. 즉, 애플리케이션 캐시가 리소스를 업데이트했으며 모든 리소스가 다운로드되어 swapCache()를 통해 사용할 수 있습니다.
5: 폐기됨, 즉 애플리케이션 캐시 설명 파일이 더 이상 존재하지 않으므로 페이지에서 더 이상 애플리케이션 캐시에 액세스할 수 없습니다.