Safari на iPhone и iPad 4.2: акселерометр, веб-сокеты и лучшая поддержка HTML5

Поддержка акселерометра и гироскопа

Как вы, наверное, знаете, все устройства iOS имеют датчики акселерометра (плюс магнитометр и гироскоп на некоторых устройствах). Однако, как веб-разработчики, у нас не было доступа к таким датчикам до сих пор. Safari теперь поддерживает DeviceOrientation API (черновик W3C). Глядя на доступные объекты, кажется, что весь API полностью поддерживается (включая события ondeviceorientation и ondevicemotion); Я мог только получить данные акселерометра с успехом.

ОБНОВЛЕНИЕ: Apple только что выпустила документацию по API: поддерживаются акселерометр и гироскоп. См DeviceMotionEvent по классам и DeviceOrientation Class Reference .

Если у вас есть устройство iOS 4.2, перейдите на ad.ag/wjmtgt из браузера Safari. За 15 минут я закодировал образец, используя JavaScript и немного CSS3: это типичный шарик, перемещающийся по экрану относительно положения устройства iOS. Следующее видео показывает этот образец в действии:

API обнаруживает и передает данные акселерометра 50 раз в секунду. Чтобы получить их , вы должны захватить ondevicemotion события на окне глобального объекта (или с помощью addEventListener с devicemotion в качестве имени события) , а затем использовать accelerationIncludingGravity свойство на DeviceOrientationEvent параметра. Он имеет три значения x , y & z , представляющих ускорение в м / с ² для каждой оси. Вы должны использовать типичную акселерометр математику для игр, эффектов или CSS-преобразований.

ОБНОВЛЕНИЕ: Если устройство имеет гироскоп (iPhone 4 или iPod Touch 4G), то вы можете использовать ускорение вместо ускорения, включая Гравитацию .

window.ondevicemotion = function(event) {
// event.accelerationIncludingGravity.x
// event.accelerationIncludingGravity.y
// event.accelerationIncludingGravity.z
}

ОБНОВЛЕНИЕ: Для гироскопа вам нужно захватить ориентацию устройства и прочитать альфа , бета и гамма свойства из параметра события, давая нам углы (между 0 и 360) для обнаружения изменений вращения. Помните, что не все устройства iOS поддерживают гироскоп, поэтому вы не будете получать подобные события на iPod до 4G, iPad или iPhone 3GS или старше.

window.ondeviceorientation = function(event) {
// event.alpha
// event.beta
// event.gamma
}

WebSockets

Другое большое новое обновление — поддержка WebSockets. WebSockets — это W3C HTML5 API, который в настоящее время находится в стадии разработки и позволяет JavaScript использовать открытое двунаправленное полнодуплексное соединение с сервером с использованием сокетов TCP. Это отличная новость для чата и приложений реального времени, которая позволит сократить периодические вызовы AJAX.

Вам понадобится веб-сервер, понимающий новый протокол WS через HTTP-рукопожатие. Вы всегда должны полагаться на резервный механизм, если WS не поддерживается на сервере или из-за прокси / шлюза.

Поддержка формы HTML5

Помимо поддержки формы HTML5, которую я уже обсуждал в книге , теперь у нас есть поддержка  обязательного логического атрибута и нового псевдокласса : invalid CSS. Поэтому следующий код будет отображать зеленый текст ввода, когда завершено, и желтый, если он не завершен:

<style>
input {
background-color: green;
color: white;
}
input:invalid {
background-color: yellow;
}
</style>
<input type="text" required>

AJAX 2

Проект W3C под названием XMLHttpRequest Level 2 (он же AJAX 2) добавляет новые функции к объекту и функциональности XHR. Исходя из этой спецификации, теперь Safari поддерживает объект FormData, который позволяет нам легко отправлять данные формы через AJAX.

Поддержка печати

iOS 4.2 включает AirPrint, решение для беспроводной печати. Поэтому теперь мы можем использовать window.print () для вызова диалогового окна печати в Safari.

Новые типы данных JavaScript

Safari теперь поддерживает класс Blob и многие коллекции целочисленных типов, такие как Float32Array, Int8Array, Uint8Array, Int16Array Uint16Aray, Int32Array и UInt32Array, определенные в спецификации Typed Arrays . Больше информации на сайте Firefox .

Новые события DOM

Помимо новых событий движения, теперь мы можем использовать новое событие onhashchange HTML5, которое обнаруживает изменения в URL после хеша (#) для AJAX-подобных веб-приложений; недействительным, onbeforeload и onpopstate события из HTML5 проекта спецификации.

ОБНОВЛЕНИЕ: Похоже, что API источника событий (черновик W3C) также реализован через доступный класс EventSource для получения событий на стороне сервера.

ОБНОВЛЕНИЕ: я получил некоторые комментарии о поддержке onhashchange от 4.0 или 4.1 версий.

Теперь мы можем также использовать window.captureEvents и window.releaseEvents к событиям захвата в глобальном пути.

Расширенная поддержка SVG и Canvas

iOS поддерживает SVG как отдельный документ, а также встроенный SVG (используя тег svg ). И теперь мы также можем создавать документы SVG на лету, используя список из более чем 20 классов SVG____, таких как SVGDocument , SVGImage непосредственно из нашего кода.
В HTML5 Canvas теперь поддерживается тип данных ImageData , способ манипулировать изображениями попиксельно из JavaScript.

Другие вещи

• StyleMedia API , которые позволяют сделать CSS Media Queries с помощью JavaScript. Смотрите API .
• WebGLRenderingContext класс доступен, часть API 3D Drawing (ака WebGL). Однако я не вижу никакой реальной поддержки WebGL.
• Глобальный конструктор RGBColor