오프라인 웹 애플리케이션 개발 지원은 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 개체입니다. 이 개체에는 상태 속성이 있으며, 이 속성의 값은 다음과 같은 애플리케이션 캐시의 현재 상태를 나타냅니다.
관련 이벤트:
일반적으로 이러한 이벤트는 페이지가 로드될 때 위에서 언급한 순서대로 트리거됩니다. 위 이벤트는 update() 메서드를 호출하여 수동으로 트리거할 수도 있습니다.
데이터 저장 쿠키일반적으로 쿠키라고 불리는 HTTP 쿠키는 클라이언트에서 세션 정보를 저장하는 데 사용됩니다. 표준에 따르면 서버는 세션 정보가 포함된 HTTP 요청에 대한 응답의 일부로 Set-Cookie HTTP 헤더를 보내야 합니다. 서버 응답 헤더 예:
HTTP/1.1 200 확인
콘텐츠 유형: 텍스트/html
쿠키 설정: 이름=값
기타 헤더: 기타 헤더 값
그런 다음 브라우저는 세션 정보를 쿠키로 설정한 다음 아래와 같이 정보를 서버로 다시 보내기 위해 각 요청에 쿠키 HTTP 헤더를 추가합니다.
GET /index.html HTTP/1.1
쿠키: 이름=값
기타 헤더: 기타 헤더 값
서버로 다시 전송된 추가 정보는 클라이언트가 어떤 요청에서 왔는지 고유하게 확인하는 데 사용될 수 있습니다.
완전한 쿠키에는 다음이 포함됩니다: