由于在生活中，經(jīng)常會遇到有些時候手機(jī)沒有信號沒有網(wǎng)絡(luò)什么的，就訪問不了應(yīng)用了，但是我們應(yīng)用有很多東西又是不怎么變化的，所以這兩天看了下有關(guān)離線緩存方面的文章，自己簡單實(shí)現(xiàn)了下：
網(wǎng)上都是tomcat的方式的，我使用的是nodejs的方式。
1.創(chuàng)建index.html
<!DOCTYPE html>
<html lang="en" manifest="/cache/demo.appcache">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>測試緩存</title>
</head>
<body>
<h2>文件緩存測試12345</h2>
<a href="./a.html">去新頁面</a>
<img src="/public/1.png" alt="">
<img src="/public/2.png" alt="">
</body>
<script>
applicationCache.onupdateready = function() {
if (confirm("本地緩存已被更新,需要刷新頁面來獲取應(yīng)用程序最新版本")) {
//手動更新本地緩存，只能在onupdateready事件觸發(fā)時調(diào)用
applicationCache.swapCache();
location.reload();
}
}
</script>
</html>
其中看到第一行<html lang="en" manifest="/cache/demo.appcache">,manifest的屬性值是緩存的菜單文件，看看里面寫的是什么：
CACHE MANIFEST
# v1.0.7
CACHE:
/public/index.html
/public/a.html
/public/1.png
NETWORK:
/public/2.png
CACHE MANIFEST是必選的，CACHE是需要緩存的資源（可選），NETWORK是需要網(wǎng)絡(luò)加載的資源（可選），因?yàn)闉g覽器解析到index.html的第一行時，會去讀這份緩存清單，先看該清單與沒有改變，沒有改變則使用緩存中的文件，否則更新緩存刷新頁面，流程是這樣的：
緩存流程
然后還有最重要的一步是：demo.appcache的返回首部字段
mime必須是text/cache-manifest,如果你用PC端訪問的的話，記得不要勾選disable cache選項(xiàng)
不要勾選disable cache選項(xiàng)
你會發(fā)現(xiàn)，在你的緩存中會有這些東西：
image.png
你此時把服務(wù)給關(guān)掉或者網(wǎng)絡(luò)斷掉就會發(fā)現(xiàn)還依然可以訪問網(wǎng)頁，但是b.png無法訪問，因?yàn)樗麤]有被緩存下來。
下面是瀏覽器對h5離線緩存的支持情況
h5離線緩存支持情況
