Новые возможности iPhone 5 и iOS 6 для разработчиков HTML 5

Быстрый обзор

Я собираюсь разделить этот пост на две части: iPhone 5 и iOS 6 .

На iPhone 5:

• Новый размер экрана
• Новый симулятор
• Что тебе необходимо сделать
• Проблемы

Новые функции на iOS 6:

• Загрузка файлов и доступ к камере с помощью Media Capture и File API
• API веб-аудио
• Умные баннеры приложений для интеграции собственных приложений
• Фильтры CSS 3
• CSS 3 Cross Fade
• Поддержка частичного изображения CSS
• Полная поддержка экрана
• API синхронизации анимации
• Поддержка нескольких изображений
• Passbook купоны и пропуски с доставкой
• API хранилища и изменения веб-приложений
• Веб-просмотр изменений для собственных веб-приложений
• Отладка с помощью удаленного веб-инспектора
• Более быстрый движок JavaScript и другие новости

iPhone 5

Новый iPhone 5 — вместе с iPod Touch 5- ^го поколения — имеет только одно большое изменение с точки зрения веб-разработки: разрешение экрана. Эти устройства имеют широкий 4-дюймовый экран, WDVGA (Wide Double VGA) 640 × 1136 пикселей, 326 DPI — Retina Display, как Apple это назвала. Эти устройства имеют такую ​​же ширину, как iPhone 4 / 4S, но на 176 пикселей больше в портретном режиме.

Новый симулятор

iOS Simulator на Xcode 4 включает в себя эмуляцию iPhone 5

Новый Xcode 4 (доступный в Mac AppStore ) включает в себя обновленный iOS Simulator. В новой версии есть три варианта симуляции iPhone:

• iPhone: iPhone 3GS, iPod Touch 1- ^го, 3- ^го поколения
• iPhone Retina 3.5 ″: iPhone 4, iPhone 4S, iPod Touch 4- ^го поколения
• iPhone Retina 4 ″: iPhone 5, iPod Touch 5- ^го поколения

Новый симулятор также включает в себя новое приложение Карт, заменяющее Карты Google по умолчанию и Passbook.

Что нужно сделать для новых устройств

Обычно, если ваш сайт / приложение оптимизировано для вертикальной прокрутки, у вас не должно возникнуть никаких проблем. Те же видовой экран, значки и методы для iPhone 4 / 4S должны работать правильно. Помните, что при обновлении iOS вы также обновляете веб-представление: это означает, что все нативные веб-приложения, такие как приложения PhoneGap / Apache Cordova, и псевдобраузеры, такие как Google Chrome для iOS, также обновляются. Однако, если ваше решение зависит от высоты, у вас могут возникнуть проблемы. Достаточно взглянуть на следующий пример веб-сайта Google Maps на iPhone 4 и iPhone 5. Поскольку высота отображается как константа, строка состояния не скрыта, а внизу есть белая полоса.

Будьте осторожны, если вы спроектировали для определенной высоты, как Google Maps. Как вы можете видеть (правая подпись от iPhone 5) есть белая нижняя панель, и панель URL не может быть скрыта, так как не хватает контента.

Если вы используете адаптивный веб-дизайн, у вас не должно быть особых проблем, как обычно, в методах RWD для условий используется ширина, а не высота.

Обнаружение устройства

На момент написания этой статьи еще не было iPhone 5 на улице. Однако, насколько я мог проверить каждый тест, нет способа обнаружить iPhone 5 на стороне сервера . Пользовательский агент указывает только iPhone с iOS 6, и точно такой же пользовательский агент используется для iPhone 4S с iOS 6 и iPhone 5.

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

Поэтому единственный способ обнаружить присутствие iPhone 4 ″ — это использовать JavaScript и / или медиа-запросы на стороне клиента. Если вам нужно знать серверную часть, вы можете установить cookie со стороны клиента для следующей загрузки. Помните, что эти устройства имеют высоту 1136 пикселей, но с точки зрения пикселей CSS (пикселей с независимым разрешением) мы говорим о высоте 568 пикселей, поскольку эти устройства имеют соотношение пикселей 2.

