• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5 离线应用之打造零请求、无流量网站的解决方法

HTML5 离线应用之打造零请求、无流量网站的解决方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML5,离线应用等相关知识,佚名 希望在学习及工作中可以帮助到您

前言

今天Web应用程序已经很复杂了,以现在的发展,会将越来越复杂,但他有一个致命缺点,不能脱离internet链接,因此在HTML中新增了一API,

它使用一个本地存储机制很好地解决了这个问题,为离线web应用铺平了道路。
本地缓存于浏览器缓存

浏览器缓存只对单个网页服务</p> <p>任何网页都具有网页缓存
本地缓存只缓存那些你指定缓存的页面</p> <p>网页缓存不可靠、不安全,因为我们不知道网站中到底缓存了哪些页面、哪些资源
本地缓存可以控制对哪些内容进行缓存

manifest文件

web应用程序本地缓存是通过每个页面的manifest文件来管理的,manifest是一简单文本,在该文件中以清单的形式列举了需要被缓存的不需要被缓存的文件的名字、路径。

可以为每个页面单独指定manifest也可以为整个应用程序指定,例我们为hello.htm的设置:

在指定文件源文件时可以把资源文件分为三类,CACHE、NETWORK、FALLBACK

</p> <p>在CACHE类别中指定需要被缓存在本地的资源文件,为某个页面指定需要本地缓存的资源文件时,不需要把这个页面本身指定在CACHE类别中,
因为如果一个页面具有manifest文件,浏览器会自动对该页面进行本地缓存</p> <p>NETWORK类别为显式指定不进行缓存的资源文件,这些文件只有建立服务器端链接才能访问,本例使用通配符*表示没有进行记录的都不缓存</p> <p>FALLBACK类别中的每行中指定两个资源文件,第一个资源文件为能够在线访问时使用的资源文件,第二个为不能在线访问时使用的本地缓存文件

浏览器与服务器交互过程

当使用离线web应用程序进行工作时,有必要了解浏览器与服务器之间的交互过程:

浏览器对本地缓存进行更新,存入资源文件,并触发一个事件通知本地缓存更新</p> <p>再次打开该URL
请求url
浏览器发现页面被缓存,于是使用本地缓存文件
解析文件
浏览器像服务器请求manifest文件
服务器返回304,通知manifest文件没有变化(若是改变将会有所不同)

applicationCache对象

该对象代表了本地缓存,可以用它来通知用户本地缓存已经被更新,也允许手动更新本地缓存。

前面当浏览器对本地缓存做了更新装入新资源文件时,会触发applicationCache对象的updateready事件,通知本地缓存已被修改,然后提示用户手动刷新页面。
swapCache

swapCache方法用来手动执行本地缓存的更新,它只能在applicationCache对象的updateReady事件触发时调用,

即当资源文件发生改变时,可使用此方法手工缓存更新。

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03HTML5 Input 类型的详细介绍以及实例代码
  • 2018-12-03必会的移动端Html5的基础知识点
  • 2018-12-03canvas中beginPath()和closePath()作用的实例解析
  • 2017-08-06html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
  • 2018-12-03了解HTML 5 History API的”前生今世”
  • 2017-08-06html5 视频播放解决方案
  • 2018-12-03在移动端有哪个javascript动画库最好用?
  • 2018-12-03Web Storage概述和本地数据库
  • 2018-12-03H5学习之旅-H5的新特性(1)
  • 2017-08-06html5读取本地文件示例代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 实例分析:html5前端性能的测试(图文)
    • 使用HTML5在网页中嵌入音频和视频播放的基本方法_html5教程技巧
    • 三分钟HTML5画布(Canvas)动画教程 - CSDN博客
    • HTML5 canvas基本绘图之填充样式实现
    • h5制作性能变化折线图
    • mega.co.nz 是怎样实现在网页上下载的?
    • 基于canvas的纯JS二维码生成插件
    • 手机端H5 header定义样式
    • html5 touch事件实现触屏页面上下滑动(一)
    • HTML5 Canvas的常用线条属性值总结_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有