(第七天)HTML5应用程序的缓存与Web Worker&服务器消息推送

Web文件的缓存(Cache)

---

manifest 文件的建议的文件扩展名是：".appcache"。
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

缓存的作用

通过对网页文件的缓存，达到离线浏览的目的

缓存的好处

• 离线浏览 - 用户可在应用离线时使用它们
• 优化访问速度 - 已缓存资源加载得更快
• 降低服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

如何实现缓存功能？

1. 创建manifest文件(如web.appcache)，并根据manifest文件的结构书写缓存指令

• manifest文件的结构
  • 第一部分：CACHE MANIFEST - 在此标题下列出的文件将在首次访问后进行缓存
  • 第二部分：NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • 第三部分：FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
  • 以#开头的是注释行，可写在任何部分中，方便注释及更新缓存使用
• mainfest文件相关注意点
  • CACHE MANIFEST字符的起始点必须位于文件的第一个字符处，否则文件无法解析，导致缓存无法实现；即使有个空格都不行。NETWORK和FALLBACK的书写顺序没有强制要求。
  • manifest文件内容一旦被改动，浏览器会根据最新的manifest文件规则更新进行缓存。
  • 若web文件同时在CACHE MANIFEST和NETWORK标题下出现，浏览器会将文件进行缓存处理，即CACHE MANIFEST优先级比NETWORK高
  • 缓存的文件来源两个地方：一是CACHE MANIFEST标题下的文件，二是FALLBACK中无法访问时的回退页面（如404页面）
  • 若manifest属性被定义，那么需要访问网络的所有文件都需要写在NETWORK标题下。因此NETWORK标题下的内容常用*通配符表示

2. 在标签上添加manifest属性，并指定manifest文件的路径 ，浏览器会根据manifest文件中的指令进行缓存处理。

HTML代码示例

manifest文件内容示例

CACHE MANIFEST
# 2016-10-23 v1.0.3
# 以下文件会被缓存
/index.js
/logo.gif

# 所有文件都需要访问网络
# 若style.css不可访问网络，也没有缓存，
# 那么将无法访问到style.css文件，即网页无法加载style.css
NETWORK:
* 

FALLBACK:
#/sub文件，404.html会被缓存
/sub    404.html
#/sub/目录下的所有文件
/sub/   404.html

如何更新缓存 修改manifest文件内容

• 添加删除或修改manifest缓存文件；
• 更新manifest文件中的注释信息，如版本信息；常用于文件不变但需要浏览器重新下载缓存文件的时候，如css文件、js文件更新。

注：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

Web Worker

---

大部分浏览器都支持Worker，但IE浏览器不支持；判断是否支持的方法：if(Worker){...}else{不支持};

什么是 Web Worker？

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

什么时候使用Web Worker？

当需要js处理复杂度较高的事务时，为了避免影响交互页面的用户体验，可通过Worker后台处理相关事务，处理好之后返回前台简单处理即可。

Web Worker的使用方法

• 创建Worker var w = new Worker("worker.js")
• 设置Worker的消息监听事件w.onmessage = function(ev){...}，当Worker(即worker.js)传回消息时执行函数（得到回传数据后做前台处理即可）
• 发送数据给Worker(即worker.js)处理w.postMessage(...)
• Worker(即worker.js)设置消息监听事件this.onmessage = function(ev){...} ，当Worker(即worker.js)收到w发送的消息后，执行函数
• 当Worker(即worker.js)处理完成之后将数据发送给w即可，this.postMessage(...)
• 触发第二步的消息监听事件

worker.js就是一个Worker实例的文件，复杂的事务就在该js中处理，处理完成后回传给HTML页面。
worker通过postMessage(...)方法发送消息，通过onmessage事件监听接收消息，消息的内容通过ev.data获取

如何终止Worker

通过w.terminate()方法即可终止Worker，并释放其浏览器/计算机资源

Worker相关注意点

• Worker只能在服务端运行；因此需要看Worker效果的话需要搭建Web Server
• 由于 web worker 位于外部文件中，所以无法访问下例 JavaScript 对象：
  • window对象
  • document对象
  • parent对象

代码示例

• HTML代码

    

        first:
        
        second
        
        

    
    

• index.js代码

"use strict";
var first, second, result, w;
// querySelectorAll(".result") 获取指定CSS选择器的所有元素 
// querySelector 获取指定CSS选择器的第一个元素
first = document.querySelector("#first");
second = document.querySelector("#second");
result = document.querySelector(".result");
console.log(w + first.value + "
" + second.value + "
" + result.textContent);
// 判断浏览器是否支持Worker，也可通过typeof(Worker) === "undefined"；这里的window表示self=this，故可以不写
if (window.Worker) {
  console.log(typeof(w));
  // typeof() 判断对象类型；如果w为undefined类型，即未定义，则创建一个Worker对象
  if (typeof(w) === "undefined") {
      w = new Worker("plus.js");
  }
  // second元素的change事件监听
  first.onchange = postMsg;
  // second元素的change事件监听
  second.onchange = postMsg;
  // worker的message事件监听
  w.onmessage = function(ev) {
      result.textContent = ev.data;
  };
} else {
  result.textContent = "您的浏览器不支持Worker";
}
// 监听到change事件执行的发送信息函数
function postMsg() {
  // 判断first数据不为NaN
  if (isNaN(first.valueAsNumber)) {
      first.valueAsNumber = 0;
  }
  if (isNaN(second.valueAsNumber)) {
      second.valueAsNumber = 0;
  }
  // 将两个值封装为数组发送给plus.js这个worker对象
  w.postMessage([first.valueAsNumber, second.valueAsNumber]);
}

• plus.js代码

// plus.js是一个Worker对象，这里的this可以不写
this.onmessage = function(ev) {
  // 将传递过来的first和second相加后发送给该worker对象,即index.js中的w
  var result = "result:" + (ev.data[0] + ev.data[1]);
  postMessage(result);
}

上述代码示例效果图

服务器消息推送EventSource

---

服务器消息推送的实现方法

• WebSocket：功能强大，但实现起来技术比较复杂
• HTTP协议的简易轮询：弊端无法很好解决
  • 轮询周期过程过长，客户端更新数据不及时
  • 轮询周期过程过短，增加服务端的负担
• EventSource：通过客户端实时监听服务端的推送情况，缺点是IE浏览器不支持。

EventSource如何使用？

• 在服务端推送消息页面添加一个内容为'Content-Type: text/event-stream'的header
• 在HTML页面JS中创建EventSource对象 var es = new EventSource("postmsg.php");注：postmsg.php为服务端推送消息页面的访问路径
• 为EventSource实例添加事件监听
  • es.onopen = function(ev){...}：与服务器建立连接后触发的事件
  • es.onerror = function(ev){...}：发生错误时触发的事件，错误包含很多种，网络连接错误，编码错误等等
  • es.onmessage = function(ev){...}：接收到服务器端推送消息的事件；获取消息的方法ev.data
• 服务端发送消息，消息的格式为data:消息内容

代码示例

• php服务端

• HTML页面

    
    
    


    

        
Server Status
        

    
    

        
Server Date