HTML5离线缓存问题

1.应用程序缓存

什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

主浏览器都支持，IE8.IE9除外

注意事项

  • MineType 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置
  • 单个文件大小，Application Cache的尺寸限制统一在5M，单个文件不要超出这个上限。
  • 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
  • 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
  • 引用manifest的html必须与manifest文件同源，在同一个域下。

    FALLBACK中的资源必须和manifest文件同源。
  • 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
  • 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问。
  • 当manifest文件发生改变时，资源请求本身也会触发更新。

本地缓存应用所需的文件

使用方法：

①配置manifest文件

页面上：

1

2

3

4

<!DOCTYPE HTML>

<html manifest="demo.appcache">

...

</html>

Manifest 文件：

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

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

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

③FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

①CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST

/theme.css/logo.gif/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

②NETWORK

下面的 NETWORK 小节规定文件 "login.asp" 永远不会被缓存，且离线时是不可用的：

NETWORK:

login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接：

NETWORK:*

③FALLBACK

下面的 FALLBACK 小节规定如果无法建立因特网连接，则用
"offline.html" 替代 /html5/ 目录中的所有文件：

FALLBACK:

/html5/ /404.html

注释：第一个 URI 是资源，第二个是替补。

格式

重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其
manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.aspFALLBACK:/html5/
/404.html

完整demo：

1

2

3

4

5

6

7

8

9

10

CACHE MANIFEST

# 2016-07-24 v1.0.0

/theme.css

/main.js

NETWORK:

login.jsp

FALLBACK:

/html/ /offline.html

服务器上：manifest文件需要配置正确的MIME-type，即 "text/cache-manifest"。

如Tomcat:

1

2

3

4

<mime-mapping>

<extension>manifest</extension>

<mime-type>text/cache-manifest</mime-type>

</mime-mapping>

常用API：

核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：

0（UNCACHED） : 
无缓存， 即没有与页面相关的应用缓存

1（IDLE） : 闲置，即应用缓存未得到更新

2 （CHECKING） : 检查中，即正在下载描述文件并检查更新

3 （DOWNLOADING） : 下载中，即应用缓存正在下载描述文件中指定的资源

4 （UPDATEREADY） : 更新完成，所有资源都已下载完毕

5 （IDLE） : 
废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存

相关的事件：

表示应用缓存状态的改变：

checking : 在浏览器为应用缓存查找更新时触发

error : 在检查更新或下载资源期间发送错误时触发

noupdate : 在检查描述文件发现文件无变化时触发

downloading : 在开始下载应用缓存资源时触发

progress：在文件下载应用缓存的过程中持续不断地下载地触发

updateready : 在页面新的应用缓存下载完毕触发

cached : 在应用缓存完整可用时触发

Application Cache的三个优势：

① 离线浏览

② 提升页面载入速度

③ 降低服务器压力

注意事项：

1. 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）

2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存

3. 引用manifest的html必须与manifest文件同源，在同一个域下

4. 浏览器会自动缓存引用manifest文件的HTML文件，这就导致如果改了HTML内容，也需要更新版本才能做到更新。

5. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面

6. FALLBACK中的资源必须和manifest文件同源

7. 更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件。

8. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问

9. 当manifest文件发生改变时，资源请求本身也会触发更新

点我参考更多资料！

离线缓存与传统浏览器缓存区别：

1. 离线缓存是针对整个应用，浏览器缓存是单个文件

2. 离线缓存断网了还是可以打开页面，浏览器缓存不行

3. 离线缓存可以主动通知浏览器更新资源

更新

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存

manifest 文件被修改（参阅下面的提示）

由程序来更新应用缓存

如何理解浏览器缓存，优点是什么？

浏览器缓存：包括页面html缓存和图片, js，css等资源的缓存。如下图，浏览器缓存是基于把页面信息保存到用户本地电脑硬盘里。

1、缓存的优点：

1）服务器响应更快：因为请求从缓存服务器（离客户端更近）而不是源服务器被响应，这个过程耗时更少，让服务器看上去响应更快。

2）减少网络带宽消耗：当副本被重用时会减低客户端的带宽消耗；客户可以节省带宽费用，控制带宽的需求的增长并更易于管理。

HTML5离线缓存问题的更多相关文章

  1. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  2. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  3. HTML5 离线缓存Appcache

    创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可: <ht ...

  4. html5离线缓存使用

    html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appc ...

  5. node.js与HTML5离线缓存

    最近正学到HTML5的离线缓存,却看到需要配置服务器.一下子就懵了,毕竟服务器的有关配置一般是很复杂的,而node.js的服务器是自己的代码生成的,这下要怎么配置?在网上搜索了很久,都没用关于node ...

  6. HTML5离线缓存攻击测试

    本实验采用局域网模拟,通过修改本地HOSTS文件来模拟域名以及DNS欺骗.合法网站使用Linux CentOS7的apache服务器搭建,IP为192.168.1.113,HOSTS文件中加入192. ...

  7. HTML5离线缓存

    参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...

  8. Html5离线缓存详细讲解

    离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

  9. 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

    本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...

随机推荐

  1. SpringMVC Controller 介绍

    一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Mo ...

  2. 灵活运用SQL Server SSIS变量

    在SSIS开发ETL(Extract-Transform-Load),数据抽取.转换.装载的过程.我们需要自己定义变量 一.SSIS变量简介 SSIS(SQL Server Integration S ...

  3. >>> 主页推荐链接

    Apple专区 App Store 排行榜 App Store 排行榜 - 中国区 PC6苹果网 威锋网 第三方 环信 - 即时通讯云领导者 腾讯Bugly - Android Crash | iOS ...

  4. WebForm Repeater: 重复器

    Repeater控件,可以用来一次显示一组数据项.比如,可以用它们显示一个数据表中的所有行.             Repeater控件完全由模板驱动,提供了最大的灵活性,可以任意设置它的输出格式. ...

  5. Asp.net上传文件后台通过二进制流发送到其他Url保存

    实际情况一般有单独的站点存放静态文件,比如图片.office文档等.A站点的操作需要上传文件到B站点, 下面介绍一种方法通过System.Net.WebClient类的UploadData方法 . u ...

  6. 4. 什么是AJAX

    术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验.在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的“思考时间”同步.Ajax提供与服务器 ...

  7. FRM-40400：事务完成：已应用和保存X条记录"消息框不显示处理方法

    oldmesl := :system.message_level; :system.message_level :;--不显示长度超过25的信息 do_key('COMMIT_FORM'); :sys ...

  8. Linux下常用yum命令

    linux各发行版有多种包管理机制,下面介绍基于RedHat系的yum包管理命令: yum -y install xxx                                     无需询 ...

  9. Centos vsftpd服务器搭建

    Centos vsftpd服务器搭建 时间:2016-07-18 1.最为简单的vsftpd服务器搭建 1.安装vsftpd 1.yum 安装 yum install vsftpd 2.rpm文件安装 ...

  10. html5，单击显示详细信息

    <details open="">    <summary>点击率</summary>        <p>详细信息</p&g ...