isPhone4inches = (window.screen.height==568);

Используя CSS Media Queries и адаптивный веб-дизайн, мы можем обнаружить iPhone 5, используя:

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 or iPod Touch 5th generation */
}

Веб-приложение для домашнего экрана

Для веб-приложений домашнего экрана проблема кажется важной. Я сообщил о проблеме в NDA без какого-либо ответа от Apple.

По сути, когда вы добавляете на главный экран веб-сайт, поддерживающий метатег apple-mobile-web-app , ваше веб-приложение  работает только в режиме эмуляции iPhone 3.5 ″ (он не принимает всю высоту), как вы можете видеть на следующем рисунке. пример из веб-приложения Financial Times.

Черные полосы почтового ящика, которые вы видите здесь, не являются проблемой на изображении. Именно так полноэкранное веб-приложение запускается по умолчанию на iPhone 5 и новом iPod Touch.

Хотя было бы неплохо не увеличивать высоту веб-приложения, если ОС не уверена в его совместимости на более широком экране, насколько я могу проверить, нет способа определить, что наше веб-приложение совместимо с 4-дюймовым экраном. Я перепробовал столько комбинаций, сколько мог придумать, и если вы предоставите  изображение запуска при касании яблока размером 640 × 1096 , iPhone 5 откроет экран-заставку, но его размер будет уменьшен до 640 × 920, по крайней мере, в Симулятор для компиляции GM (почти финальная версия).

ОБНОВЛЕНИЕ 9/20 : Решение найдено, благодаря некоторым ребятам, которые указывали на некоторые решения, я нашел хитрость. Как бы странно это ни звучало, вам нужно забыть о области просмотра с шириной = устройство-ширина или ширина = 320 . Если вы не предоставите видовой экран, он будет работать правильно. То же самое, если вы используете другие свойства, кроме ширины; если вы не хотите, чтобы ваш видовой экран был по умолчанию 980px, способ сделать это:

<meta name="viewport" content="initial-scale=1.0">

<meta name="viewport" content="width=320.1">

if (window.screen.height==568) { // iPhone 4"
document.querySelector("meta[name=viewport]").content="width=320.1";
}

Образ запуска не имеет ничего общего с почтовым ящиком, как сообщали некоторые разработчики. Конечно, если вы хотите предоставить стартовый образ запуска, он должен быть 640 × 1096, и вы можете использовать медиазапросы для использования разных изображений на разных устройствах. В некоторых отчетах говорилось, что вам нужно называть образ запуска как в родных приложениях «[email protected]», но это не так. Вы можете назвать это как хотите. Атрибут размеров полностью игнорируется.

Вы можете использовать медиа-запросы для предоставления различных загрузочных образов:

<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">

Если вы хотите предоставить альтернативную версию для устройств с низким разрешением, вы также можете использовать условное отношение -webkit-device-pixel-ratio. Если вам интересно, почему 568px, а не 1136px, помните, что мы используем пиксели CSS, и в этих устройствах соотношение пикселей равно 2.

Хитрость заключается в окне просмотра. Зачем? Я действительно не знаю . Для меня это просто ошибка. Но это единственное решение, которое я нашел до сих пор.

Другая проблема связана с иконками главного экрана, которые у вас уже есть до покупки нового устройства. iTunes снова установит значок ярлыка из вашей резервной копии, и неясно, будет ли у нас способ улучшить совместимость. Даже если вы измените окно просмотра, если значок уже установлен до изменения, вы получите почтовый ящик.

iOS 6 и HTML5 разработка

