离线应用分享
- 1. 实例介绍 谭正谊 gzterrytan@
- 2. HTML5离线应用 ? 离线应用介绍 10’ ? Application Cache 10’ ? 离线资源形式 10’ ? 离线存储 10’ ? 离线应用 10’ ? Q&A 10’
- 3. 离线应用介绍 应用场景 ? 移动设备 ? 我用智能手机？笔记本？Web应用吗？ ? 互联网服务@移动 ? Web邮箱，飞机和高铁上能看邮件？ ? Web RSS，随手查看，不管网络状况？ ? Web地图，在信号弱的地区也能使用？ ? 你也使用Web应用吗？也需要离线吗？
- 4. 离线应用介绍 兼容性 全系列! http://www.caniuse.com/#feat=offline-apps
- 5. 离线应用介绍 兼容性 ? 桌面端 ? 杯具！IE9不支持离线 ? 在中国，IE6/7/8依然占据了浏览器90%+份额 ? 网络状况良好，离线需求不强 ? 移动端 ? 给力！Android和iPhone发展迅猛，已具备离线条件 ? 网络状况不稳定，离线需求强
- 6. 离线应用介绍 展望 50%+ http://zdc.zol.com.cn/210/2108081.html http://gzterrytan.cnblogs.com/archive/2011/03/09/html5-build-mobile-web-app.html
- 7. 离线应用介绍 作为产物 ? 应用的类型？需要离线？ ? iPhone3+和Android2.2+下？ ? 额外设备访问支持？ ? 离线能满足需求？
- 8. 离线应用介绍 作为开发者 ? 替代Native App？ ? 跨平台？减少客户端开发？ ? 更熟悉Web开发？ ? 发布形式？移动Web？PhoneGap等？
- 9. HTML5离线应用 ? 离线应用介绍 10’ ? Application Cache 10’ ? 离线资源形式 10’ ? 离线存储 10’ ? 离线应用 10’ ? Q&A 10’
- 10. Application Cache 定义 定义manifest
- 11. Application Cache manifest Content-Type CACHE NETWORK FALLBACK
- 12. Application Cache 生命周期 首次加载 拉取两次manifest校验 事件： 1.下载Cache内容 2.下载Fallback内容 1.Checking 2.Downloading 3.Progress 4.Cache
- 13. Application Cache 生命周期 Cache加载 拉取manifest校验 事件： 1.Checking 2.NoUpdate
- 14. Application Cache 生命周期 更新加载 1.拉取两次manifest校验 2.其他文件按照HTTP规则拉取 事件： 1.下载Cache内容 2.下载Fallback内容 1.Checking 2.Downloading 3.Progress 4.UpdateReady
- 15. Application Cache 生命周期 手动操作 可手动更新
- 16. Application Cache 生命周期 手动操作 可切换Cache window.applicationCache.addEventListener( 'updateready', function(){ window.applicationCache.swapCache(); console.log('swap cache has been called'); }, false ); 可监听事件 http://offline.gzterrytan.com/ http://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache/
- 17. HTML5离线应用 ? 离线应用介绍 10’ ? Application Cache 10’ ? 离线资源形式 10’ ? 离线存储 10’ ? 离线应用 10’ ? Q&A 10’
- 18. 离线资源形式 JSON序列化 读数据：反序列化 写数据：序列化
- 19. 离线资源形式 图片序列化 Base64图片 http://offline.gzterrytan.com/b64img.html
- 20. 离线资源形式 静态资源 ? 静态资源 ? 文件合并 ○ 所有JS都被合并成单个文件 ○ CSS被和合并成图片文件和样式文件 ? 图片 ○ CSS Sprites ○ 图片尽量通过Base64编码合并到CSS中
- 21. 离线资源形式 动态资源 ? 动态资源 ? 动态JS文件 ○ 可本地存储，离线时重新eval ? 图片 ○ 内域，svr端以base64输出图片 ○ 外域，没找到更好办法，只能svr端拉取再转码 ? 不过外域图片离线并不是很必要
- 22. HTML5离线应用 ? 离线应用介绍 10’ ? Application Cache 10’ ? 离线资源形式 10’ ? 离线存储 10’ ? 离线应用 10’ ? Q&A 10’
- 23. 离线存储 ? Web Storage ? LocalStorage ○ iPad每5M提示，适合替代Cookies中的设置值 ? SessionStorage ○ 当此访问有效，可跨页面访问
- 24. 离线存储 ? Web SQL Database(SQLite) ? 被iOS和Android实现 ? 使用SQL语言 ? 但已被W3C列为停滞状态 ○ 当前可用，相信会兼容下去。但其他浏览器不会提供
- 25. 离线存储 ? IndexedDB ? iOS和Android都没实现 ? NoSQL ○ 将来会替代SQLite的，不过我们只能先用SQLite
- 26. HTML5离线应用 ? 离线应用介绍 10’ ? Application Cache 10’ ? 离线资源形式 10’ ? 离线存储 10’ ? 离线应用 10’ ? Q&A 10’
- 28. Q&A
- 29. 谢谢