网站首页 » 前端开发 » HTML5 » 移动web福音:HTML 5 应用程序缓存
上一篇:
下一篇:

移动web福音:HTML 5 应用程序缓存

前言

虽然现在有了4G网络,也快奔5G网络了,但是移动WEB在移动端表现还不是很出色,其中一个最关键的原因就是网速问题,移动端网速才是王道,如果你的移动应用打开得慢了,那么还有谁愿意花几十秒来等你这个网页下载完呢?

不过值得我们高兴的是HTML5给我们带来了一大惊喜:应用程序缓存。其实它的强大之处不是表现在功能上,而是用户体验上。他可以让你的移动WEB页面得到更快的响应以及更加快的展现在用户页面。HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

优势

HTML 5 应用程序缓存的好处:

离线浏览 – 用户可在应用离线时使用它们。

速度 – 已缓存资源加载得更快。

减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

浏览器支持:所有主流浏览器均支持应用程序缓存,除了 Internet Explorer。对于移动端来说浏览器不是问题。

浏览器支持

浏览器支持情况

我用自己的 朝夕熊博客 进行了一次测试,结果录再一次打开页面时几乎是秒开,跟平时大家使用的APP速度不相上下。

那么这个HTML 5 应用程序缓存要怎么使用呢?下面我们就给大家分享下我们实践过程及心得。

代码及含义

含义

manifest 文件可分为三个部分:

CACHE MANIFEST – 在此标题下列出的文件将在首次下载后进行缓存

NETWORK – 在此标题下列出的文件需要与服务器的连接,且不会被缓存

FALLBACK – 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

代码示例

1. 新建一个后缀名为.appcache的文件,具体代码如下:

CACHE MANIFEST
#v0.0.1.1
/mobile/style/zxx.css
/mobile/js/jquery.min.js
/mobile/js/jquery.lazyload.min.js
/mobile/js/zxx.js
/mobile/style/fonts/icomoon.svg
/mobile/style/fonts/icomoon.eot
/mobile/style/fonts/icomoon.ttf
/mobile/style/fonts/icomoon.woff

NETWORK:
*

代码剖析

第一行代码CACHE MANIFEST 是必需的。紧跟着的 #v0.0.1.1 可以看作是版本号,这个你可以随便写的,它的作用就是用于文件的更新。后面的就是你要设置的允许本地缓存的资源,当一些较大的,不常改动的文件设置成本地缓存资源是一种不错的选择。

第二个代码块

NETWORK:
*

这段代码的意思是除是前面设置的文件可缓存外,其它的文章都必需连网才可以访问。

.appcache文件里的最后一块:

FALLBACK:
/html5/ /404.html

FALLBACK – 在此标题下列出的文件规定当页面无法访问时,则用 “offline.html” 替代 /html5/ 目录中的所有文件

一个完整的.appcache文件代码

CACHE MANIFEST
#v0.0.1.1

/mobile/style/zxx.css
/mobile/js/jquery.min.js
/mobile/js/jquery.lazyload.min.js
/mobile/js/zxx.js
/mobile/style/fonts/icomoon.svg
/mobile/style/fonts/icomoon.eot
/mobile/style/fonts/icomoon.ttf
/mobile/style/fonts/icomoon.woff

NETWORK:
*

FALLBACK:
/html5/ /404.html

最后一块代码FALLBACK可写可不写。但第二块代码就必需写,不写的话,除了设置了可缓存的文件可以读取外,其它文件都读取不到的。

2. .appcache文件文件配置好后,最后一步就是在HTML文件中调用了。在你想设置缓存的页面在<html>标签引用这个文件就大功告成了。

<html lang="en" manifest="path/hc.appcache">

其中path为你的.appcache文件的存放路径。hc为文件名。

如果更新了可缓存的文件,想客户浏览器上的文件也同步更新下要怎么做呢?方法就是我们前面提到的通过修改版本号来通知客户端浏览器文件已更新需同步。版本号可以随便写一个,只要跟之前的版本号不一样就可以了。

个人感觉

在设置了HTML 5 应用程序缓存后,自己也通过朝夕熊博客分别用手机和电脑都感受了几天,刚刚打开速度可以说非常地快。在脱机下也可以浏览,前提是你之前有打开过这个页面。还有一点需要要注意的是如果你图片设置了需要连网才可以访问的话,那么,当你离线访问时,图片是不会出来的。这个就得根据你个人的需要来进行设置了。现在遇到一个最最头疼的问题就我网站更新了一篇文章后,每次都需要修改下.appcache文件,这对于每天都需要更新的朋友来说也是一件麻心事。

我在网上找了一下,其中有一个方法就是使用iframe框架来引入需要动态显示的部分。这个方法我没试过,不过按道理是没问题的。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/application-cache/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END