移动web app开发-----application cache 离线缓存(进阶)

     通过上面的两篇文章,application cache的应用和原理,我们应该能够全面了解application cache了。同时我们

也能够清楚application cache在设计上有哪些不尽仁义的地方。这篇文章我们主要来了解下application cache在各个浏览器的

支持情况和存储大小,以及有哪些坑爹的地方,以及如何解决这些坑爹的地方。

  1. app cache在存储大小的限制

    • safari桌面版没有限制【包括mac和windows】
    • safari移动版有10M的限制
    • chrome桌面版有5M的限制
    • android浏览器没有限制
    • firefox桌面版没有限制
    • Opera可以手动管理,默认限制大小为50M
  2. 浏览器支持情况
    • safari从版本4开始支持
    • chrome从版本5开始
    • safari移动版从iOS2.1开始支持
    • firefox从版本3.5开始支持
    • opera从版本11开始支持
    • android从版本2.1开始支持
    • ie目前全面不支持,包括ie10
  3. 我们知道application cache会把浏览器第一次输出的动态资源也进行缓存起来,那么我们如何解决这个问题呢
    • 首次请求页面时,我们只加载静态资源,和外围的模版,然后通过一个ajax请求拿到我们的动态数据,参考代码
    • 通过在页面中放一个隐藏的iframe,然后在iframe所引用的页面中使用app cache缓存,参考代码
    • 使用localStroage进行存储,然后利用cookie进行更新,具体参考google和bing的做法

     

时间: 2024-08-18 06:31:40

移动web app开发-----application cache 离线缓存(进阶)的相关文章

移动web app开发-----application cache 离线缓存应用篇

在移动web app应用中,请求数非常昂贵,请求数过多不但耗电,耗流量,同时速度也非常的慢,为了减少请求,加快资源的加载速度,使用application cache,是一个比较不错的方案,下面通过三篇文章来全面的介绍application cache,第一篇为应用篇,第二篇为原理篇,第三篇为高级进阶篇.本篇内容主要包括三个方面 manifest文件书写 application cache类型 application cache状态       manifest文件书写 要想使用applicati

移动web app开发-----application cache 离线缓存原理篇

                  上篇文章中写了appcache的manifest文件如何书写,appcache的类型和状态,下面我们通过这篇文章来学习下appcache的下载和更新机制. 浏览器自动更新 1.假如入我们要访问一个网站的主页,它的html标签有个manifest属性. 2.页面从服务器端返回,包括动态资源和静态资源,同时静态资源会采用浏览器常规的缓存方式缓存起来. 3.当浏览器解析页面时,发现他的html标签有一个manifest属性,浏览器会在后台把manifest文件中要c

Web APP开发案例:旅程计划应用(Wayfindit: Trip Planner App)

文章描述:Google Web App开发指南第三章:案例研究. 旅程计划应用(Wayfindit: Trip Planner App) 在大多数情况下,Wayfindit的应用必须有很好的易用性.旅行是一件很复杂的事情,不管是商业旅行还是休假旅行,一个顺利的旅程要求从家门到目的都没有意外之忧.Wayfindit的应用要能给旅行者提供所需信息,并且要快而准确.这意味着它需要一个最小的.直观的.响应式界面,能在前端提供有关内容的重要信息--HTML5的地理感知和离线存储特性实现. 一个完美的袖珍指

移动web app开发-----调试篇

      俗话说'工欲善其事必先利其器',那么在写这个移动端web app开发的系列文章之前,为了让大家少走一些弯路,先来给大家介绍一下我们常用在开发过程中所使用的调试工具.      相信大家进行过web开发开发的人对于一些常用的调试工具都比较熟悉了.在firefox上,firebug了算是最流行的,还有它的很多插件,像yslow等:在chrome我们可以从'菜单----->工具------>开发人员工具'中打开,我们一般情况下用的都是一些最基本的功能,像检查javascript的内存消耗

web api-一个WEB APP开发的问题

问题描述 一个WEB APP开发的问题 有一门课要做一个WEB项目,我们想做一个简单的.功能是一所大学课程的打分网站.学生注册登录自己的账户后,查看课程,对课程进行打分,写评论.还有热门课程排名(按打分人数排名).功能很简单,老师说重点不是看功能,而是考察对各层的掌握.所以各个层的实现就很重要.要求要有web api, internal api, core business logic, DAO层,database层.ORM可选.传递json.具体如下: 求具体解释一下这些层之间的逻辑.各个层怎

《Web前端开发精品课 HTML与CSS进阶教程》——1.2 HTML、XHTML和HTML5

1.2 HTML.XHTML和HTML5 很多新手往往分不清HTML.XHTML和HTML5,这一节给大家详细讲解一下这三者的关系和区别. 1.2.1 HTML和XHTML HTML,全称HyperText Mark-up Language(超文本标记语言),是构成网页文档的主要语言.我们常说的HTML指的是HTML 4.01. XHTML,全称EXtensible HyperText Mark-up Language(扩展的超文本标记语言),它是XML风格的HTML 4.01,我们可以称之为更

Google Web App开发指南第二章:交互设计

首先掌握基础 借用篮球界一个传奇人物的话,在你做任何事之前,你必须"首先掌握基础".(说出这句话的是波士顿凯尔特篮球名宿Larry Bird,他同时也是一个Web App爱好者.)所有伟大的Web Apps都必须有一个清晰的集中点. 创建清晰的需求描述 伟大的web apps让用户很容易集中注意力.人们在某段时间内只能集中于少数几件事,因此,与那些提供给用户很多选择和很多特性的web apps相比,人们更喜欢那些没有干扰能让用户轻松完成手头任务的应用. 为了确保你的应用有一个集中点,创

Google Web App开发指南第三章:案例研究

旅程计划应用(Wayfindit: Trip Planner App) 在大多数情况下,Wayfindit的应用必须有很好的易用性.旅行是一件很复杂的事情,不管是商业旅行还是休假旅行,一个顺利的旅程要求从家门到目的都没有意外之忧.Wayfindit的应用要能给旅行者提供所需信息,并且要快而准确.这意味着它需要一个最小的.直观的.响应式界面,能在前端提供有关内容的重要信息--HTML5的地理感知和离线存储特性实现. 一个完美的袖珍指南 它就装在你的口袋里或者包里,即时提供信息.它拥有本地存储和地理

Chrome Web App开发小结_php实例

前言 这篇文章主要分享下自己在开发Web App遇到的问题和过程,以及一些很已经(如何)填平的坑.如果您想要"如何开发Web App"或<30分钟学会开发Web App>,请移步官方的开发手册(文档).(下有链接). 背景 感觉现在大家都在争论(讨论)两件事情,Web App和Native App.前不久参加的HTML5守望者活动,各方大佬都在针对这二者之间的优劣,差异,兼容,普及等进行探讨.当然,有争议的才说明有价值嘛. Chrome Web App 前不久Chrome又