html5离线储存,application cache,manifest使用体验

时间 2019-11-24

标签 html5 html 离线储存 application cache manifest 使用体验栏目 HTML5 繁體版

原文原文链接

最近在APP里新增一个论坛模块，为了快速地完成，决定将整个论坛模块作成WEB APP，WEB APP最致命的就是用户体验问题，页面跳转和过多的请求，大大影响了加载速度和用户体验，这时候我想到了HTML5的离线储存。

通过简单的了解以后，以为这个能够有，但很快我又就发现，HTML5离线储存并不适于此次的项目。

缘由以下：

一、一旦页面指定了manifest，那么这个页面就必定被储存下来。若是有一个动态页面，不想缓存页面的内容，只想缓存页面所引用的css,js,img，但抱歉，这个没有办法作到。我想是由于浏览器与服务器既定的交互逻辑致使必需要这样设计，不然我就很不理解设计者了。

二、 page.html?id=1和 page.html?id=2被存储成了两个html不一样的页面，想一想当用户浏览了1000个不一样的贴子的时候，浏览器就下载储存了1000个没有意义的页面。

三、第一次访问page.html?id=1，缓存成功后。再访问 page.html?id=2，不会去读缓存，这是由于因为参数变了，被认为地址不同，不算是第二次请求，因此请求 page.html?id=2时依然会从新加载 manifest指定的文件。

四、而我为了快速完成，进出层级时都作成了页面跳转，免不了传不少参数，并且每一个贴子不同的id，因此这种状况下离线缓存基本上没有意义，由于至关大部份请求都属于第一次访问。

五、再且，根据网上的资料，进行离线储存时会再次下载一次对应的数据，意思就是说，第一次访问时，使用了离线储存技术的页面加载时所消耗的时间比没有使用这个技术的页面要多，并且耗的流量更大。

所以， manifest极不适合含有动态参数页面跳转的状况下使用，最好是一个页面，而后彻底的ajax请求。

另附带资料: http://www.cnblogs.com/svage/archive/2011/11/24/2261365.html

html5离线应用application cache

1、应用场景 css

咱们一般使用浏览器缓存在用户磁盘上存储web单页，在用户再次浏览的时候已节省带宽，但即使这样，依然没法在没有Internet的状况下访问Web。为了让web应用程序在离线状态也能被访问。html5经过application cache API提供离线存储功能。前提是你须要访问的web页面至少被在线访问过一次。 html

离线本地存储和传统的浏览器缓存有什么不一样呢？ html5

一、浏览器缓存主要包含两类： web

a.缓存协商：Last-modified,Etag 面试

浏览器向服务器询问页面是否被修改过，若是没有修改就返回304，浏览器直接浏览本地缓存文件。不然服务器返回新内容。 ajax

b.完全缓存：cache-control,Expires 浏览器

经过Expires设置缓存失效时间，在失效以前不须要再跟服务器请求交互。缓存

二、离线存储为整个web提供服务，浏览器缓存只缓存单个页面；服务器

三、离线存储能够指定须要缓存的文件和哪些文件只能在线浏览，浏览器缓存没法指定； app

四、离线存储能够动态通知用户进行更新。

2、如何实现

离线存储是经过manifest文件来管理的，须要服务器端的支持，不一样的服务器开启支持的方式也是不一样的。

CACHE MANIFEST//必须以这个开头 version 1.0 //最好定义版本，更新的时候只需修改版本号 CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

CACHE指定须要缓存的文件；NETWORK指定只有经过联网才能浏览的文件，*表明除了在CACHE中的文件；FALLBACK每行分别指定在线和离线时使用的文件

要让manifest管理存储，还须要在html标签中定义manifest属性，以下：

<!DOCTYPE HTML> <html lang="en" manifest='test.manifest'> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>

最后别忘了，这些应用须要服务器支持。

Apache服务器开启支持的方式是：在conf/mime.types中添加一段代码：

test/cache-manifest manifest

IIS服务器开启方式：

右键--HTTP---MIME映射下，单击文件类型---新建---扩展名输入manifest，类型中输入test/cache-manifest

3、经过JS动态控制更新

applicationCache对象提供个了一些方法和事件，管理离线存储的交互过程。经过在firefox8.0的控制台中输入window.applicationCache能够看到这个对象的所

有属性和事件方法。

applicationCache.onchecking = function(){ //检查manifest文件是否存在 }

applicationCache.ondownloading = function(){ //检查到有manifest或者manifest文件  //已更新就执行下载操做  //即便须要缓存的文件在请求时服务器已经返回过了 }

applicationCache.onnoupdate = function(){ //返回304表示没有更新，通知浏览器直接使用本地文件 }

applicationCache.onprogress = function(){ //下载的时候周期性的触发，能够经过它  //获取已经下载的文件个数 }

applicationCache.oncached = function(){ //下载结束后触发，表示缓存成功 }

application.onupdateready = function(){ //第二次载入，若是manifest被更新  //在下载结束时候触发  //不触发onchched  alert("本地缓存正在更新中。。。"); if(confirm("是否从新载入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
}

applicationCache.onobsolete = function(){ //未找到文件，返回404或者401时候触发 }

applicationCache.onerror = function(){ //其余和离线存储有关的错误 }

4、浏览器与服务器的交互

曾经有面试题是这样的："描述在浏览器的地址栏中输入:http://www.baidu.com 后发生了什么？"。

一、服务端返回baidu页面资源，浏览器载入html

二、浏览器开始解析

三、发现link，发送请求载入css文件

四、浏览器渲染页面

五、发现图片，发送请求载入图片，并从新渲染

六、发送请求js文件，阻塞渲染。若是js对dom进行了操做，则会进行rerender

对于支持离线存储的页面，浏览器和服务器的交互又是如何呢？

首次载入页面：

1-6 ：同上

7：请求页面中须要缓存的页面和数据，就算在以前的步骤中已经请求过（这是个耗能的地方）

8：服务器返回全部请求文件，浏览器进行本地存储

再次载入页面：

1：发送请求

2：使用本地存储的离线文件

3：解析页面

4：请求服务端的manifest文件，判断是否有改变，返回304则表示没有改变进入步骤5，不然进入步骤6（jaykon:这里是否是错了？304时会进入6才对）

5：进入首次载入页面的7-8（jaykon:这里注意，就算这次请求manifest文件更新了，也只是在页面宣染完成后从新下载里面路径的文件，这些新文件要在下一次访问时才会体现出来，好比再次刷新时。）

6：使用本地存储，不从新请求