由于在生活中，經常會遇到有些時候手機沒有信號沒有網絡什么的，就訪問不了應用了，但是我們應用有很多東西又是不怎么變化的，所以這兩天看了下有關離線緩存方面的文章，自己簡單實現了下：
網上都是tomcat的方式的，我使用的是nodejs的方式。
1.創建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("本地緩存已被更新,需要刷新頁面來獲取應用程序最新版本")) {
//手動更新本地緩存，只能在onupdateready事件觸發時調用
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是需要網絡加載的資源（可選），因為瀏覽器解析到index.html的第一行時，會去讀這份緩存清單，先看該清單與沒有改變，沒有改變則使用緩存中的文件，否則更新緩存刷新頁面，流程是這樣的：
緩存流程
然后還有最重要的一步是：demo.appcache的返回首部字段
mime必須是text/cache-manifest,如果你用PC端訪問的的話，記得不要勾選disable cache選項
不要勾選disable cache選項
你會發現，在你的緩存中會有這些東西：
image.png
你此時把服務給關掉或者網絡斷掉就會發現還依然可以訪問網頁，但是b.png無法訪問，因為他沒有被緩存下來。
下面是瀏覽器對h5離線緩存的支持情況
h5離線緩存支持情況
