HTML5 之离线应用Manifest

我们知道,使用传统的技术,就算是对站点的资源都实施了比较好的缓存策略,但是在断网的情况下,是无法访问的,因为入口的HTML页面我们一般运维的考虑,不会对其进行缓存。HTML5的Cache Manifest离线应用特性就能够帮助我们构建离线也能使用的站点,所有的资源都使用浏览器本地缓存,当然前提是要求在联网的情形下使用过一次站点。

如何实现离线访问特性

实现的步骤非常简单,主要3个步骤:

1)在服务器上添加MIME TYPE支,让服务器能够识别manifest后缀的文件

AddType text/cache-manifest manifest

2)创建一个后缀名为.manifest的文件,把需要缓存的文件按格式写在里面,并用注释行标注版本

CACHE MANIFEST

# 直接缓存的文件

CACHE:

Path/to/cache.js

# version:2012-03-20

3)给 <html> 标签加 manifest 属性,并引用manifest文件

具体可以参考:HTML5 缓存: cache manifest

<html manifest=”path/to/name-of.manifest”>

离线应用访问及更新流程

  1. 第一次访问离线应用的入口页HTML(引用了manifest文件),正常发送请求,获取manifest文件并在本地缓存,陆续拉取manifest中的需要缓存的文件
  2. 再次访问时,无法在线离线与否,都会直接从缓存中获取入口页HTML和其他缓存的文件进行展示。如果此时在线,浏览器会发送请求到服务器请求manifest文件,并与第一次访问的副本进行比对,如果发现版本不一致,会陆续发送请求重新拉取入口文件HTML和需要缓存的文件并更新本地缓存副本
  3. 之后的访问重复第2步的行为

离线机制的缓存用途

从Manifest的机制来看,即使我们不是为了创建离线应用,也同样可以使用这种机制用于缓存文件,可以说是给Web缓存提供多一种可以选择的途径。

存在的问题:缓存文件更新控制不灵活

就目前HTML5提供的manifest机制来讲,一个页面只能引用一个manifest页面,而且一旦发现这个manifest改变了,就会把里面所有定义的缓存文件全部重新拉取一遍,不管实际上有没有更新,控制比较不灵活。针对这个问题,也有的同学提出了一些建议,比如把需要缓存的文件分模块切分到不同manifest中,并分开用HTML引用,再使用强大的iframe嵌入到入口页面,这样就当某一个模式需要有更新,不会导致其他模块的文件也重新拉取一遍。

HTML5 之本地存储localstorage

HTML5给我们提供本地存储localstorage特性,严格来讲,其实已经不算传统Web缓存的范畴。因为它存储的地方是跟Web缓存分开的,是浏览器重新开辟的一个地方。

localstorage的作用

本地存储localstorage的作用主要使Web页面能够通过浏览器提供的set/get接口,存储一些自定义的信息到本地硬盘,并且在单次访问或以后的访问过程中随时获取或修改。

Localstorage的使用

Localstorage提供了几个非常易用的Api,setItem/getItem/removeItem/clear,具体的可以参考:Html5 Step by Step(二) 本地存储

Localstorage的缓存用途

Localstorage设计的本意可能是用来存储一些用户操作的个性化设置的文本类型的信息和数据,当我们其实也可能拿来当Web缓存区使用,比如我们可以将Base64格式编码的图片信息,存在localstorage中,再次访问时,直接本地获取后,使用Css3的Data:image的方式直接展现出来。

存在的问题:大小限制

按照目前标准,目前浏览器只给每个独立的域名提供5m的存储空间,当存储超过5m,浏览器就会弹出警告框。

可以说,HTML5的Manifest和localstorage是给我们在考虑Web缓存的时候提供了多一种思路,当你开发的应用只面对现代浏览器的时候,不妨可以考虑一下。

