H5离线缓存基础系列

 

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

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

  2. h5 离线缓存小demo

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

  3. H5离线缓存机制-manifest

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

  4. H5离线缓存技术

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

  5. H5离线缓存基础系列

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

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

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

  7. h5离线缓存

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

  8. 体验h5离线缓存

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

  9. H5 应用程序缓存(离线缓存)

    离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest     manifest,作用是为了让服务器识别该 ...

随机推荐

  1. 微软输入法TSF SampleIME 代码浅说

    原文:微软输入法TSF SampleIME 代码浅说 微软提供了一个简单的TSF拼音输入法的示例SampleIME,主要的问题是:不支持数字键选候选字,不能自动上屏,没有联想功能.在笔者开发动态输入法 ...

  2. JAVA学习第三十三课(经常使用对象API) —迭代器

    数字有非常多用数组存,对象有非常多就要用集合存 可是数组是固定长度的,集合是可变长度的 集合的由来: 对象用来封装特有数据,对象多了须要存储,假设对象个数不确定,就须要使用集合容器来存储 集合的特点: ...

  3. Qt如何绘制(简单深刻,fearlazy的系列文章)

    我觉得绘制只需要考虑几个问题.简单地说就是谁在什么地方画什么? 在Qt中可以这么回答:QPainter在QPainterDevice中画想画的东西. 举个例子:用QtCreator向导新建一个项目,基 ...

  4. 如何把Go调用C的性能提升10倍?

    目前,当Go需要和C/C++代码集成的时候,大家最先想到的肯定是CGO.毕竟是官方的解决方案,而且简单. 但是CGO是非常慢的.因为CGO其实一个桥接器,通过自动生成代码,CGO在保留了C/C++运行 ...

  5. TASM 5.0 安装及使用教程

    安装TASM 5.0很简单,您只需要下载本站[相关工具]中的"TASM50.zip"文件,解压后在Windows9x/NT下执行"INSTALL.EXE"即可开 ...

  6. 在 win10 环境下,设置自己写的 程序 开机自动 启动的方法

    原文:在 win10 环境下,设置自己写的 程序 开机自动 启动的方法 1.是登录自己用户时才能开机启 C:\Users\username\AppData\Roaming\Microsoft\Wind ...

  7. SQLSTATE[HY000]: General error: 1205 Lock wait timeout exceeded; try restarting transaction 解决方法

    SHOW FULL PROCESSLIST; KILL 263071

  8. php判断是否是移动设备

    function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset($_SERVER['HTTP_X_WAP_PROFILE'])) { ...

  9. css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件

    引用:http://www.css88.com/book/css/properties/user-interface/pointer-events.htm 语法: pointer-events:aut ...

  10. eclipse 插件编写(一)

    由于项目开发进程中有一些重复性的代码进行编写,没有任何业务逻辑,粘贴复制又很麻烦且容易出错,故想起做一个eclipse插件来满足一下自己的工作需要,同时记录一下,以供以后参考与共同学习.本文主要讲解一 ...