iOS 6 доступна в качестве бесплатного обновления для каждого устройства iOS 5, но не для iPad первого поколения, поэтому мы скоро увидим эту версию в Интернете, и рынок iPad фрагментируется  впервые. Следующие выводы полезны для всех устройств iOS, использующих обновление iOS 6. Как всегда — и, к сожалению, — Apple дает нам только частичные и неполные обновления о том, что нового в Safari, и я — как всегда — начинаю усердно работать, копаясь в DOM и других хитростях, чтобы найти новую совместимость.

Управление файлами

<label>Single file</label>
<input type="file">

Мы также можем запросить несколько файлов, используя новый логический атрибут HTML5. В этом случае пользователь не может использовать камеру в качестве источника.

<label>Multiple files</label>
<input type="file" multiple> 

Мы можем получить доступ к камере и галерее с помощью загрузки файлов

Нет возможности принудительно заставить камеру использовать захват = «видеокамера». Однако мы можем указать, хотим ли мы захватывать только изображения или видео, используя атрибут accept .

<input type=file accept="video/*">
<input type=file accept="image/*">

Нет поддержки для других типов файлов , таких как аудио, документы Pages или PDF. Там нет никакой поддержки GetUserMedia для потоковой камеры.

Что вы можете сделать с изображением или видео после выбора?

• Отправьте его с помощью составного действия формы POST (старомодный механизм загрузки)
• Используйте XMLHttpRequest 2, чтобы загрузить его с помощью AJAX (даже с поддержкой прогресса)
• Используйте Файловый API, который доступен на iOS 6, который позволяет JavaScript напрямую читать байты и манипулировать стороной файлового клиента. Есть хороший пример этого API в действии на HTML5Rocks .

API веб-аудио

Разработчики HTML5-игр должны быть счастливы! Web Audio API появляется в мобильном браузере впервые. Этот API позволяет нам обрабатывать и синтезировать аудио на JavaScript. Если вы никогда не играли с низким уровнем звука, API может показаться немного странным, но через некоторое время это не так сложно понять. Опять же, HTML5Rocks имеет отличную статью, чтобы начать с аудио API

Больше информации и новостей об API на  http://www.html5audio.org

Smart App Баннеры

Сайт или родное приложение? Если у нас есть и то и другое, теперь мы можем объединить усилия и связать наш сайт с нашим родным приложением . С помощью Smart App Banners Safari может показывать баннер, если на текущем веб-сайте есть соответствующее нативное приложение. На баннере будет отображаться кнопка «УСТАНОВИТЬ», если у пользователя не установлено приложение, или кнопка «ПРОСМОТР», чтобы открыть его, если оно установлено. Мы также можем отправлять аргументы из Интернета в собственное приложение. Дело в том, чтобы открыть нативное приложение на том же контенте, который пользователь видел на веб-сайте.

Чтобы определить Smart App Banner, нам нужно создать метатег с именем = ”apple-itunes-app” . Сначала нам нужно пойти и найти приложение, которое есть в iTunes Link Maker, и взять идентификатор приложения оттуда.

<meta name="apple-itunes-app" content="app-id=9999999">

<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx">
<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx, affiliate-data=partnerId=99&siteID=XXXX">

Баннер занимает 156 пикселей (312 на устройствах с высоким разрешением) в верхней части до тех пор, пока пользователь не нажмет на нижней части или на кнопке закрытия, и ваш сайт получит полную высоту для вас. Он действует как объект DOM в верхней части вашего HTML, но на самом деле он не в DOM. На iPad — и больше на ландшафте — кажется, немного напрасно.

 

При использовании Smart App Banners браузер автоматически приглашает пользователя установить или открыть собственное приложение.

В течение нескольких секунд на баннерах отображается анимация «загрузки», пока система проверяет, подходит ли предлагаемое приложение для устройства текущего пользователя и магазина приложений. Если он недействителен, баннер скрывается автоматически; например, это приложение только для iPad, и вы просматриваете его с iPhone, или приложение доступно только в немецком магазине приложений, а ваша учетная запись находится в США.

Фильтры CSS 3

