最近正学到HTML5的离线缓存，却看到需要配置服务器。一下子就懵了，毕竟服务器的有关配置一般是很复杂的，而node.js的服务器是自己的代码生成的，这下要怎么配置？在网上搜索了很久，都没用关于node.js与HTML5离线缓存的，但是apache之类的却一大堆。在看完网易云课堂的一个php教程之后，开始理解了HTML5的离线缓存原理，并成功搭配node.js实现了。

首先简要讲一下HTML5离线缓存的原理。

浏览器向服务端发出请求，请求获取一份MIME类型为 text/cache-manifest 的文件，该文件本身就是静态文件，这点很重要，并且该文件记录了浏览器要缓存哪些文件。

这时候第一个问题来了，manifest文件内容格式怎么写？

答：举个简单的例子，该例子列出了浏览器要缓存的文件。

CACHE MANIFEST

# CACHE MANIFEST 是必须的开头

# CACHE : 下罗列了要缓存的文件名
CACHE:
1.jpg

解决了第一个问题第二个问题来了，html5是怎么去请求这份文件的？

答：

在你的html代码里的 html标签中这样写: <html manifest="test.manifest" >;这样浏览器就会向请求其它资源一样向服务器请求这个名为 test.manifest文件了。

举个简单的例子加深理解：通过 http://localhost/index.html 访问服务器根目录下的index.html文件，html代码如下

 <!DOCTYPE html>

 <html manifest="test.manifest">

 <head>

     <meta charset="utf-8">

     <title></title>

 </head>

 <body>

    <img src="1.jpg" />

 </body>

 </html>

test.manifest文件内容如上面第一问题中的例子；

当浏览器渲染到 <html manifest="test.manifest">时，浏览器发出一个请求，请求获取test.manifest文件，当浏览器加载了test.manifest文件后浏览器就知道1.jpg是要缓存的文件，所以，当1.jpg第一次被加载下来后，就被缓存到本地了。当第二访问http://localhost/index.html 时，浏览器直接到缓存去取1.jpg了。即使断网了，也能够通过http://localhost/index.html访问到刚刚的页面。

到了现在，我们还是没讲到node.js。已知apache等服务器要支持离线缓存的话需要配置服务器，如果是node.js，那该怎么办？

答：我们先来了解一下，apache等服务器究竟是要配置什么鬼东西。上面已经说了manifest文件本身就是一个静态文件，获取manifest文件跟获取jpg文件其实就是一回事，但是apache等服务器不是所有的文件格式都支持，换句话说，你浏览器请求jpg文件是被允许的，但是，你请求manifest文件是不在允许范围内的，所以，配置服务器指定的就是在服务器允许的文件类型中加多一条：manifest 类型。

而对于node.js说，不论是jpg,png,manifest.......，它们都是文件而已，node.js对它们一视同仁，唯一不同的地方就是它们的MIME类型。

所以，对于HTML5的离线缓存功能来说，node.js需要的配置就是在写静态文件服务器时，增加对manifest MIME类型支持。

如果你用express的配置静态文件服务器的话，express已经帮你增加了manifest文件的支持了。一个字：爽！

node.js与HTML5离线缓存的更多相关文章

  1. HTML5离线缓存（Application Cache）

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

  2. HTML5 离线缓存管理库

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

  3. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  4. html5离线缓存使用

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

  5. HTML5离线缓存攻击测试

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

  6. HTML5 离线缓存Appcache

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

  7. HTML5离线缓存

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

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

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

  9. HTML5 离线缓存详解（转）

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

随机推荐

  1. Python机器学习算法 — 逻辑回归（Logistic Regression）

    逻辑回归--简介 逻辑回归(Logistic Regression)就是这样的一个过程:面对一个回归或者分类问题,建立代价函数,然后通过优化方法迭代求解出最优的模型参数,然后测试验证我们这个求解的模型 ...

  2. [App Store Connect帮助]四、添加 App 图标、App 预览和屏幕快照（4）为其他设备尺寸和本地化内容添加屏幕快照和预览

    如果您不想在其他设备尺寸上使用经过缩放的高分辨率屏幕快照或 App 预览,您可以使用“媒体管理”为其他设备尺寸和本地化内容添加自定屏幕快照. 屏幕快照和 App 预览仅在 App 状态为可编辑时才能进 ...

  3. webapp填坑记录

    网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...

  4. 学习css盒子模型

    在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...

  5. （数论）51NOD 1136 欧拉函数

    对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目.此函数以其首名研究者欧拉命名,它又称为Euler's totient function.φ函数.欧拉商数等.例如:φ(8) = 4(Phi( ...

  6. jenkins手把手教你从入门到放弃02-jenkins在Windows系统安装与配置（详解）

    简介 上一篇对jenkins有了大致了解之后,那么我们就开始来安装一下jenkins. Jenkins安装 一.安装Java环境 1.你需要做的第一件事情就是在你的机器上安装Java环境.Jenkin ...

  7. Linux系统编程---文件I/O(open、read、write、lseek、close)

    文件描述符 定义:对内核而言,文件描述符相当于一个文件的标识,它是一个非负整数,当打开(open)一个现有文件或者创建(creat)一个新文件时,内核会向进程返回一个文件描述符 在unix中(文件描述 ...

  8. hihocoder #1698 假期计划 （排列组合+费马小定理+乘法逆元）

    Description 小Ho未来有一个为期N天的假期,他计划在假期中看A部电影,刷B道编程题.为了劳逸结合,他决定先拿出若干天看电影,再拿出若干天刷题,最后再留若干天看电影.(若干代指大于0)  每 ...

  9. RHEL5.6环境下yum安装MySQL

    RHEL5.6环境下yum安装MySQL记录,2017年2月20日 1.卸载原有的MySQL rpm -qa命令查询是否安装了MySQL [root@localhost mysql]# rpm -qa ...

  10. JS数组、outerHtml、className

    //对象转换为数组function obj(){for(var i=0;i<arguments.length;i++){ this[i]=arguments[i]; }} var o2=new ...