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