H5之離線應用

「離線儲存」：顧名思義，在有線的環境下先快取資料（包括靜態資源，動態資源），從而在離線環境下，依舊可以正常使用應用（單頁應用）

引入manifest配置檔案

...

配置manifest檔案

cache manifest # 修改配置後，附加上下面一段js**，才能更新快取 # 2016972143 cache: /dist/0.eda078350ef514670764.bundle.js /dist/common.bundle.js?v=2016972143 /dist/df9f379beae2559b27044dcfdc0653ab.png?v=2016972143 /dist/home.bundle.js?v=2016972143 /dist/home.css?v=2016972143 uncached.js?v=2016972143 #cached.css # 注釋：不快取的檔案，無論快取中存在與否，均從新獲取 network: *#uncached.js #uncached.css # 注釋：獲取不到資源時的備選路徑，如index.html訪問失敗，則返回404頁面 fallback: #/v1/team/dirlists mock/team_dirlists.json #index.html 404.html

書寫更新緩衝js

// 每次開啟頁面執行該**段，更新快取
(function () 
} else 
}, false);
cache.update()
}())

伺服器配置

配置manifest檔案，響應content-type: text/cache-manifestcache-control: max-age=0

部署線上**時更新manifest版本號與配置

按照以上配置，這樣就能實現靜態資源快取

如上圖，from cache的載入時間相比其他網路請求快得多！

其中的fetch/ajax請求不能夠通過靜態資源儲存，因為響應結果是可能會變的.

那麼對於非同步ajax請求（動態資源）要通過什麼方法才能儲存起來呢？實現真正意義的離線儲存.

使用前端資料庫可以較為靈活的控制動態資源儲存，在這裡我使用了indexeddb, 為什麼不用websql？

websql已經被棄用

websql是傳統的關聯式資料庫，indexeddb是主流的nosql db

建立乙個通用的資料庫訪問介面

var indexeddb = window.indexeddb || window.msindexeddb || window.mozindexeddb || window.webkitindexeddb;
// memcache 記憶體緩衝，避免頻繁的讀寫資料庫
var req, db, memcache = {};
if(indexeddb) );}}
// 資料庫版本改變觸發
req.onupgradeneeded=function(e));
}console.log('db version changed to ' + db.version);
};req.onerror = function (err) 
}export default 
var transaction = db.transaction('caches', 'readwrite');
var store = transaction.objectstore('caches');
var req = store.put(entity);
req.onerror = () => 
req.onsuccess = () => 
},get: (id) => 
var transaction = db.transaction('caches', 'readwrite');
var store = transaction.objectstore('caches');
var req = store.get(id);
req.onerror = () => 
req.onsuccess = (e) => })}
}

重寫fetch/ajax方法

/* reset fetch function for offline be compatible*/
var fetch = require('isomorphic-fetch')
import  from 'url'
var __fetch = fetch;
fetch = function (url) }}
function generateerrorjson() })}
var query = rlt.query;
// 去掉時間戳與重複的from引數
delete query.t;
delete query.from;
var id = rlt.pathname
var key = myutils.jsontourl(query)
if(myutils.isoffline()) )
} else )
} else )}}
} else ;
tmp[key] = resjson;
db.get(id).then(json => , json, tmp))})}
return generatejson(resjson)})
}}

可以在chrome的web tool中看到indexeddb

每次請求都快取下來了

在脫離網路後！依舊可以模擬非同步請求！

H5之離線應用

h5離線應用

H5離線快取

H5離線儲存

H5之 離線應用

h5離線應用

H5離線快取

H5離線儲存

相關推薦

H5之離線應用