离线应用分享

实例介绍谭正谊[e-mail]5离线应用离线应用介绍10’ApplicationCache10’离线资源形式10’离线存储10’离线应用10’Q&A10’离线应用介绍应用场景移动设备我用智能手机？笔记本？Web应用吗？互联网服务@移动Web邮箱，飞机和高铁上能看邮件？WebRSS，随手查看，不管网络状况？Web地图，在信号弱的地区也能使用？你也使用Web应用吗？也需要离线吗？离线应用介绍兼容性=offline-apps全系列!离线应用介绍兼容性桌面端杯具！IE9不支持离线在中国，IE6/7/8依然占据了浏览器90%+份额网络状况良好，离线需求不强移动端给力！Android和iPhone发展迅猛，已具备离线条件网络状况不稳定，离线需求强离线应用介绍展望://gzterrytan.cnblogs.com/archive/2011/03/09/html5-build-mobile-web-app.html50%+离线应用介绍作为产品应用的类型？需要离线？iPhone3+和Android2.2+下？额外设备访问支持？离线能满足需求？离线应用介绍作为开发者替代NativeApp？跨平台？减少客户端开发？更熟悉Web开发？发布形式？移动Web？PhoneGap等？HTML5离线应用离线应用介绍10’ApplicationCache10’离线资源形式10’离线存储10’离线应用10’Q&A10’ApplicationCache定义定义manifestApplicationCachemanifestContent-TypeCACHENETWORKFALLBACKApplicationCache生命周期首次加载拉取两次manifest校验1.下载Cache内容2.下载Fallback内容事件：1.Checking2.Downloading3.Progress4.CacheApplicationCache生命周期Cache加载拉取manifest校验事件：1.Checking2.NoUpdateApplicationCache生命周期更新加载1.拉取两次manifest校验2.其他文件按照HTTP规则拉取1.下载Cache内容2.下载Fallback内容事件：1.Checking2.Downloading3.Progress4.UpdateReadyApplicationCache生命周期手动操作可手动更新ApplicationCache生命周期手动操作window.applicationCache.addEventListener('updateready',function(){window.applicationCache.swapCache();console.log('swapcachehasbeencalled');},false);可监听事件可切换Cache://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache/HTML5离线应用离线应用介绍10’ApplicationCache10’离线资源形式10’离线存储10’离线应用10’Q&A10’离线资源形式JSON序列化写数据：序列化读数据：反序列化离线资源形式图片序列化Base64图片离线资源形式静态资源静态资源文件合并○所有JS都被合并成单个文件○CSS被和合并成图片文件和样式文件图片○CSSSprites○图片尽量通过Base64编码合并到CSS中离线资源形式动态资源动态资源动态JS文件○可本地存储，离线时重新eval图片○内域，svr端以base64输出图片○外域，没找到更好办法，只能svr端拉取再转码不过外域图片离线并不是很必要HTML5离线应用离线应用介绍10’ApplicationCache10’离线资源形式10’离线存储10’离线应用10’Q&A10’WebStorageLocalStorage○iPad每5M提示，适合替代Cookies中的设置值SessionStorage○当此访问有效，可跨页面访问离线存储WebSQLDatabase(SQLite)被iOS和Android实现使用SQL语言但已被W3C列为停滞状态○当前可用，相信会兼容下去。但其他浏览器不会提供离线存储IndexedDBiOS和Android都没实现NoSQL○将来会替代SQLite的，不过我们只能先用SQLite离线存储HTML5离线应用离线应用介绍10’ApplicationCache10’离线资源形式10’离线存储10’离线应用10’Q&A10’note.gzterrytan.com离线应用Q&A谢谢