html5는 오프라인 애플리케이션을 지원합니다. 오프라인 애플리케이션은 로컬 캐싱 메커니즘을 사용하여 사용자가 네트워크 없이 웹 페이지나 애플리케이션을 계속 사용할 수 있는 HTML5의 새로운 기능입니다. 오프라인 상태에서 웹 애플리케이션이 정상적으로 작동하기 위해서는 HTML 파일, CSS 파일, JavaScript 스크립트 파일 등 웹 애플리케이션을 구성하는 모든 리소스 파일을 로컬 캐시에 배치하여 서버가 연결되지 않을 때 네트워크 로컬 캐시의 리소스 파일을 사용하여 응용 프로그램을 정상적으로 실행할 수도 있습니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
HTML5에는 로컬 캐싱 메커니즘을 사용하여 오프라인 애플리케이션을 추가하여 네트워크가 없을 때에도 웹 페이지나 애플리케이션을 사용할 수 있습니다. 클라이언트가 웹 애플리케이션의 서버와 로컬로 연결되어 있지 않은 경우 클라이언트에서 로컬로 웹 애플리케이션을 사용하여 관련 작업을 정상적으로 수행할 수 있습니다.
웹 애플리케이션이 오프라인 상태에서도 제대로 작동하려면 HTML 파일, CSS 파일, JavaScript 스크립트 파일 등 웹 애플리케이션을 구성하는 모든 리소스 파일을 서버가 없을 때 로컬 캐시에 배치해야 합니다. 네트워크에 연결됨 연결되면 로컬 캐시에 있는 리소스 파일을 활용하여 웹 애플리케이션을 정상적으로 실행할 수도 있습니다.
오프라인 애플리케이션을 사용하려면 다음 단계가 필요합니다.
오프라인 감지(인터넷 연결 여부 확인)
특정 리소스에 액세스
데이터 저장을 위한 로컬 공간이 있습니다(방해하지 않음) 온라인 여부에 관계없이 읽고 쓰기)
1. 브라우저 지원 확인 방법
if(window.applicationCache){ //浏览器支持离线应用 }
2 설명 파일은 나열하는 데 사용됩니다. 캐시해야 하는 리소스와 오프라인에서 사용하기 위해 리소스를 캐시할 필요가 없는 리소스입니다. 설명 파일의 확장자는 .manifest였지만 이제는 .appcache 사용을 권장하며, 설명 파일은 올바른 MIME 유형, 즉 "text/cache-manifest"로 구성되어야 합니다. 웹 서버에서 구성해야 합니다(파일 인코딩은 UTF -8이어야 함). 서버마다 구성 방법이 다르므로 여기서는 자세히 설명하지 않습니다.
첫 번째 줄은 다음 문자열로 시작해야 합니다
CACHE MANIFEST
나머지는 캐시할 파일의 URL입니다(상대 URL은 파일이 아니라 매니페스트 파일에 상대적입니다)
#以“#”开头的是注释 common.css common.js
이 파일에 있는 모든 내용 나열된 파일은 캐시됩니다. 매니페스트에서 헤더 정보 뒤의 특수 영역 헤더를 사용하여 매니페스트 항목 유형을 식별할 수 있습니다. 위의 가장 간단한 캐시는 "CACHE:" 영역에 속합니다.
이렇게#该头信息之后的内容需要缓存 CACHE: common.css connom.js
"NETWORK:"로 시작하는 영역에 나열된 파일은 항상 온라인에서 얻어지며 캐시되지 않습니다.
NETWORK: 헤더 정보는 와일드카드 문자 "*"를 지원합니다. 나열된 것입니다 네트워크를 통해 로드됩니다 #该头信息之后的内容不需要缓存,总是从线上获取
NETWORK:
a.css
#表示以name开头的资源都不要缓存
name/
FALLBACK: name/ example.html목록에는 여러 영역이 있을 수 있으며 위치에는 제한이 없습니다.
설명 파일을 페이지와 연결하려면 html 태그의 매니페스트 속성을 사용하여 설명 파일의 경로를 지정해야 합니다.
<html manifest='./offline.appcche'>
HTML5에는 새로운 navigator.onLine 속성이 있습니다.
이 속성이 true이면 온라인을 의미하고, false이면 오프라인을 의미합니다.if(navigator.onLine){ //联网 }else{ //离线 }
window.online = function(){ //需要触发的事件 }
offline 이벤트(지원됨) IE9+ 브라우저)
온라인에서 네트워크가 변경될 때 이 이벤트는 오프라인일 때 발생합니다. 온라인 이벤트와 마찬가지로 이 이벤트는 새로 고침 없이 창에서 발생합니다.window.offline = function(){ //需要触发的事件 }
一个web应用首次下载并缓存之后,任何加载请求都优先来自于缓存,因此可以实现离线缓存。如果不需要使用离线缓存了,就需要在服务器端删除描述文件,或者删除HTML页面中的manifest属性。
一旦应用被缓存,则缓存始终不变。那么,怎样才能改变缓存
如果服务器上的文件有所修改的话,那么修改描述文件中注释行的日期或者版本号是一个不错的使浏览器重新缓存文件的办法
此外,我们还可以使用HTML5提供的API来操作和更新缓存
applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可以触发一系列与缓存状态相关的事件。
这个对象有一个status属性,值为常量,表示缓存状态
这个对象有以下事件,表示其状态的改变
一般来讲,这些事件会随着页面加载按上述顺序依次触发
通过update()方法也可以手工干预,让应用缓存为检查更新而触发上述事件
applicationCache.update();
update()一经调用,应用缓存就会去检查描述文件是否更新,触发checking事件,然后页面就会像刚刚加载一样,继续执行后续操作。如果触发了cached事件,则说明应用缓存已经准备就绪,不会再发生其他操作。
如果触发了updateready事件,则说明新版本的应用缓存已经可用,需要调用swapCache()方法来启用新的应用缓存。
applicationCache.onupdateready = function(){ applicationCache.swapCache(); };
浏览器检查清单文件,以及更新缓存的操作是异步的,因此可能是在载入旧缓存之后进行,因此可能需要载入两次才能显示最新的内容,因此需要提示用户
window.applicationCache.onupdateready = function(){ var con = comfirm('有新内容可用,是否重新加载?'); if(con){ location.reload(); } }
相关推荐:《html视频教程》
위 내용은 html5는 오프라인 애플리케이션을 지원합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!