Обзор Mobile Safari iOS 6 для веб-разработчиков

Уже было сказано довольно много ^[1] слов ^[2] про новую версию iOS и её бета-релиз. Однако, за кадром остались новые интересные возможности мобильной версии Safari о которых просто нельзя не рассказать. Но обо всём по порядку.

Данная статья изначально планировалась как перевод, но подготовленного материала хватило на самостоятельную статью. Для тестирования возможностей использовались iOS 6 beta 1 и Safari 6 developer preview for Mac. И то и другое доступно для скачивания для зарегистрированных разработчиков Apple.

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

Чем же порадует нас новый Safari в iOS 6 ?

Загрузка файлов

Да, мы долго этого ждали и наконец свершилось. Safari получил возможность загружать фото и видео из фото-библиотеки устройства (или же использовать запись с камеры) напрямую через веб-форму. Уверен это даст огромный толчок для развития веб-приложений на iOS.

Web Audio API

Безусловно вкусно. Особенно для тех людей, кто занимается написанием игр под мобильный браузер iOS (у вас был такой опыт?). Но порадовать я вас пока не могу, даже если Web Audio API и поддерживается новым Safari, то в крайне урезанной форме, так как ни одна из демок которые я тестировал не заработала. Будем надеяться, что к релизу iOS 6 его реализация подтянется до уровня настольного Safari.

CSS фильтры

Для тех кто не в теме, почитать можно например тут ^[3]. Фильтры действительно работают, но для их использования нужен префикс -webkit-.
Тестировалось тут ^[4]. Ручное задание параметров почему-то лагает. А вот анимация выглядит очень плавной.

Crossfade CSS Функция

CSS-функция получающая три параметра. Первые два — это картинки (или градиенты), а третий параметр (проценты) указывает на сколько вторая картинка перекрывает первую. Если третий параметр стоит в ноль — то мы видим только первое изображение, если в 100%, то — только второе. В остальных случаях мы наблюдаем некий промежуточный вариант. Подробнее про эту функцию можно прочитать тут ^[5]. А вот тестовая страница ^[6].
Для использования функции необходим префикс -webkit-.

Smart App Banners

Про этот функционал пока известно очень мало. Протестировать его не удалось по причине отсутствия документации. В теории он должен позволять проверять наличие установленного приложения по его ID а также уметь открывать это приложение с определенными параметрами.

Полноэкранный ландшафтный режим

Как многие уже наверное знают в iOS6 iPhone и iPod Touch получили полноэкранный режим в браузере при горизонтальном расположении устройства. Нам, разработчикам, это принесло некоторую головную боль, так как если вы используете какие-то активные элементы прикрепленные к нижней части страницы, то пользователю возможно будет тяжело с ними взаимодействовать, так как они перекрываются кнопками навигации браузера с левой стороны, и кнопкой переключения режима с правой. Вот как это примерно выглядит.

Не знаю есть ли специальное API для отлавливания перехода в этот режим и обратно. На данный момент можно использовать слушатель на событие «resize» и свойство innerHeight.

Скорость

Наверное никого не удивит, если я скажу, что Javascript в iOS6 стал работать быстрее. К сожалению у меня нет сейчас возможности сделать тесты на одинаковых устройствах, поэтому просто приведу результаты тестирования, которое выложили на iphonehacks.com

Увеличение объема App Cache с 5 до 25 мегабайт

Очень интересно, но подтвердить это не получилось. Насколько мне известно App Cache и Web Storage используют одно и то же зарезервированное пространство. И если App Cache мне протестировать пока не удалось, то с Web Storage ничего не изменилось, всё те же 2551к символов (5 мегабайт), как и на iOS5.

Remote Web inspector

Вы угадали, самое вкусное я оставил напоследок. Это самая настоящая удаленная отладка веб-приложения… и она… работает! Для этого вам нужно на iOS-устройстве открыть Safari и подключить устройство проводом к компьютеру, на котором нужно тоже запустить Safari. (Напомню что для этого можно использовать только Safari 6, он пока есть только для Mac) Далее заходим в меню «Разработка».

Выбираем нужную нам страницу и видим окно Web Inspector'а. Да, оно «слегка» изменилось с пятой версии.

Выделяем объект в DOM и смотрим на устройство (в данном случае iPad) и наблюдаем знакомую картинку. Web inspector работает!

Как выяснилось, методы console ничего в удаленную консоль не выводят (как показано на рисунке с web inspector'ом). Впрочем, это единственное, что у меня не заработало. В остальном консоль и остальной интерфейс ведут себя предсказуемо, что не может не радовать.

Для PhoneGap обёртки и т.п. такой метод отладки не сработает. Используем старый добрый iWebInspector ^[7].

В заключение

Что ж, не все заявленные функции оказались полностью рабочими. На то она и beta. Ждем обновлений.

Про все нововведения рассказать не удалось из-за ограничений накладываемых NDA. Но подробнее можно почитать на форуме разработчиков в этом топике ^[8]. После финального релиза iOS 6 можете ожидать более подробный обзор. Особенно интересной темой обещает быть более глубокая поддержка Retina в веб-приложениях.

На этом всё, удачного вам debugging'а!

Ссылки:
Safari 6 developer preview ^[9]
iOS 6 beta ^[10]
нужно быть залогиненным в свой аккаунт разработчика!

Автор: Tenphi