CSS 3 Фильтрует  набор операций с изображениями (фильтров), которые мы можем применить с помощью функций CSS, таких как оттенки серого, размытие, тени, яркость и другие эффекты. Эти функции будут применены до отображения содержимого на экране. Мы можем использовать несколько фильтров, используя пробелы (аналогично преобразованиям).

Вы можете попробовать хорошее демо здесь . Быстрый пример того, как это выглядит:

-webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg);

CSS 3 Cross-Fade

iOS 6 начинает поддерживать некоторые из нового    стандарта CSS Image Values , включая функцию кроссфейдера . С помощью этой функции мы можем применить два изображения к одному и тому же месту с различными уровнями непрозрачности, и это может даже часть перехода или анимации.

Быстрый пример:

background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);

Полный экран в Safari

Помимо мета-тега без хромированного домашнего экрана, теперь iPhone и iPod Touch (не iPad) поддерживают полноэкранный режим в альбомной ориентации. Это идеально подходит для погружений, таких как игры или мультимедийные приложения. Нет возможности принудительно включить полноэкранный режим, и он должен быть запущен пользователем (последний значок на панели инструментов). Однако мы можем предложить пользователю сначала перейти в альбомную ориентацию и нажать на полноэкранный значок, чтобы активировать наше приложение. Если мы смешаем это с некоторой обработкой событий касания, мы можем скрыть строку URL и предоставить хороший интерфейс, пока пользователь не выйдет из полноэкранного режима.

Полноэкранная навигация на iPhone и iPod Touch

Внизу вы всегда найдете две или три кнопки наложения, о которых должен знать ваш дизайн: это кнопка «Назад», дополнительная кнопка «вперед» и полноэкранный режим отмены.

Вы можете использовать событие onresize, чтобы определить, переключается ли пользователь на полноэкранный режим в альбомной ориентации .

API синхронизации анимации

Разработчики игр, опять же, вам повезло. iOS 6 поддерживает Animation Timing API , также известный как requestAnimationFrame, новый способ управления анимацией на основе JavaScript. Это префикс webkit, и для хорошей демонстрации и более подробного объяснения проверьте этот пост от Paul Irish .

Набор изображений CSS

Это еще не входит ни в одну стандартную группу. Это новая функция изображения, называемая
image-set, принимающая группу или изображения с условиями, которые необходимо применить. Единственными совместимыми условиями сейчас являются 1x и 2x для устройств с низкой плотностью и устройств с высокой плотностью. Благодаря этой новой функции нам не нужно использовать медиа-запросы для определения разных изображений для разных разрешений. Рабочий синтаксис:

-webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x) 

Он работает на CSS, например background-image . Я не мог заставить его работать на стороне HTML, для атрибута src элемента img или нового предложенного элемента изображения . Благодаря этому новому синтаксису мы можем получить более четкое определение изображения с несколькими разрешениями, поскольку нам не нужно использовать медиазапросы и значения размера фона .

Passbook купоны и пропуски с доставкой

Passbook — это новое приложение в iOS, которое работает как виртуальный контейнер для всех ваших пропусков, билетов, купонов на скидку, карт лояльности и подарочных карт. Как веб-разработчик, вы можете предложить пользователю купон на скидку, билет на событие, электронный билет на следующий рейс или карту лояльности.

Apple позволяет веб-сайтам доставлять такие пропуски с веб-сайта без необходимости использования собственного приложения .

Для доставки пропуска на ваш сайт вам просто нужно использовать MIME-тип  application / vnd.apple.pkpass или отправить его по электронной почте.

Apple предоставляет инструмент, который вы можете установить на своем сервере, чтобы упаковать и подписать индивидуальные пропуска на лету, которые могут включать текущую информацию пользователя

Для передачи файла это просто файл метаданных JSON и пара изображений. Нам нужно упаковать файл и подписать его. К сожалению, для подписи пропуска нам нужна подпись от Apple, а это означает, что веб-разработчику нужна учетная запись в iOS Developer Program ($ 99 / год). Если вы получили пропуск, уже подписанный, вы можете просто вставить его на свой сайт.

