实现离线缓存非常简单，只需要在html标签上添加manifest属性就可以了
<html manifest="cache.manifest">
....
</html>然后在创建一个cache.manifest文件
文件中的内容是
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.htmlCACHE：必选，这里面的写入的文件资源都是会被离线缓存的。
NETWORK：可选，这里面的文件资源列表是需要联网才能访问的，不会被离线缓存。如果CACHE和NETWORK有同名文件资源，那么那个文件资源也会被离线缓存。这说CACHE的优先级比较高
FALLBACK：可选，表示如果第一个资源不可访问，那么就用第二个资源访问，这里就是用offline.html代替目录中的所有文件
离线缓存分两步：
1.处于在线状态，如果发现html中有manifest属性，那么浏览器就会去拿到manifest文件，如果是第一次访问，浏览器就会通过manifest中的内容下载相应的资源并进行离线缓存。如果不是第一次访问，那么浏览器就会调用离线缓存的资源加载页面。然后浏览器会对比新的manifest文件和旧的manifest文件，如果没有变化，那么就不进行操作。如果在服务器上修改了离线缓存过的文件资源，浏览器就会下载新的文件资源并且进行离线缓存。注意：服务器的资源发生变化时，我们要修改manifest文件，可以修改版本号#v0.11为#v0.12，不然浏览器是不会重新下载新的文件资源并进行离线缓存的，它会认为文件资源没有变动。从而使用之前缓存的文件资源。当更新了文件资源后，需要刷新页面或者重启页面才会看到新的文件资源，因为浏览器是先调用离线资源加载页面再进行缓存新资源的。如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效。
2.处于离线状态，直接使用离线缓存的资源。