Safari на IOS 7 и HTML5 : проблемы, изменения и новые API

На днях Apple выпустили новую IOS7, а через несколько дней выпустили iPhone 5S и iPhone 5C. Как и ожидалось, компания опубликовала только 10% необходимой информации для веб-разработчиков, но мы можем уже с уверенностью сказать, что еще не было такой версии Safari с таким количеством багов как эта. В посте пойдет речь о новых API, возможностях и основных проблемах, с которыми вам придется столкнуться уже сейчас, если у вас есть веб-сайт или если вы разрабатываете веб-приложения.

В двух словах:
• Изменения пользовательского интерфейса: закрашивание панели инструментов (TOOLBAR TINT), проблемы с новой навигацией в режиме fullscreen, новые размеры «home screen», больше нельзя использовать <title;> на iPhone, возможные конфликты с новыми функциями жестов.
• HTML5 markup: видео, <progress;>, убрали поддержку для input type=datetime
• HTML5 API: видимость страницы, AirPlay API, расширение канваса, убрали поддержку для Shared Workers, Web API синтеза речи, безпрефиксные Web Audio и Animation Timing, Mutation Observer и другие незначительные изменения. Серьезные проблемы с WebSQL.
• CSS: Регионы, Sticky position, Flexbox, ClipPath, безпрефиксный Transitions, и другие дополнения.
• Home Screen webapps: несколько серьезных проблем (например, отсутствие поддержки alert)
• Native webapps: Web View Pagination, JavaScript runtime для нативных приложений и новые возможности проигрывания видео.
Новый браузер
Safari получил крупнейший апдейт пользовательского интерфейса с времен версии 1.0. Эти изменения коснулись того, как пользователь взаимодействует с веб-сайтом и веб-приложением.

TOOLBAR TINT
Safari теперь будет закрашивать toolbar (бар URL и нижюю панель инструментов на iPhone) по принципу:
а) цвет фона при загрузке страницы.
б) текущий основной цвет во время прокрутки.
Если вы хотите «хакнуть» эту функцию и поставить свой фон для тела без добавления шума к HTML (например, новых контейнеров), просто используйте следующий хак:
body {
background-color: blue; /* for the tint */
background-image: linear-gradient(to bottom, green 0%, green 100%); /* for the body */
}

Этим хаком мы определяем как background color, так и image;
В следующих примерах можно увидеть первые два образца с одинаковым цветом (только фон) и последний пример с разным цветом фона и тела.

FULL SCREEN и большие проблемы для разработчиков HTML5 приложений.
На iPhone и IPod Touch просмотр веб-страниц теперь всегда будет в полноэкранном режиме. Когда пользователь будет прокручивать страницу в режиме портретной ориентации, нижняя панель инструментов будет исчезать, а адресная строка превращаться в небольшую полупрозрачную панель в верхней части экрана. В режиме пейзажной ориентации, когда пользователь будет выполнять прокрутку страницы, нижняя панель инструментов и хост домен бар исчезнут.
Панели инструментов и URL бар будут появляться снова когда:
1) пользователь нажмет на хост домена в верхней части экрана
2) пользователь начнет пролистывать страницу вверх к началу.
На следующих скринах показано, как изменился пользовательский интерфейс до и после прокрутки в пейзажном и портретном режиме:

Текущие проблемы:
• Больше не происходит событие resize, когда панель инструментов появляется/исчезает.
• Мы не можем обнаружить изменения JavaScript или медиа запросов.
•Старый хак использования window.scrollTo что бы скрыть адресную строку больше не работает, поэтому нет никакого способа скрыть строку URL или панель инструментов без “вмешательства” пользователя прокруткой страницы.
• Если вы не будете использовать обычный scroll, то у вас будут большие проблемы (подробности см. ниже).
• Нижняя часть канваса больше не является интерактивной (подробности см. ниже)

Если вы используете «неестественный» scrolling layout, такой как iframe, секции с overflow:scroll: механизм прокрутки на основе JavaScript, то панель инструментов никогда не будет скрываться. Ситуация еще проблематичнее чем кажется: если каким-то образом пользователь получает доступ к полноэкранному режиму, он больше не сможет вернуться в нормальный режим. Вот к примеру, сайт Twitter (с использованием overflow: scroll) на ландшафтном режиме ориентации, где область прокрутки составляет менее 50 % экрана и панель инструментов никогда не пропадает.

