Android 2.3.x の退場

2013-08-25 時点のAndroid 2.3.x(Gingerbread)のシェアは33%です。 Android 2.3.x が退場すると、JavaScriptの世界ではこのような変化が訪れます。

以下の機能が利用可能になります。

XHR Lv2
Web Font
WebP
"use strict" (ES5 strict mode)
Typed Arrays
CSS3 3D Transforms
SVG SMIL animation
SVG in HTML img element
Inline SVG in HTML5
SVG fonts
SVG in CSS backgrounds
SVG (basic support)
<script defer async>
Navigation Timing API
matchMedia
FileReader API
CSS Repeating Gradients
classList (DOMTokenList)
Blob URLs
File API
DeviceOrientation events

Android Browser では以下の機能が今後もサポートされません。

Web Workers
Web Sockets
WebGL - 3D Canvas graphics
Viewport units: vw, vh, vmin, vmax
HTML templates
SVG effects for HTML
SVG fragment identifiers
SVG filters
<style scoped>
getUserMedia/Stream API
Shared Web Workers
Shadow DOM
requestAnimationFrame
Progress & Meter
Pointer events
PageVisibility
Ogg/Theora video format
MathML
Date/time input types
IndexedDB
HTML5 form features
Form validation
Server Sent events
CSS Regions
CSS Hyphenation
CSS Filter Effects
Channel messaging
calc() as CSS unit value
Web Audio API

iOS 5.x

2013-08-25 時点のiOS 5.xのシェアは2〜3%です。 iOS 5.x が退場すると、JavaScriptの世界ではこのような変化が訪れます。

以下の機能が利用可能になります。

SVG filters
requestAnimationFrame
FileReader API
File API
CSS Filter Effects
calc() as CSS unit value
Blob URLs
Viewport units: vw, vh, vmin, vmax
Web Audio API
PageVisibility
Mutation Observer

Android 2.3.x と iOS 5.x の退場

Android 2.3.x と iOS 5.x が退場すると、以下の機能が安心して利用可能になります。

FileReader API
Blob URLs
File API

Android Browser がモバイルWebの進化を止めてしまっているため、
Android 4.x の時代になっても、基本的にブラウザでできることが増えません。

XHR Lv2 が利用可能になる

xhr.responseType, xhr.onload, xhr.onerror が利用可能になります。
responseType には以下の値を指定できます。

responseType:String	xhr.response value
"arraybuffer"	バイナリデータ
"blob"	Blobデータ
"document"	Node
"text"	responseTextと同じ値
"json"	JavaScript Object

function xhr(url,        // @arg URLString:
             type,       // @arg String(= "text"):
             callback) { // @arg Function: callback(error:Error, response:Mix)
    type = type || "text";
    var xhr = new XMLHttpRequest();

    xhr.responseType = type;
    xhr.onload = function(event) {
        callback(null, event.target.response);
    };
    xhr.onerror = function(error) {
        callback(error, null);
    };
    xhr.open("GET", url, true);
  //xhr.overrideMimeType("text/plain; charset=x-user-defined"); // binary ファイルなら
    xhr.withCredentials = true;
    xhr.send();
}

上記のコードを従来のXHR Lv1 で実現しようとすると、以下のようになるでしょうか。

function xhr(url, type, callback) {
    type = type || "text";
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            var text = xhr.responseText;

            switch (xhr.status) {
            case 200:
            case 201:
                switch (type) {
                case "arraybuffer":
                case "blob":
                    callback(null, toASCII(text));
                    break;
                case "document":
                    var doc = document.implementation.createHTMLDocument("");
                    doc.innerHTML = text;
                    callback(null, doc);
                    break;
                case "json":
                    callback(null, JSON.parse(text));
                    break;
                case "text":
                    callback(null, text);
                }
                break;
            case 304:
            default:
                callback(new TypeError(xhr.status), null);            }
        }
    };
    xhr.open("GET", url, true);
    if (/^(arraybuffer|blob)$/.test(type)) {
        xhr.overrideMimeType("text/plain; charset=x-user-defined");
    }
    xhr.withCredentials = true;
    xhr.send();
}

function toASCII(binary) {
    var rv = [];

    for (var i = 0, iz = binary.length; i < iz; ++i) {
        rv[i] = binary.charCodeAt(i) & 0xff;
    }
    return rv;
}

uupaa/walk.out.md

Select an option