移动端离线应用开发实践

what？how？

Transcript

1. 移动端离线应⽤用开发实践 栋寒 : F2E@taobao 12年12月28⽇日星期五
2. what？ 12年12月28⽇日星期五
3. 应⽤用在离线情况下可正常“使⽤用” 顾名思义： 12年12月28⽇日星期五
4. 在全球互联⺴⽹网时代 ⺴⽹网络⽆无处不在？ 12年12月28⽇日星期五
5. 可预⻅见的⽆无⺴⽹网络时刻 • 乘坐航班 • 移动⺴⽹网络信号断断续续不稳定 • ⼿手机资费耗尽不知情 12年12月28⽇日星期五
6. offline online 未作离线部署 12年12月28⽇日星期五
7. offline online 离线部署后 12年12月28⽇日星期五
8. 正确认识离线应⽤用 12年12月28⽇日星期五
9. 在离线状态下 在⺴⽹网络可⽤用时，再同步⾄至远程主机 保证应⽤用正常显⽰示，不需要⺴⽹网络交互的操作可正 常进⾏行，如：编辑邮件、创建待办事项 12年12月28⽇日星期五
10. How? 12年12月28⽇日星期五
11. html5的时代 nothing is impossable 12年12月28⽇日星期五
12. 离线应⽤用缓存：applicationCache if(window.applicationCache){ //浏览器⽀支持离线引⽤用 //TODO } 12年12月28⽇日星期五
13. appcache ?== 304cache 12年12月28⽇日星期五
14. 304 cache 使⽤用缓存在硬盘上的⽂文件，需要远程主机 响应头信息，通知浏览器读取 12年12月28⽇日星期五
15. appcache 同样使⽤用缓存在硬盘上的⽂文件，只依赖于缓存 清单⽂文件（manifest）的更新状态 ⽆无需远程主机通信即可使⽤用 12年12月28⽇日星期五
16. appcache 打开浏览器输⼊入about:cache 12年12月28⽇日星期五
17. 304cache appcache ⺴⽹网络依赖 是 否 存储空间 较⼤大 相对较⼩小 存储路径 各⾃自独⽴立 各⾃自独⽴立 12年12月28⽇日星期五
18. web服务器现状 主流web服务器都没有为离线应⽤用提供任何默认 的缓存⾏行为，若想使⽤用离线功能，需要在html⽂文档中 声明 12年12月28⽇日星期五
19. 解决之道：manifest⽂文件声明 <!doctype html> <!--cache⽂文件名称随意--> <html manifest="cache.manifest"> <head> 12年12月28⽇日星期五
20. manifest⽂文件样例 CACHE MANIFEST #version:1.0.0 CACHE: #指定cache⽂文件的列表，绝对路径、相对路径均可 http://a.tbcdn.cn/s/kissy/logo.png example.js NETWORK: #指定需要⺴⽹网络加载的⽂文件列表， # * 表⽰示除了cachelist中之外的所有⽂文件或路径 * FALLBACK: #提供获取不到缓存资源时的备选资源路径 #⼀一般情况下不必关注 /app/login.html offline.html 12年12月28⽇日星期五
21. manifest⽂文件配置（ 以apache为例） • 打开conf⺫⽬目录下mime.types⽂文件 • 添加text/cache-manifest manifest 12年12月28⽇日星期五
22. 简单有效的⽅方法 <?php header('Content-Type:text/cache-manifest'); ?> 12年12月28⽇日星期五
23. 你应该了解的缓存状态码 数值型属性 缓存状态 描述 0 UNCACHED（未缓存） 如果未引⼊入manifest的⻚页⾯面，appcache状态都是未缓存 1 IDLE（空闲） 最常出现的状态，cache完成后，就会处理空闲状态 2 CHECKING（检查中） 正在检查更新 3 DOWNLOADING（下载中） 正在下载更新 4 UPDATEREADY（更新就绪） 已经准备好更新 5 OBSOLETE（过期） manifest⽂文件丢失，appcache就会处于过期状态 12年12月28⽇日星期五
24. 相关事件 事件 关联的状态 onchecking CHECKING oncached IDLE ondownloading DOWNLOADING onupdateready UPDATEREADY onobsolete OBSOLETE onnoupdate 在没有更新时触发 onerror offline情况下，⽆无法请求到manifest⽂文件，即触发 12年12月28⽇日星期五
25. 查看demo 12年12月28⽇日星期五
26. 复杂的事情简单化 12年12月28⽇日星期五
27. • 保证html⽂文档正确引⼊入manifest⽂文件 • 维护manifest⽂文件，及时更新appcache 12年12月28⽇日星期五
28. • 保证html⽂文档正确引⼊入manifest⽂文件 • 维护manifest⽂文件，及时更新appcache PS: 在更新manifest⽂文件后，哪怕是更改注释，浏览器都会⾃自动更新缓存⽂文件 12年12月28⽇日星期五
29. 仅仅是静态资源⽽而已 12年12月28⽇日星期五
30. 对于动态资源，⽆无法在manifest中配置 ajax、jsonp 12年12月28⽇日星期五
31. 速找好基友？ 12年12月28⽇日星期五
32. 速找好基友？ localStorage 12年12月28⽇日星期五
33. 速找好基友？ localStorage web database 12年12月28⽇日星期五
34. hack思路 getDynamic ⺴⽹网络可⽤用 getDynamic 是 fetchFromLocalData 否 updateLocalData 12年12月28⽇日星期五
35. 业务代码中简单处理 navigator.onLine ? this.async(url) : this.fetchFromStorage(url); this.manageStorage(url,responseText); localStorage.removeItem(key); localStorage.setItem(url,responseText); localStorage.getItem(url); 12年12月28⽇日星期五
36. not just offline App on mobile 12年12月28⽇日星期五
37. 对于提升web应⽤用响应速度，同样强⼒力 12年12月28⽇日星期五
38. Q & A 12年12月28⽇日星期五