Честно говоря, если вы перейдете в портретный режим, а затем снова в пейзажный, то может быть выйдет оставаться в режиме фулл-скрин без скролинга, но вы не сможете выйти из него. В общем нужно потестить это, чтобы получить представление о проблеме.
В то же время возможность вернуть страницу назад для того, что бы восстановить панель инструментов, все услажняет для HTML5 игр. Когда Apple презентовали свою Beta 1, на их форуме многие люди начали жаловаться на эту проблему:
• Ричард Дэви:
«На самом деле это серьезная проблема для нас. Она испортила отображение всех наших игр на сайте BBC (попробуйте что-нибудь на www.bbc.co.uk/cbeebies/ например). Удалив кнопку перехода на полный экран и устранив возможность „хака“, они не оставили нам ни единой возможности сделать наши игры в полноэкранном режиме. Таким образом, игры теперь показываются в крошечном окошке в середине браузера на iPhone. Когда вы находитесь в ландшафтном режиме, только 2/3 экрана доступны для просмотра. А область управления составляет 1/3 части экрана.
• TheFlashGuy:
«Нам нужно больше контролировать событие появления/исчезновения панелей браузера в ландшафтном режиме. Вариант прикосновения к верхней или нижней части экрана будет нарушать работу многих веб-сайтов и веб-приложений, основные элементы интерфейса NAV, как правило, находятся в верхней или нижней части области содержимого»

Нижняя панель инструментов и интерактивные элементы.
В полноэкранном режиме, нижняя часть страницы перестает быть интерактивной. Эта касается любой панели инструментов, ссылки или элемента, который находится в нижней части окна в полноэкранном режиме (после scroll’а).
TITLE
Следующим большим изменением в пользовательском интерфейсе Safari для iPhone является область заголовка. Заголовок страницы на iPhone был заменен текущим хостом. Это можно увидеть на следующих изображениях. Заголовок страницы доступен только при просмотре вкладки на iPhone.

На Ipad нет полноэкранного режима, так что панель инструментов и строка заголовка всегда являются видимыми.

Что нового для домашней страницы.

Весь пользовательский интерфейс изменился, в том числе изменили вид иконки “поделиться”, так что каждый веб-сайт, который предлагает добавить его в закладки должен обновить свой значок.

Жесты
Операционная система Safari предлагает нам новые жесты, которые могут повлиять на работу вашего веб-сайта
А) Центр управления: он появляется, когда вы проводите пальцем вверх от нижней части экрана.
B) История Жестов: второй и, вероятно, более проблематичный жест это свайп вправо и влево от границ экрана; При этих жестах Safari будет совершать действие “шаг вперед и назад” в истории посещения страниц, а ля Internet Explorer на Windows 8.

Этот жест также конфликтует с некоторыми фреймоворками пользовательского интерфейса, с такими как jQuery Mobile или Sencha Touch. Конфликт происходит следующим образом: если пользователь делает жест “вернуться назад”, то будут рендериться сразу две анимации (сначала браузером, а потом фремворком). Нет никакого способа убрать эту функцию, так как она интегрирована в ОС и в сам браузер.
Будем надеяться, что эти жесты не работают на homescreen webapps или в UIWebViews(например, в приложених PhoneGap)

Размеры иконок
Новые иконки в OS7.0 на 5% больше чем в предыдущей версии, например, размер иконок на устройствах iPhone Retina составляет 120 × 120 вместо прежних 114 × 114. К тому же системные иконки сейчас стали плоскими, так что, наверное, стоит задуматься над обновлением иконок в соответствии с новым дизайном.
Доступные размеры иконок для IOS7:
• iPhone / iPod Touch retina: 120×120
• iPad non-retina (iPad 2 and iPad mini): 76×76
• iPad retina: 152×152
Если вы хотите, покрыть все возможные иконки для IOS, код будет выглядеть так:
<!-- non-retina iPhone pre iOS 7 -->
<link; rel=«apple-touch-icon» href=«icon57.png» sizes=«57x57»>
<!-- non-retina iPad pre iOS 7 -->
<link; rel=«apple-touch-icon» href=«icon72.png» sizes=«72x72»>
<!-- non-retina iPad iOS 7 -->
<link; rel=«apple-touch-icon» href=«icon76.png» sizes=«76x76»>>
<!-- retina iPhone pre iOS 7 -->
<link; rel=«apple-touch-icon» href=«icon114.png» sizes=«114x114»>
<!-- retina iPhone iOS 7 -->
<link; rel=«apple-touch-icon» href=«icon120.png» sizes=«120x120»>
<!-- retina iPad pre iOS 7 -->
<link; rel=«apple-touch-icon» href=«icon144.png» sizes=«144x144»>
<!-- retina iPad iOS 7 -->
<link; rel=«apple-touch-icon» href=«icon152.png» sizes=«152x152»>


