html5支援離線應用程式。離線應用程式是html5新增的特性,利用本機快取機制,使得使用者可以在網頁或應用程式在沒有網路的情況下依然可以使用。為了能夠讓Web應用程式在離線狀態的時候也能正常運作,必須把所有構成Web應用程式的資源文件,諸如HTML文件,CSS文件,JavaScript腳本文件放在本地快取中,這樣當伺服器沒有和網路連接時,也可以利用本地快取中的資源檔案來正常運行應用程式。
本教學操作環境:windows7系統、HTML5版、Dell G3電腦。
HTML5新增了離線應用,利用本機快取機制,離線應用程式使得我們可以在網頁或應用程式在沒有網路的情況下依然可以使用。當客戶端本機與web應用程式的伺服器沒有建立連線時,也能正常在客戶端本機使用該web應用程式進行有關操作。
為了能夠讓Web應用程式在離線狀態的時候也能正常工作,必須把所有構成Web應用程式的資源文件,諸如HTML文件,CSS文件,JavaScript腳本文件放在本地快取中,當伺服器沒有和網路連線時,也可以利用本機快取中的資源檔案來正常執行Web應用程式。
離線應用程式的使用需要以下幾個步驟:
離線偵測(決定是否連網)
存取一定的資源
有一塊本地空間用來保存資料(無論是否上網都不妨礙讀寫)
1、檢查瀏覽器的支援情況的方法
if(window.applicationCache){ //浏览器支持离线应用 }
#2、關於描述檔
描述檔用來列出需要快取和不需要快取的資源,以備離線時使用。
描述檔的副檔名以前使用.manifest,現在推薦使用.appcache,並且描述檔需要配置正確的MIME-type,即"text/cache-manifest",必須在web伺服器上進行設定(文件編碼必須是UTF-8)。不同的伺服器有不同的設定方法,具體這裡不詳述。
首行必須以以下字串開始
CACHE MANIFEST
剩下的就是要快取的文件的URL,一行一個(相對URL是相對於清單文件而言的,不是相對於文件)
#以“#”开头的是注释 common.css common.js
這樣這個檔案中列舉的所有的檔案都會被快取
在清單中,可以使用特殊的區域頭來標識頭資訊之後的清單項目的類型,上面的最簡單的快取屬於"CACHE:"區域。
像這樣
#该头信息之后的内容需要缓存 CACHE: common.css connom.js
以"NETWORK:"開頭的區域列舉的文件,總是從線上獲取,不緩存
##NETWORK:頭資訊支持通配符"*",表示任何未明確列舉的資源,都將透過網路載入#该头信息之后的内容不需要缓存,总是从线上获取 NETWORK: a.css #表示以name开头的资源都不要缓存 name/
以"FALLBACK:"開頭的區域中的內容,提供了取得不到快取資源時的備選資源路徑該區域中的內容,每一行包含兩個URL(第一個URL是一個前綴,任何符合的資源都不被緩存,第二個URL表示需要被緩存的資源)
FALLBACK: name/ example.html一個清單可以有任意多個區域,且位置沒有限制。
3、建立離線應用程式假設我們要建立一個包含css,js,html的單頁應用,同時要為這個單頁應用程式新增離線支援。
<html manifest='./offline.appcche'>開發離線應用程式的第一步就是偵測裝置是否離線
當該屬性為true的時候表示聯網,值為false的時候,表示離線
if(navigator.onLine){ //联网 }else{ //离线 }** 附註:IE6以上瀏覽器及其他標準瀏覽器都支援此屬性**
window.online = function(){ //需要触发的事件 }
當網路從線上變成離線的時候觸發該事件,和online事件一樣,在window上觸發該事件,不需要刷新
window.offline = function(){ //需要触发的事件 }應用程式快取應用程式快取(Application Cache)是從瀏覽器的快取中分出來的一塊快取區(大小依特定瀏覽器而定,一般是5M)應用快取和網頁快取的差別:
一个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中文網其他相關文章!