应用缓存 WebRTC 触摸屏事件

应用缓存(ApplicationCache)

浏览器本身的换粗机制

• 浏览器会对静态文件(html csss js 图片等)进行自动缓存
• 下一次访问该网页，会读取缓存
• 读取缓存之前进行判断， 第一判断缓存时间和服务器上文件的最后一次修改时间
• 如果缓存时间大于最后一次修改时间， 证明缓存之后，服务器上没有对文件进行修改，此时，浏览器会直接读取缓存的文件
• 如果缓存时间小于最后一次修改时间，证明缓存后服务器又对文件进行了修改，此时，浏览器会重新下载服务器上的静态文件，并重新进行缓存。

应用缓存的优点(Application Cache)

• 进行离线存储
• 加快访问速度
• 减少服务器的负载

使用过程

• 定义manifest文件， 名字自定义 后缀自定义， 建议后缀appcache
• 在html中使用属性manifest引入 manifest文件

应用程序的原理

• 浏览器请求，判断有无appcacheCache
• 如果没有， 从服务器下载相关文件， 并进行缓存
• 如果有， 把缓存文件 加载到浏览器， 并且请求manifest文件，看文件是否更新， 如果manifest文件更新，会从新下载缓存文件，并·更新本地的缓存

manifest文件

CACHE MANIFEST
#version: 0.0.1
CACHE:
缓存文件.html
缓存文件.css

NETWORK:
   不缓存的文件.html

  FALLBACK:
404.html

applicationCache对象

• 属性
  • status
• 方法
  • update()
  • abort()
  • swapcache()
• 事件
  • checking
  • noupdate
  • downloading
  • progress
  • updateready
  • error
  • absolete

WebRTC

作用

• 调用系统的摄像头和麦克风

使用

• navigator.getUserMedia(options， success, error)

• options

    {
        video:true/false,
        audio:true/false
    }
  

MediaStream

成功后的回调函自动传入该对象作为参数

触摸屏的事件

事件类型

• touchstart
• touchend
• touchmove

touchEvent

• targetTouches 属性 获取touchlist对象

touchList

• 表示所有touch对象的集合
• 一个touch对象表示一个触摸点

touch对象

*clientX
*clientY
*pageX
*pageY
*screenX
*screenY