2015年12月21日 星期一

HTML5 - 離線網頁更新

需要提供一個cache manifest文件,理出所有需要在離線狀態下使用的資源
例如

Manifest代碼

CACHE MANIFEST   
#這是注釋  
images/sound-icon.png  
images/background.png  
clock.html   
clock.css   
clock.js    
 
NETWORK:   
test.cgi  
 
CACHE:   
style/default.css  
 
FALLBACK:   
/files/projects /projects 

在html標簽中聲明 <html manifest="clock.manifest">

HTML5離線應用更新緩存機制
分爲手動更新和自動更新2種
自動更新:
在cache manifest文件本身發生變化時更新緩存 資源文件發生變化不會觸發更新
手動更新:
使用window.applicationCache
Js代碼

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {  
    window.applicationCache.update();  
}  

在線狀態檢測
HTML5 提供了兩種檢測是否在線的方式:navigator.online(true/false) 和 online/offline事件。

在Android中構建離線應用

Java代碼

//開啓應用程序緩存  
webSettingssetAppCacheEnabled(true);  
String dir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();  
//設置應用緩存的路徑  
webSettings.setAppCachePath(dir);  
//設置緩存的模式  
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);  
//設置應用緩存的最大尺寸  
webSettings.setAppCacheMaxSize(1024*1024*8);  
 
//擴充緩存的容量  
public void onReachedMaxAppCacheSize(long spaceNeeded,  
            long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {  
    quotaUpdater.updateQuota(spaceNeeded * 2);  

沒有留言:

張貼留言