Огляд Mobile Safari iOS 6 для веб-розробників
Вже було сказано досить багато слів про нову версію iOS та її бета-реліз. Однак, за кадром залишилися нові цікаві можливості мобільної версії Safari, про які просто не можна не розповісти. Але про все по порядку.
Чим же порадує нас новий Safari в iOS 6?
Завантаження файлів
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'а. Так, воно "злегка" змінилося з п'ятої версії.
Як з'ясувалося, методи console нічого у віддаленій консолі не виводять (як показано на малюнку з web inspector'ом). Втім, це єдине, що я не заробила. В іншому консоль та інший інтерфейс поводяться передбачувано, що не може не тішити. (АПДЕЙТ: працює виведення в консоль та виведення помилок, потрібно перезавантажити сторінку після підключення)
Для PhoneGap обгортки тощо. такий метод налагодження не спрацює. Використовуємо старий добрий iWebInspector. (АПДЕЙТ: працює і з PhoneGap)
На закінчення
Що ж, не всі заявлені функції виявилися повністю робітниками. На це вона і beta. Чекаємо на оновлення.
Про всі нововведення розповісти не вдалося через обмеження NDA, що накладаються. Але докладніше можна почитати на форумі розробників у цьому топіці. Після фінального релізу iOS 6 можете очікувати докладніший огляд. Особливо цікавою темою обіцяє бути глибша підтримка Retina у веб-додатках.
На цьому все, вдалого вам debugging'а!
А у нас тут можна отримати грант на тестовий період Яндекс.Хмари. Варто лише у полі «секретний пароль» запровадити «Хабр»