Одной из замечательных особенностей пропусков является то, что после установки вы можете предоставлять некоторые веб-сервисы на своем конце, а через службы push-уведомлений операционная система будет вызывать ваши веб-сервисы для обновления информации о пропусках.

Больше информации на  developer.apple.com/passbook

API хранилища и обновления веб-приложений

Нет, нет нового доступного API хранилища. Для IndexedDB пока нет поддержки. Однако есть некоторые изменения, которые вы должны принять во внимание:

• Лимит кэша приложений увеличен до 25 МБ .
• Веб-приложения без Chrome (использующие метатег apple-mobile-web-app ) теперь имеют собственную изолированную программную среду хранения . Это означает, что даже если они обслуживаются из одного домена, веб-приложение на главном экране будет иметь собственное постоянное локальное хранилище и хранилище SQL. Даже если вы установите значок много раз, у каждого значка будет своя песочница. Хотя это хорошая новость для приложений, в некоторых приложениях это также может быть проблемой, если вы передаете информацию с веб-сайта виджетам главного экрана через хранилище.
  Кредиты для этого открытия Джорджу Хенне на своем посту .
• Существует новый недокументированный метатег, который можно использовать на любом веб-сайте (с мета-тэгом  apple-mobile-web-app-способны  или нет), который позволяет нам определять другое название для значка главного экрана . Как вы, возможно, знаете, по умолчанию Safari берет заголовок документа и обрезает его до 13 символов. Теперь мы можем определить альтернативный заголовок для главного экрана, используя:

<meta name="apple-mobile-web-app-title" content="My App Name">

Я также обнаружил метатег, называемый apple-mobile-web-app-ориентации, принимающий возможные значения  портрета , портрета вверх ногами , ландшафта вправо , ландшафта влево , портрета-любого . К сожалению, я не мог заставить это работать. Если вам повезет, не стесняйтесь комментировать здесь.

Веб-просмотр обновлений

On Web View (pseudobrowsers, PhoneGap/Cordova apps, embedded browsers) JavaScript now runs 3.3x slower (or let’s say that Nitro engine on Safari and Web apps is 3.3x faster). Be careful about the 3.3x, that is just the different of running SunSpider on the same device, on Web View and Safari. However, SunSpider is not covering all possible kind of apps and your total rendering time is not just JavaScript, so this doesn’t mean that your app runs 3.3x slower.

We can find some other good news:

• Remote Web Inspector for webapp debugging
• A new supressesIncrementalRendering Boolean attribute that can eliminate the partial rendering mechanism. I believe this feature is useful to reduce the perception of loading a web page instead of being an app.
• A new WebKitStoreWebDataForBackup info.plist Boolean feature where we can define that we want localStorage and Web SQL databases to be stored in a place to be backed up, such as in iCloud. This problem has appeared in iOS 5.01, now it’s solved
• Changes in the developer agreement: it seems that the restriction of using only the native WebView to parse HTML and JS has gone. It will be good if someone from Apple can confirm this. The only mention to the internal WebKit engine is that it’s the only engine capable of downloading and execute new code, while in the same app expected behavior; that’s the anti-Chrome statement. You can use your own engine but only if you are not downloading the code from the web. This may be opening a door… such as delivering our own engine, for example, with WebGL support.

Remote Debugging

I’m keeping this topic at the end. Because it’s a huge change for web developers. For the first time, Safari on iOS includes an official Remote Web Inspector. Therefore tools, such as iWebInspector or Weinre will become obsolete since this version. The Remote Debugger works with the Simulator and with real devices via USB connection only.

To start a remote inspection session you need to use Safari 6 for desktop. Here comes the bad news: you can only debug your webapp on a Mac desktop computer. It was a silent change, but Safari for Windows is not available anymore, so it’s stuck in 5.x. Therefore, only with a Mac OS computer you can make web debugging session on your iOS devices (at least officially for now).