Новые устройства
iPhone 5S и iPhone 5C уже доступны на рынке. Хорошей новостью является то, что с точки зрения веб-разработки, они точно такие же, как и iPhone 5. Тот же размер экрана, та же плотностью пикселей, те же способности. Они могут быть быстрее, но точки зрения кодирования беспокоиться не о чем.
Новая функция ID Touch (сканер отпечатков пальцев) недоступна для веб-приложений и сайтов, и 64-разрядный процессор ничего не изменит с точки зрения JavaScript разработки.

HTML5 MARKUP ПОДДЕРЖКА
PROGRESS AND ЭЛЕМЕНТЫ OUTPUT
Теперь стала доступна поддержка элемента <progress;>. Мы можем создать индикатор прогресса на экране исходя из «max» и «value».
<progress; max=«100» value=«40»>

Теперь поддерживается элемент <output;>, но я не думаю, что вы будете в восторге от этого :)

УДАЛЕНЫ: DATETIME INPUT TYPE
Следуя за Google Chrome, Safari на IOS теперь не поддерживает datetime input type, что означает возврат к текстовому типу ввода, который является устаревшим стандартом.

Если вы используете input type=”datetime”, то реагируйте немедленно, так как теперь он рендерится как текстовой тип ввода.

SEAMLESS IFRAME
Теперь доступен новый булеан атрибут seamless для iframe, он будет создавать на вашем сайте IFRAME без каких либо границ. В IFRAME не будет полос прокрутки
<iframe; seamless src=«mypage.html»></iframe>
HTML5 JAVASCRIPT API
Начнем с плохих новостей: отсутвует поддержка WebGL, FullScreen, WebRTC, getUserMedia и IndexedDB.
Что касается новых доступных API:
• Page Visibility API
• XHR 2.0
• Video tracks API
• AirPlay API
• CSS Regions API
• расширение Canvas
• Убрали поддержку для Shared Workers
• WebSpeech Synthesis API

Page Visibility -webkit-prefixed API определяет, когда наш таб переходит с переднего плана на задний. Вот наглядное демо как это работает.
XMLHttpRequest 2.0 теперь имеет полную совместимость. Это означает, что теперь мы можем запросить ‘blob’ в качестве респонса.
CSS Regions API является частью спецификации CSS Regions. И по сути это префиксная функция webkitGetFlowByName, доступная для любого элемента DOM.
Что каксается Canvas 2D Drawing API: теперь стал доступен атрибут globalCompositeOperation, который позволяет определить режим наложения (например, умножение) при наложении слоев. Так же стал доступен новый Path конструктор.

AIRPLAY API
AirPlay API требует некоторых пояснений. AirPlay является решением для беспроводной потоковой передачи контента между различными устройствами, к примеру Apple TV.
API позволяет настроить плеер и получать информацию о потоке на AirPlay. Каждому видео можно задать событие eventswebkitplaybacktargetavailabilitychanged и webkitcurrentplaybacktargetiswirelesschanged.
Первое событие будет срабатывать, когда будет появляться или исчезать новая цель для AirPlay, например Apple TV, а второе,- когда состояние воспроизведения на одну цель изменилось.
Пока нет никакой официальной документации про этот API, но, как вариант, можно посмотреть видео What’s New in Safari and WebKit for Web Developers’ на WWDC, где эта тема освещалась.
BACKGROUND EXECUTION
Вот что может происходить в разных вариантах перехода в фоновый режим:
• Если пользователь переходит на другую вкладку (экран выбора вкладки), код по-прежнему выполняется, но изображение в этом случае остается замороженым.
• Если пользователь меняет приложения (многозадачный режим), ваш код по-прежнему выполняется, а изображения будут обновляться.
• Если Safari в активном режиме, но ваш сайт находится в фоновой вкладке, то код неактивен и Safari имеет снэпшот вашего последнего выполненого задания.
• Если Safari находится в фоновом режиме, то код заморожен.

