今天学习了一下离线应用,感觉棒棒哒~向前端又走进了一步~

下面就说一下我理解的离线应用,此篇先写简单一点的离线应用。

 首先呢,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文件发生改变,从而达到更新缓存资源的目的。

这就是简单的缓存更新方法啦~