Web API 简介

以 Firefox OS 为例

尤睿, ryou@mozilla.com

Web API

• 生态系统: 大量的 Web 开发者，丰富的框架 / 资源 / 文档
• 优势: 学习成本 / 开发成本 / 迁移成本 / 维护成本
• 前端技术: html, css, javascript
• 跨平台: Web API 与 原生 API
• 标准化: Web API 与 专有 API
• 应用形式: Web Page 与 Web App

The Web is the platform.

用途

• 玩游戏：Canvas, WebGL, FullScreen
• 图像处理：Canvas
• 视频聊天： WebRTC
• 录像录音： WebRTC
• 看视频：Video
• 听音乐：Audio
• 地理定位：Geolocation
• 打电话：Contact, Telephony
• 发短信：Contact, SMS

More Web APIs are coming ...

体验交互类

更好的用户体验，更流畅的人机交互

• Page Visibility
• Fullscreen
• Geolocation

Geolocation

追踪用户的位置和运动

navigator.geolocation.getCurrentPosition(function(position) {
    var coords = position.coords;
    // decimal degrees
    console.log(coords.latitude + ", " + coords.longitude);
    console.log(coords.altitude + "meters");
}, function(error) {
    if (error.code == 1) {
        console.log("Permission denied");
    } else {
        console.log(error.code);
    }
}, {maximumAge: 500});

多媒体篇

音乐，摄影，摄像，电影，动漫，游戏……

• Canvas
• WebGL
• WebRTC
• Audio
• DeviceStorage

Canvas

2D 像素级绘制，硬件加速支持

var canvas = document.getElementById('rect');
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(200,0,0)';
context.fillRect (10, 10, 300, 300);
context.fillStyle = 'rgba(0, 0, 200, 0.5)';
context.fillRect (140, 140, 300, 300);

2D游戏

Electronic Arts: Lord of Ultima

WebGL

OpenGL 的 Web 版本, canvas 的 3D 绘制环境

Banana Bread (Emscripten)

HexGL (Three.js)

Audio

加载、播放、合成音频数据

// Load dynamically
var audio = new Audio();
audio.src = '../demos/visibility/johann_sebastian_bach_air.ogg';
audio.addEventListener('MozAudioAvailable', function(event) {
  console.log(event.time + "s");
}, false);
audio.play();

WebRTC: getUserMedia

录制、处理音频流和视频流

var video = document.getElementById('my-video');

navigator.getUserMedia({'video': true}, function(mediaStream) {
  video.src = URL.createObjectURL(mediaStream);
  video.play();
}, function(error) {
  console.error('Video capture error: ', error.code);
});

// Capture
var ctx = myCanvas.getContext('2d');
ctx.drawImage(video, 0, 0);

Demo

性能篇

越来越接近原生应用

• Web Workers
• Typed Array
• asm.js

Typed Arrays

高效操作二进制数据

// a buffer with 16 bytes
var buffer = new ArrayBuffer(16);
// a view treating the data as 32-bit signed integers
var int32View = new Int32Array(buffer);
// Access the fields in the array just like a normal array
for (var i=0; i < int32View.length; i++) {
  int32View[i] = i*2;
  console.log(int32View[i]);
}

Structured Cloning & Transferable Objects

与 Web Workers 进行数据交换的高效方式

worker.postMessage = worker.webkitPostMessage || worker.postMessage;

var bigData = new ArrayBuffer(1);
// // New argument: postMessage(message, targetOrigin, transferables);
worker.postMessage({other: 'data', data: bigData}, [bigData]);
if (bigData.byteLength) {
  console.error('Transferables are not supported in your browser!');
} else {
  // Buffer got reset, transferables are supported.
}

asm.js

编译模式与静态类型

function DiagModule(stdlib) {
    "use asm";
    var sqrt = stdlib.Math.sqrt;
    function square(x) {
        x = +x;
        return +(x*x);
    }
    function diag(x, y) {
        x = +x;
        y = +y;
        return +sqrt(square(x) + square(y));
    }
    return { diag: diag };
}
var fast = DiagModule(window);     // produces AOT-compiled version
console.log(fast.diag(3, 4));      // 5

编译链接流程

手机篇

手机特有功能

• Telephony
• SMS
• Vibration

Telephony

拨出、接听电话

// First, obtain a telephony object.
var telephony = navigator.mozTelephony;
// Check if the speaker is enabled or phone is muted.
concole.log(telephony.speakerEnabled, telephony.muted);
// Then, we dial out.
var outgoing = telephony.dial(myPhoneNumber);
// Event handlers for the call.
outgoing.onconnected = function(event) {
  /* Do something when the callee picks up the call. */
};
outgoing.ondisconnected = function(event) {
  /* Do something when the call finishes. */
};

黑名单的简单实现

// Receive an incoming call.
telephony.onincoming = function onincoming(event) {
  var incoming = event.call;
  if (incoming.number == myBlockedNumber) {
    // Hang up
    incoming.hangUp();
    return;
  }
  // Answer the call.
  incoming.answer();
};

传感器篇

获取环境情况与设备状态

• Battery
• Orientation & Motion
• Proximity
• Ambient Light

Battery

获取、追踪电池状态和充电水平

var battery = navigator.battery;
console.log('Battery charging: ', battery.charging); // true
console.log('Battery level: ', battery.level); // 0.58
console.log('Battery discharging time: ', battery.dischargingTime);

// Listen to change events
battery.addEventListener('chargingchange', function(e) {
  console.warn('Battery charge change: ', battery.charging);
}, false);

全平台适用

Screen Orientation (& Lock)

获取、改变屏幕方向

console.log(window.screen.mozOrientation);
if (window.screen.mozLockOrientation('landscape-primary')) {
    console.log('orientation was locked');
} else {
    console.log('lock failed');
}

DeviceOrientation & DeviceMotion

访问加速传感器、陀螺仪与指南针

window.addEventListener('deviceorientation',function(event){
  // left-to-right tilt in degrees, where right is positive
  var tiltLR = event.gamma;
  // front-to-back tilt in degrees, where front is positive
  var tiltFB = event.beta;
  // compass direction the device is facing in degrees
  var dir = event.alpha

  // call our orientation event handler
  rotateMyStuff(tiltLR, tiltFB, dir);
}, false);