传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低。比如:在火车上,穿山越岭进隧道,便无法访问web应用......
离线缓存为应用带来三个优势:
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器压力 - 浏览器将只从服务器下载更新过或更改过的资源
*支持性检测

实现离线缓存的步骤:
1, 建立.manifest或者appcache为后缀的文件。

 manifest文件结构:
 CACHE MANIFEST(必须)
 # 第一行必须为CACHE MANIFEST
 CACHE:(必须)
# 在此标题下列出的文件将在首次下载后进行缓存
NETWORK:(可选)
# 在此标题下列出的文件需要与服务器连接,不会被缓存
#加载文件或图片的地址(必须)
# 在此标题下列出的文件规定当页面无法访问时的回退页

2建立一个index.html 将文件引入html里面

3在服务器上面打开

4拔掉网线刷新页面图片还在(没有离线缓存的话没网了直接ng了小七认为这妹子还是很养眼的)

h5离线缓存缺陷
1、含有manifest属性的当前请求页无论如何都会被缓存
2、更新需要建立在manifest文件的更新,文件更新后是需要页面再次刷新的(需要2次刷新才能获取新资源)
3、更新是全局性的,无法单独更新某个文件(无法单点更新)
4、对于链接的参数变化是敏感的,任何一个参数的修改都会被(master)重新缓存(重复缓存含参页面)index.html和index.html?renew=1都会被认为是不同文件,分别缓存
试用场景

1、单地址的页面
2、对实时性要求不高的业务
3、离线webapp

h5 离线缓存小demo的更多相关文章

  1. H5离线缓存技术Application Cache

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

  2. H5 离线缓存的用法

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

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

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

  4. H5离线缓存机制-manifest

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

  5. H5离线缓存技术

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

  6. H5离线缓存基础系列

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

  7. h5离线缓存

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

  8. 体验h5离线缓存

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

  9. H5 PWA技术以及小demo

    H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...

随机推荐

  1. 【Tech】POI标签分类

    寒假老板给的任务,让我重现这个实验http://www.liuhaihua.cn/archives/15565.html.自己就随便试了下,用的都是比较经典(lao)的算法和知识,记录一下. 一.从网 ...

  2. Nginx配置指令的执行顺序

    rewrite阶段 rewrite阶段是一个比较早的请求处理阶段,这个阶段的配置指令一般用来对当前请求进行各种修改(比如对URI和URL参数进行改写),或者创建并初始化一系列后续处理阶段可能需要的Ng ...

  3. canvas 视频音乐播放器

    canvas 视频音乐播放器 var play_nor_img_path = 'images/play_btn_n.png'; //播放按钮 正常时 60x60 px var play_sec_img ...

  4. R中的参数传递函数:commandArgs(),getopt().

    1.commandArgs(),是R自带的参数传递函数,属于位置参数. ##test.R args=commandArgs(T) print (args[1])##第一个外部参数 print (arg ...

  5. c# 类的序列化,以及嵌套问题

    简单的序列化,网上很多,但是突然想到一个问题,如果一个类里用到了另一个,那么怎么办,今天试了试,只需要加上序列号标签就可以了 using System.Collections; using Syste ...

  6. spring security在spring mvc的action中获取登录人信息

    @RequestMapping("/index") public ModelAndView login( @RequestParam(value = "error&quo ...

  7. Codeforces Beta Round #27 (Codeforces format, Div. 2) E. Number With The Given Amount Of Divisors 反素数

    E. Number With The Given Amount Of Divisors time limit per test 2 seconds memory limit per test 256 ...

  8. spring boot: 组合注解与元注解

    package ch2.annotation; //target/elementType用来设定注解的使用范围 import java.lang.annotation.ElementType; imp ...

  9. php 微信接口API之长链接转短链接代码示例

    <?php header("Content-Type: text/html; charset=utf-8"); $longurl; if(isset($_POST['long ...

  10. 关闭 Windows Defender

    关闭 Windows Defender Win+R,输入 gpedit.msc 回车,打开组策略编辑器 展开[计算机设置]-[管理模板]-[Windows 组件]-[Windows Defender] ...