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);
}
例如
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);
}
留言
張貼留言