Уже было сказано довольно много слов про новую версию 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 фильтры
Для тех кто не в теме, почитать можно например тут. Фильтры действительно работают, но для их использования нужен префикс -webkit-.
Тестировалось тут. Ручное задание параметров почему-то лагает. А вот анимация выглядит очень плавной.
Crossfade CSS Функция
CSS-функция получающая три параметра. Первые два — это картинки (или градиенты), а третий параметр (проценты) указывает на сколько вторая картинка перекрывает первую. Если третий параметр стоит в ноль — то мы видим только первое изображение, если в 100%, то — только второе. В остальных случаях мы наблюдаем некий промежуточный вариант. Подробнее про эту функцию можно прочитать тут. А вот тестовая страница.
Для использования функции необходим префикс -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. (АПДЕЙТ: работает и с PhoneGap)
В заключение
Что ж, не все заявленные функции оказались полностью рабочими. На то она и beta. Ждем обновлений.
Про все нововведения рассказать не удалось из-за ограничений накладываемых NDA. Но подробнее можно почитать на форуме разработчиков в этом топике. После финального релиза iOS 6 можете ожидать более подробный обзор. Особенно интересной темой обещает быть более глубокая поддержка Retina в веб-приложениях.
На этом всё, удачного вам debugging'а!
Ссылки:
Safari 6 developer preview
iOS 6 beta
нужно быть залогиненным в свой аккаунт разработчика!
