博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5应用程序缓存实现离线Web网页或应用
阅读量:7120 次
发布时间:2019-06-28

本文共 1219 字,大约阅读时间需要 4 分钟。

HTML5应用程序缓存和浏览器缓存的区别。

(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度。但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接。如果网络没有连接,即使浏览器启用了对一个站点的缓存,依然无法打开这个站点。只会收到一条错误信息。而使用离线web应用,我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件,并且在网络离线状态下依然能够访问这个网站。

如何实现HTML5应用程序缓存。

实现HTML5应用程序缓存非常简单,只需三步,并且不需要任何API。只需要告诉浏览器需要离线缓存的文件,并对服务器和网页做一些简单的设置即可实现。

•创建一个 cache.manifest 文件,并确保文件具有正确的内容

•在服务器上设置内容类型
•所有的HTML文件都指向 cache.manifest
首先我们需要建立一个名为 cache.manifest 的文件,Windows平台下用记事本即可(也可用其他的IDE)。文件内容如下:

CACHE MANIFEST

#v1 - 2013-09-09

CACHE:

index.html
favicon.ico
css/main.css

NETWORK: *

其中 CACHE: 之后的部分为列出我们需要缓存的文件。 NETWORK: 之后可以指定在线白名单,即列出我们不希望离线存储的文件,因为通常它们的内容(www.111cn.net)需要互联网访问才有意义。另外,在此部分我们可以使用快捷方式:通配符*。这将告诉浏览器,应用服务器中获取没有在显示部分中提到的任何文件或URL。需要特别指出的是,上面例子中的注释 v1 很有必要存在。只有当 cache.manifest 文件发生变化时,浏览器才会去更新应用缓存。如果你要更改缓存资源,你必须同时修改此文件中的内容,以便让浏览器知道它们需要更新缓存。你可以对清单文件做任何改动,但大家都认同的最佳实践则是修正版本号(即v*)。

接下来需要在服务器上设置内容类型:

假使你使用的事Apache服务器,在.htaccess文件中添加以下代码:

AddType text/cache-manifest .manifest最后,我们需要将HTML页面指向清单文件。通过设置每一个页面中HTML元素的manifest属性来完成这一步:

<html manifest="/cache.manifest">完成这一步后,就完成了web离线缓存的所有步骤。由于浏览的文件内容都没有更改且存储在本地,因此现在网页的打开速度会更快(即使是在线状态也如此)。

需要注意的问题:

•网站的每一个html页面都必须设置html元素的manifest属性。一定要这样做;

•在你的整个网站应用中,只能有一个cache.manifest文件(建议放在网站根目录下);
•部分浏览器(如IE8-)不支持HTML5离线缓存;
from:

转载地址:http://vxxel.baihongyu.com/

你可能感兴趣的文章
elasticsearch-head插件安装
查看>>
2018-10-05学习笔记
查看>>
Python进阶目录
查看>>
node+express上传图片到七牛
查看>>
Mac 中下载阅读 Android 源码
查看>>
使用ApiPost模拟发送get、post、delete、put等http请求
查看>>
SQLite数据库修复方案(For Android App)
查看>>
杨老师课堂之JavaWeb项目架构之NFS文件服务器
查看>>
Windows Linux 子系统可以在资源管理器中打开
查看>>
JavaWeb实训项目案例开发之在线图书网站开发【非常适合初学者】
查看>>
网页设计师和网页前端开发我该选择哪一个
查看>>
Apache Flink 漫谈系列(08) - SQL概览
查看>>
使用免费OA系统,让你成为职场锦鲤
查看>>
京东测试之道,这些你早该知道!
查看>>
jQuery可放大预览的图片滑块
查看>>
SpringBoot连接Redis哨兵模式
查看>>
【WPF】ComboBoxItem的禁用
查看>>
HTML5_CSS3仿Google Play垂直菜单
查看>>
达观杯文本智能处理挑战赛 练手代码实现
查看>>
Tornado 简单入门教程(一)——Demo1
查看>>