首页 web前端 H5教程 html5离线应用application cache的代码详解

html5离线应用application cache的代码详解

Apr 01, 2017 am 11:09 AM

一、应用场景

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

    离线本地存储和传统的浏览器缓存有什么不同呢?

    1、浏览器缓存主要包含两类:

         a.缓存协商:Last-modified,Etag

               浏览器向服务器询问页面是否被修改过,如果没有修改就返回304,浏览器直接浏览本地缓存文件。否则服务器返回新内容。

         b.彻底缓存:cache-control,Expires

               通过Expires设置缓存失效时间,在失效之前不需要再跟服务器请求交互。

   2、离线存储为整个web提供服务,浏览器缓存只缓存单个页面;

   3、离线存储可以指定需要缓存的文件和哪些文件只能在线浏览,浏览器缓存无法指定;

   4、离线存储可以动态通知用户进行更新

二、如何实现

    离线存储是通过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属性,如下:

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE HTML</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;"><a href="http://www.php.cn/java/java-ymp-Lang.html" target="_blank">lang</a></span><span style="color: #0000ff;">="en"</span><span style="color: #ff0000;"> manifest</span><span style="color: #0000ff;">=&#39;test.manifest&#39;</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;"><a href="http://www.php.cn/html/html-HEAD-2.html" target="_blank">head</a></span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">char<a href="http://www.php.cn/code/8209.html" target="_blank">set</a></span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><br/><span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
登录后复制

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

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

            test/cache-manifest manifest
登录后复制

IIS服务器开启方式:

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

三、通过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(){
   //其他和离线存储有关的错误
}
登录后复制

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

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

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

      2、浏览器开始解析

      3、发现link,发送请求载入css文件

      4、浏览器渲染页面

      5、发现图片,发送请求载入图片,并重新渲染

      6、发送请求js文件,阻塞渲染。如果js对dom进行了操作,则会进行rerender

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

      首次载入页面:

      1-6 : 同上

       7:请求页面中需要缓存的页面和数据,就算在之前的步骤中已经请求过(这是个耗能的地方)

       8:服务器返回所有请求文件,浏览器进行本地存储

      再次载入页面:

      1:发送请求

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

      3:解析页面

      4:请求服务端的manifest文件,判断是否有改变,返回304则表示没有改变进入步骤5,否则进入步骤6

      5:进入首次载入页面的7-8

      6:使用本地存储,不重新请求

以上是html5离线应用application cache的代码详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

See all articles