移动端离线应用开发实践

移动端离线应⽤用开发实践栋寒 : F2E@taobao 12年12月28⽇日星期五

what？ 12年12月28⽇日星期五

应⽤用在离线情况下可正常“使⽤用” 顾名思义： 12年12月28⽇日星期五

在全球互联⺴⽹网时代⺴⽹网络⽆无处不在？ 12年12月28⽇日星期五

可预⻅见的⽆无⺴⽹网络时刻 • 乘坐航班 • 移动⺴⽹网络信号断断续续不稳定 • ⼿手机资费耗尽不知情 12年12月28⽇日星期五

ofﬂine online 未作离线部署 12年12月28⽇日星期五

ofﬂine online 离线部署后 12年12月28⽇日星期五

正确认识离线应⽤用 12年12月28⽇日星期五

在离线状态下在⺴⽹网络可⽤用时，再同步⾄至远程主机保证应⽤用正常显⽰示，不需要⺴⽹网络交互的操作可正常进⾏行，如：编辑邮件、创建待办事项 12年12月28⽇日星期五

How? 12年12月28⽇日星期五

html5的时代 nothing is impossable 12年12月28⽇日星期五

离线应⽤用缓存：applicationCache if(window.applicationCache){ //浏览器⽀支持离线引⽤用 //TODO } 12年12月28⽇日星期五

appcache ?== 304cache 12年12月28⽇日星期五

304 cache 使⽤用缓存在硬盘上的⽂文件，需要远程主机响应头信息，通知浏览器读取 12年12月28⽇日星期五

appcache 同样使⽤用缓存在硬盘上的⽂文件，只依赖于缓存清单⽂文件（manifest）的更新状态⽆无需远程主机通信即可使⽤用 12年12月28⽇日星期五

appcache 打开浏览器输⼊入about:cache 12年12月28⽇日星期五

304cache appcache ⺴⽹网络依赖是否存储空间较⼤大相对较⼩小存储路径各⾃自独⽴立
各⾃自独⽴立 12年12月28⽇日星期五

web服务器现状主流web服务器都没有为离线应⽤用提供任何默认的缓存⾏行为，若想使⽤用离线功能，需要在html⽂文档中声明 12年12月28⽇日星期五

解决之道：manifest⽂文件声明 <!doctype html>  <html manifest="cache.manifest"> <head> 12年12月28⽇日星期五

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⽇日星期五

manifest⽂文件配置（以apache为例） • 打开conf⺫⽬目录下mime.types⽂文件 • 添加text/cache-manifest manifest 12年12月28⽇日星期五

简单有效的⽅方法 <?php header('Content-Type:text/cache-manifest'); ?> 12年12月28⽇日星期五

你应该了解的缓存状态码数值型属性缓存状态描述 0 UNCACHED（未缓存）如果未引⼊入manifest的⻚页⾯面，appcache状态都是未缓存 1 IDLE（空闲）最常出现的状态，cache完成后，就会处理空闲状态
2 CHECKING（检查中）正在检查更新 3 DOWNLOADING（下载中）正在下载更新 4 UPDATEREADY（更新就绪）已经准备好更新 5 OBSOLETE（过期） manifest⽂文件丢失，appcache就会处于过期状态 12年12月28⽇日星期五

相关事件事件关联的状态 onchecking CHECKING oncached IDLE ondownloading DOWNLOADING onupdateready
UPDATEREADY onobsolete OBSOLETE onnoupdate 在没有更新时触发 onerror ofﬂine情况下，⽆无法请求到manifest⽂文件，即触发 12年12月28⽇日星期五

查看demo 12年12月28⽇日星期五

复杂的事情简单化 12年12月28⽇日星期五

• 保证html⽂文档正确引⼊入manifest⽂文件 • 维护manifest⽂文件，及时更新appcache 12年12月28⽇日星期五

• 保证html⽂文档正确引⼊入manifest⽂文件 • 维护manifest⽂文件，及时更新appcache PS: 在更新manifest⽂文件后，哪怕是更改注释，浏览器都会⾃自动更新缓存⽂文件 12年12月28⽇日星期五

仅仅是静态资源⽽而已 12年12月28⽇日星期五

对于动态资源，⽆无法在manifest中配置 ajax、jsonp 12年12月28⽇日星期五

速找好基友？ 12年12月28⽇日星期五

速找好基友？ localStorage 12年12月28⽇日星期五

速找好基友？ localStorage web database 12年12月28⽇日星期五

hack思路 getDynamic ⺴⽹网络可⽤用 getDynamic 是 fetchFromLocalData 否 updateLocalData 12年12月28⽇日星期五

业务代码中简单处理 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⽇日星期五

not just ofﬂine App on mobile 12年12月28⽇日星期五

对于提升web应⽤用响应速度，同样强⼒力 12年12月28⽇日星期五

Q & A 12年12月28⽇日星期五

移动端离线应用开发实践

移动端离线应用开发实践

Other Decks in Technology

Featured

Transcript