For security reasons, you need to first enable the Web Inspector from Settings > Safari > Advanced. The new Inspector means that the old JavaScript console is not available anymore.

You can start a debugging session with:

• A safari window on your iOS device or simulator
• A chrome-less webapp installed on your iOS device or simulator
• A native app using a Web View, such as Apache Cordova/PhoneGap apps.

When talking about native apps, you can only inspect apps that were installed in the device by Xcode (your own apps). Therefore, there is no way to inspect Google Chrome on iOS websites for example.

If you are used to the Webkit Inspector -Safari 5 or Chrome-, you are going to see a completely redesign version of the inspector in Safari 6 based on Xcode native development UI. You will be lost for a while understanding the new UI. With the inspector session, you can:

• See and make live changes on your HTML and CSS
• Access your storages: cookies, local storage, session storage and SQL databases
• Profile your webapp, including performance reports for Network requests, Layout & Rendering and JavaScript and events. This is a big step in terms of performance tools.
• Search on your DOM
• See all the warning and errors in one place
• Manage your workers (threads)
• Manage JavaScript breakpoints, and define Uncaught exception breakpoint.
• Access the console and execute JavaScript
• Debug your JavaScript code
• Touch to inspect: There is a little hand icon inside the inspector that allows you to touch on your device and find that DOM element on the inspector.

Well done Apple, we were waiting for this on iOS for long time. Apache Cordova users should be also happy with this feature.

Other smaller updates

• Apple claims to have a faster JavaScript engine. And it seems to be true. On the SunSpider test I’m receiving 20% improvement on JavaScript performance on the same device with iOS 5.1 and iOS 6.
•  Google Maps is not available anymore on iOS 6; Now http://maps.google.com redirects to the Google Maps website and not the native app. there fore there is a new URL scheme, maps, that will open the native new Maps applications. The syntax is maps:?q=<query> and query can be just a search or latitud and longitude separated by comma. To initiate a route navigation, the parameters are: maps:?saddr=<source>&daddr=<destination>.
•  XHR2: Now the XMLHttpRequestProgressEvent is supported
• The autocomplete attribute of the input is officially in the DOM
• Mutation Observers from DOM4 are now implemented. You can catch a change in the DOM using the WebKitMutationObserver constructor
• Safari no longer always creates hardware-accelerated layers for elements with the -webkit-transform: preserve-3d option. We should stop using it for performance techniques.
• Selection API through window.selection
• <keygen> element
• Canvas update: Now the createImageData has one parameter and now there are two new functions that the name suggest to be prepared to provide High Resolution images webkitGetImageDataHD and webkitPutImageDataHD.
• Updates to SVG processor and event constructors
• New CSS viewport related measures: vh (viewport height) vw (viewport width) and vmin (minimum between vw and vh)
• CSS3 Exclusions and CSS Regions were available on beta 1 but they were removed from the final version. It’s a shame although they were too new and not mature enough.
• iCloud tabs. You can synchronize your tabs between all your devices, including Macs, iPhones and iPads. So the same URL will be distributed through all devices. Be careful on your mobile web architecture!

What we are still waiting for

There are a couple of things that we still need to wait for a next version, such as:

• IndexedDB
• FileSystem API
• Performance Timing API
• WebRTC and getUserMedia
• WebGL -still there and still disabled-
• Orientation Lock API for gaming/inmersive apps
• Integration with Facebook and Twitter Accounts native APIs, so we can use current OS user’s credentials automatically instead of forcing the user to log in again.

Final Thoughts

Safari on iOS 6 is a big step for HTML5 developers; debugging tools, new APIs, better JavaScript performance. However, I must say that Apple is still forgetting about documentation updates and properly communication with web developers. There are almost no answers on the discussion forum, no updates on the Safari documentation (some docs are really too old right now).

I believe Apple must do a better job supporting web developers. 

Did you find any other new stuff? other problem or bug? Anything else you were waiting for? Feel free to comment in the section below or contact me by twitter.