HTML5时代的Web缓存机制的更多相关文章

  1. HTML5分析实战Web存储机制(Web Storage)

    Web Storage它是Key-Value在持久性数据存储的形式.Web Storage为了克服cookie把所引起的一些限制.当数据需要严格格控制client准时,没有必要不断地发回数据serve ...

  2. 【Web缓存机制系列】2 – Web浏览器的缓存机制

    Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...

  3. 【Web缓存机制系列】2 – Web浏览器的缓存机制-(新鲜度 校验值)

    Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...

  4. Web缓存机制

    Web 缓存的出现主要是为了弥补cookie带来的一些局限,当数据严格控制在客户端时,可以不用通过HTTP来持续得将数据发给服务器. 主要使用比较多的就是sessionStorage和localSto ...

  5. Web缓存相关知识整理

    一.前言  工作上遇到一个这样的需求,一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面.用到了HTML5 的本地存储 API 中的 localStorage作为解决方案,回顾了 ...

  6. Web缓存杂谈

    一.概述 缓存通俗点,就是将已经得到的‘东东’存放在一个相对于自己而言,尽可能近的地方,以便下次需要时,不会再二笔地跑到起始点(很远的地方)去获取,而是就近解决,从而缩短时间和节约金钱(坐车要钱嘛). ...

  7. Web缓存杂谈--Etag & If-None-Match

    一.概述 缓存通俗点,就是将已经得到的‘东东’存放在一个相对于自己而言,尽可能近的地方,以便下次需要时,不会再二笔地跑到起始点(很远的地方)去获取,而是就近解决,从而缩短时间和节约金钱(坐车要钱嘛). ...

  8. 深入理解HTTP协议及原理分析之缓存(3种缓存机制)

    3.2 缓存的实现原理 3.2.1什么是Web缓存 WEB缓存(cache)位于Web服务器和客户端之间. 缓存会根据请求保存输出内容的副本,例如html页面,图片,文件,当下一个请求来到的时候:如果 ...

  9. Web缓存总结

    web缓存作用 减少网络带宽消耗降低服务器压力减少网络延迟,加快页面打开速度 Web缓存的类型 数据库数据缓存:为了提供查询的性能,会将查询后的数据放到内存中进行缓存,下次查询时,直接从内存缓存直接返 ...

随机推荐

  1. PHP使用PHPExcel删除Excel单元格指定列的方法是怎样

    有一个系统仅公司内部和外部经销商使用,在一个导出功能中公司内部员工跟外部经销商导出的列是不一样的(某些数据是不能提供给经销商的)因为导出的数据都是一样的(某些列外数据外部没有)因此并没有单独处理,而是 ...

  2. HDU 5961:传递(暴搜)

    http://acm.hdu.edu.cn/showproblem.php?pid=5961 题意:中文题意.给出两个图,判断这个两个图是否都是传递的.注意一下传递的定义要看清,一开始没看清连样例都看 ...

  3. html+css复习之第2篇 | javascript

    1. java 中定义数组和对象: 数组(Array)字面量 定义一个数组: [40, 100, 1, 5, 25, 10] 对象(Object)字面量 定义一个对象: {firstName:&quo ...

  4. hdwiki中模板和标签的使用

    MVC中的视图view 主要负责页面显示部分,所有的页面显示全部在此实现,视图对整个页面负责,它通过control的调用来显示页面和数据. ......视图(view)类template.class. ...

  5. mysql聚集索引的优缺点

    聚簇索引并不是一种单独的索引类型,而是一种数据存储方式(不是数据结构,而是存储结构),具体细节依赖于其实现方式,但innodb的聚簇索引实际上是在同一个结构中保存了btree索引和数据行. 当表有索引 ...

  6. xheditor上传图片配置

    二. 源码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Xeditor.a ...

  7. PHP之分页类

    <?php /** * Created by PhpStorm. * User: Administrator * Date: 2016/6/22 * Time: 21:37 */ Class P ...

  8. TreeView 读取 xml 显示节点

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tree2_xml.aspx.c ...

  9. Channel Allocation

    Channel Allocation Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 13231 Accepted: 6774 D ...

  10. SSH配置私钥登陆服务器

    前言 本文基于实际Linux管理工作,实例讲解工作中使用ssh证书登录的实际流程,讲解ssh证书登录的配置原理,基于配置原理,解决实际工作中,windows下使用SecureCRT证书登录的各种问题, ...