WEBSPEECH SYNTHESIS API
WebSpeech API позволяет веб-сайту раписывать и расшифровывать аудио, а также синтезировать речь.
У Safari на IOS7 есть Synthesis API (перевод текста в речь), но нет API для прослушивания звука с микрофона. Вы можете сделать запросы на разных языках с помощью speechSynthesis.getVoices().
Вот что нужно, что бы написать JavaScript для раговорчиков на вашем сайте:
speechSynthesis.speak(new SpeechSynthesisUtterance(«Hello, this is my voice on a webpage»));
var speech = new SpeechSynthesisUtterance();
speech.text = «Hello»;
speech.volume = 1; // 0 to 1
speech.rate = 1; // 0.1 to 9
speech.pitch = 1; // 0 to 2, 1=normal
speech.lang = «en-US»;
speechSynthesis.speak(speech);


При помощи SpeechSynthesisUtterance возможно также связываеться с некоторыми событиями, такими как start и end, но, пожалуй, не стоит использовать alert внутри этих событий потому что Safari может зависнуть (и даже не спрашивайте почему).
Важно иметь в виду, что Speech Synthesis API работает только после явных действий пользователя, например, нажатие на кнопку и т.д., так что вы не сможете инициализировать речь при OnLoad или на time-base.

ДРУГИЕ ИЗМЕНЕНИЯ
• MutationObserver
• Unprefixed Animation Timing API (requestAnimationFrame)
• Unprefixed transitionend event name
• Unprefixed URL
• Unprefixed WebAudio API с новыми дополнительными свойствами
• Новые свойства DOM: hidden и visibilityState
• Поддержка window.doNotTrack

Поддержка CSS:
• Sticky Position
• CSS Regions
• CSS Grid Layout (не работает)
• CSS FlexBox
• Динамические типы шрифтов

Sticky Position
Sticky Position — это новая экспериментальная фича, которая позволяет нам зафиксировать элемент к viewport, но только тогда, когда он не находится в зоне видимости (как правило, после действия прокрутки ). Если у вас более чем один sticky element, то они будут накапливаться все в той же области создавая красивый эффект при прокрутке, похожий на UITableView.
h1 { position: -webkit-sticky; top: 10px; }
Вы можете посмотреть как это работает здесь

CSS REGIONS
С помощью спецификаций CSS REGIONS, которые нам предлагают ребята из Adobe, мы можем создать конструкции контента, которые будут напоминать журнал. Беря во внимание характеристики экранов устройств, оптимальнее всего использовать этот новый механизм для Ipad.

CSS Grid Layout
CSS Grid Layout – это новая спецификация от W3C (которую предложили в Microsoft и которая уже доступна в IE10 ). Все новые свойства CSS (-webkit-grid-X) уже доступны, но я так и не смог их включить при помощи дисплея.

DYNAMIC FONTS
Динамические шрифты представляют собой новый тип шрифта в IOS7, который регулирует вес, интервал и заглавные буквы на основе текущего размера шрифта для улучшения разборчивости.

