离线应用开发知识点笔记

/*
* 一：离线应用-本地缓存文件
*
* 缓存机制：Cache Manifest,在线时将对应文件缓存到本地，离线时读取本地缓存文件，使用manifest文件来管理缓存文件信息。
* 使用manifest文件管理缓存需要在服务端进行相应的配置，如IIS/NG
*      服务端设置：在http头中设置文件类型-> 关联扩展名.manifest  内容类型 text/cache-manifest
* manifest文件管理的是需要缓存文件的URL; 命名 xxx.manifest
* html页面引用：
* manifest文件格式：
*   CACHE MANIFEST
*   #version 0.0.0
*
*   CACHE:
*   # 相对路径的资源文件(离线时需要缓存到本地的文件列表)
*   js/xxx.js
*   css/xxx.css
*   images/xxx.png /jpg,gif等
*
*   NETWORK:
*   # 列出在线时需要访问的资源文件
*   index.html
*
*   FALLBACK:
*   # 以成对形式列出不可访问文件的替补资源文件（前者不可访问者访问后者）
*   /prd/index.html   /stg/index.html
*
*
*
*   离线应用的开发流程
*   1.创建manifest类型文件，列出需要缓存到本地的资源文件
*   2.页面引用文件 
*   3.对服务器设置，使其能读取manifest类型的文件
*
*   浏览器与服务器之间的数据交互流程
*   1.浏览器请求访问页面
*   2.服务端响应返回页面
*   3.浏览器解析页面，获取页面包含的所有资源文件，解析manifest文件，请求获取其文件URL列表的资源
*   4.浏览器获取manifest文件并更新本地存储，触发onUpdateReady事件
*   5.浏览器再访问该页面，如果manifest没发生改变，则直接读取本地的缓存资源
*
* */


/*
* 二：本地缓存的更新及状态检测---本地缓存对象applicationCache
*   更新本地缓存的方法：
*       1.在onUpdateReady事件中调用swapCache()；
*           window.applicationCache.addEventListener('updateready',function(){
*               window.applicationCache.swapCache()
*           },true)
*       2.直接调用window.applicationCache.update();
*
*   更新本地缓存的状态值 applicationCache.status
*       0：表示空，缓存不存在/不可用
*       1：表示空闲，缓存是最新的，不需更新
*       2：表示检测，正在检测manifest文件的状态，确定是否发生了改变
*       3：表示下载，manifest文件发生了改变,正在下载中
*       4：表示状态，本地缓存文件已更新，需刷新页面
*       5：表示废弃，当缓存文件已被删除/不可用
*
* */

/*
* 三：检测在线状态 onLine --> true/false ; 随网络变化而变化，在线/离线
*   判断：navigation.onLine --> true 在线  / false 离线
*   监听online/offline
*       window.addEventListener('online',function(){
*           //在线
*       },false)
*       window.addEventListener('offline',function(){
*           //离线
*       },false)
*
* */

/*
* 四：离线状态下的数据交互实现步骤：
*   1.判断离线状态下将数据存储到本地localStorage对象或者Web SQL数据库
*   2.判断在线状态下将本地缓存的数据同步到服务端
*   
* */