zoukankan      html  css  js  c++  java
  • node.js与HTML5离线缓存

    最近正学到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代码如下

     1 <!DOCTYPE html>
     2 <html manifest="test.manifest">
     3 <head>
     4     <meta charset="utf-8">
     5     <title></title>
     6 </head>
     7 <body>
     8    <img src="1.jpg" />
     9 </body>
    10 </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文件的支持了。一个字:爽!

  • 相关阅读:
    第一章--购物车作业
    第一章--三级菜单作业
    第3章 文件操作-函数练习题
    面试题2.20
    Python 技巧(三)—— list 删除一个元素的三种做法
    Python 字符串操作方法大全
    员工信息增删改查程序
    Python之print函数详解
    判断登陆用户名和密码是否正确-记事本存用户名密码
    软件开发目录规范
  • 原文地址:https://www.cnblogs.com/zhaowy/p/9561344.html
Copyright © 2011-2022 走看看