Другие улучшения CSS
Плохие новости для media запросов, так как атрибут resolution до сих пор не поддерживается.
Хотя появилась возможность запросов по min-color-index и max-color-index, что, по сути, является бесполезным(:
Вот еще некоторые незначительные обновления, в том числе:
• Unprefixed CSS Transitions (и событие transitionend).
• CSS Clip Path (позволяет обрезать контент на основе форм круга, прямоугольника и многоугольника)
• Кернинг и лигатура на шрифтах включены по умолчанию
• Свойства фона получили большую совместимость с различными значениями
• box-decoration-break: slice/clone
• Стиль tab-size
• переполнение: normal/hypernate/break-word
• Поддержка едениц ch и vmax
• mask-type: alpha
HOME-SCREEN WEBAPPS
Плохие новости для тех, кто использует WebApps Home Screen: уж слишком много багов в этой версии.
Единственной хорошей новостью является то, что теперь нет никаких ограничений для хранения WebSQL в режиме fullscreen, и больше не нужны разрешения пользователя.
Вот какие сейчас проблемы на home-screen webapps:
• стандартные диалоги совсем не работают (такие как alert, confirm и prompt)
• Webapp не может открыть внешний URI. Любой URI просто игнорируются.
• Если вы установили более 4 приложений, то home-screen начинает делать странные вещи, например менять одно веб-приложение на другое. Вы начнете видеть клонов одного и того же веб-приложения. То же самое происходит, когда вы одновременно открываете разные WebApps.
• При работе в режиме портретной ориентации, при вводе текста или когда выбор даты находится в фокусе, медиа запросы будут соблюдать «orientation: landscape» и будет срабатывать событие resize. Такое поведение (баг?) можно встретить на home screen webapps и Web View, но не на Safari.
• Если вы используете Application Cache, а также управляете состоянием при помощи хэша, history object не будет сохранять вашу историю навигации, и history.back() не будет срабатывать, а history.length всегда будет равен 1.
• При установке иконки на home screen (для аутентификации, например), cookies не передаются между вашим сайтом и веб-приложением. Это работало вплоть до версии 6.1, а теперь совсем не работает.

STATUS BAR
Если вы не используете apple-mobile-web-app-status-bar-style meta tag, или если его значение стоит как default, то строка состояния будет в режиме “черный текст на черном фоне”, это означает, что вы будете видеть… просто черную область на экране (на некоторых устройствах вы увидите только значек батареи). Пользователь не будет видеть часы и остальные иконки в строке состояния.
Если вы определите apple-mobile-web-app-status-bar-style как black-translucent,
то основа статус-бара уже будет не черная, а просто полностью прозрачная, текст же при этом, кажется, всегда будет белым.

LAUNCH IMAGE AND MULTITASKING
По поводу новой системы multitask: при работе в home screen webapp, система использует для превью просто изображение белого цвета, а не изображение запуска или текущего состояния. В следующем примере, мы видим белый снэпшот веб-приложение Financial Times.


NATIVE WEBAPP DEVELOPMENT
Новости для тех, кто занимается разработкой гибридных (нативных) веб-приложений, например, приложений Apache Cordova (PhoneGap).
Прежде всего: отсутсвует Nitro engine.
PAGINATE MODE
При работе с UIWebView для насыщенного контента в нативных приложенях или в нативных веб-приложениях (гибридах), теперь мы можем использовать функцию Paginate (что-то вроде принципа электронной книги) без вертикальной прокрутки (а-ля приложения на Windows 8). Эта функция идеально подходит для динамического контента в приложених, который мы не можем предварительно оптимизировать для разбиения на страницы. У нас в распоряжении есть различные опции Objective-C для настройки процесса разбиения на страницы:
myWebView.paginationMode = UIWebPaginationModeLeftToRight;
myWebView.paginationBreakingMode = UIWebPaginationBreakingModePage;
myWebView.gapBetweenPages = 50;

Эта функция будут конвертировать любой документ HTML в web view с разделением страниц (делится по горизонтали).
Другие улучшения
• для нативной разработки теперь необязательно пользоваться Web View, так как IOS SDK теперь включает в себя JavaScript runtime: JavaScript Core framework обеспечен Objective-C wrapper‘ом для стандартных объектов JavaScript. Мы можем использовать этот фрейморк для оценки JavaScript кода, а также работы с JSON
• С новым свойством Web View нам теперь доступен встроенный режим воспроизведения видео HTML5 вместо стандартного полноэкранного режима.
• Теперь мы можем включить автопроигрывание видео в нативном веб-приложении.

REMOTE DEBUGGING
Если у вас есть MacOS и вы привыкли к удаленной отладки с IOS, то вам необходимо обновить Safari до версии 6.1 и ITunes до версии 11.1, чтобы иметь у устройству на IOS 7.0.


Чего еще нет.
Хотя список большой, в этом случае я перечислю фичи, которые были объявлены для Safari 7 для Mac, но которых нет на Safari IOS:
• Web Speech API (API все же есть, но он не работает на IOS)
• Push-уведомления с веб-сайтов. Это было бы прекрасным дополнением к IOS, но, к сожалению, они будут доступны только на Mac OS.
• Background Blend mode
• Grid Layout

источник

0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.