1.什么是离线缓存

  离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示。

2.离线缓存的优势

  • 在没有网络的时候可以访问到缓存的对应的站点页面,包括html,js,css,img等等文件
  • 在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的
  • 资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访问速度,而且大大节约用户的使用流量。

3.如何实现离线缓存

  在需要缓存的html文件的根节点(html)添加manifest属性,属性值是当前目录下的一个.appcache文件

01.html文件如下

与01.html文件同目录的.appcache文件

4..appcache文件的内容格式

5.在服务器端将.appcache文件的mime类型配置成 text/cache-manifest

下面以phpstudy为例

   打开mime.types文件 在后面添加

6.在网页打开01.html

H5离线缓存基础系列的更多相关文章

  1. H5离线缓存(基础)学习指南

    离线缓存 application cache 1. 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可 ...

  2. H5 离线缓存的用法

    H5离线缓存基础系列   1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...

  3. H5离线缓存技术Application Cache

    H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...

  4. h5 离线缓存小demo

    传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...

  5. H5离线缓存机制-manifest

    简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...

  6. H5离线缓存技术

      HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js ...

  7. h5离线缓存

    离线缓存:application cache 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没链接网络,被缓存的页面也可以展示 ...

  8. 体验h5离线缓存

    摘要 Application Cache是浏览器自己的一种机制,随着移动互联网时代的到来,如果我们已经将需要的文件缓存下下来,一旦网络无法访问,也能继续访问.不仅能提高用户体验,而且在有网络时,也能直 ...

  9. Atitit.播放系统规划新版本 and 最近版本回顾 v3  pbf.doc  1 版本11 (ing)41.1 规划h5本地缓存系列 41.2 Android版本app41.3 双类别系统,

    Atitit.播放系统规划新版本 and 最近版本回顾 v3  pbf.doc 1 版本11 (ing)4 1.1 规划h5本地缓存系列 4 1.2 Android版本app4 1.3 双类别系统, ...

随机推荐

  1. [实时更新]jquery完整版下载

    jquery-2.1.0   注!不再支持IE 6/7/8 直接引用地址:  开发版地址1: <script src="http://code.jquery.com/jquery-2. ...

  2. 转:PyQt4学习资料汇总 from coderzh

    一个月前研究了下PyQt4,感觉比较不错.相比wxpython,界面美观了很多,并且将界面设计与代码逻辑很好的分离了开来.关于PyQt4的资料也不少,这里我将我找到的资料汇总一下,以防自己以后忘得一干 ...

  3. Tinyhttpd - 超轻量型Http Server,使用C语言开发,全部代码只有502行(包括注释),附带一个简单的Client(Qt也有很多第三方HTTP类)

    - 2. Tinyhttpd tinyhttpd是一个超轻量型Http Server,使用C语言开发,全部代码只有502行(包括注释),附带一个简单的Client,可以通过阅读这段代码理解一个 Htt ...

  4. Effective C++:规定24:如果所有的单位都需要的参数类型转换,使用请做到这一点non-member功能

    (一个) 如果一个class.同意整数"隐式转换为"有理数似乎非常合理. class Rational{ public: Rational(int numerator = 0, i ...

  5. 持续集成及部署利器:Go(不要和Google的编程语言Go混淆了!)

    Go是一款先进的持续集成和发布管理系统,由ThoughtWorks开发.(不要和Google的编程语言Go混淆了!)其前身为CruiseControl,是ThoughtWorks在做咨询和交付交付项目 ...

  6. JS 中click和onclick的区别

    1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么 2.click本身是方法,作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件

  7. 数据绑定(十一)多路绑定MultiBinding

    原文:数据绑定(十一)多路绑定MultiBinding 有时候UI要显示的信息又不止一个数据来源决定,就需要使用MultiBinding,MultiBinding具有一个名为Bindings的属性,其 ...

  8. 备份一个支持虚拟化的wrappanel

    public class VirtualizingWrapPanel : VirtualizingPanel, IScrollInfo { #region Fields UIElementCollec ...

  9. QLocalServer与QLocalSocket进程通讯

    在Qt中,提供了多种IPC方法,作者所用的是QLocalServer和QLocalSocket.看起来好像和Socket搭上点边,实则底层是windows的name pipe.这应该是支持双工通信的. ...

  10. Linux下基于Bluez

    硬件:Moto H670 蓝牙耳机 (CSR chip)/ Broadcom v2.0 adapter软件:bluez-4.26 / bluez-gnome-1.8 / linux kernel 2. ...