今天学习了一下离线应用,感觉棒棒哒~向前端又走进了一步~
下面就说一下我理解的离线应用,此篇先写简单一点的离线应用。
首先呢,HTML5为我们提供了离线应用这个功能,这个功能主要包括3部分:
(1)在线打开页面的同时,缓存离线文件(HTML/CSS/JS/图片/其它)
manifest文件,从现在开始我们就要牢牢记住这个名字,因为这个文件就是实现离线的关键。在这个文件中,列出了所有需要缓存资源的列表。通过在HTML文件中添加manifest文件,可以在打开网页的同时访问manifest文件,将其中所列出的资源列表全部缓存在浏览器中。在HTML文件中如下引用manifest文件。
例如:manifest文件名称为a.manifest
在HTML文件中
在HTML文件中manifest文件引用格式已经给出来啦,接下来是简单的manifest文件内部各式的介绍。
是最重要的CACHE部分,其下为所有需要离线的资源的列表。
例如:
CACHE MANIFEST
#此为注释符号
NETWORK
FALLBACK
offline.html
CACHE
b.html(加入本页面为a.html,也就是a.html文件引用了manifest文件,就无需在manifst文件缓存资源列表中写a.html了,它会自行缓存下来)
c.html
../other/c.html(此处注意“..”部分代表的是公共根目录,使用..代替即可)
有关缓存文件部分介绍完啦~~我是萌萌哒程序猿~(*^__^*) ~
(2)缓存文件更新(先介绍简单的方法)
接下来介绍一种很简单的文件缓存更新的方法。
这里一定要声明几个问题:
只有当manifest文件内容发生改变的时候,在线的时候才能更新缓存文件。大概过程就是在线时刷新出在线的页面,在读取到时,就会读取服务器上manifest文件,重新缓存新的资源列表。如果只是更改了比如js文件内部的内容,那么缓存资源不会更新,因为manifest文件没发生改变。
我们可以通过添加注释行或者增加减少资源列表等方式使manifest文件发生改变,从而达到更新缓存资源的目的。
这就是简单的缓存更新方法啦~