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

В двух словах

Не успели прочитать длинный пост?

• Изменения пользовательского интерфейса : оттенок панели инструментов, проблемы с новой полноэкранной навигацией, новые размеры значков на главном экране; нет <title> на iPhone; возможные конфликты с новыми жестами
• Новые устройства: ничего нового о них для веб-разработчиков; так же, как iPhone 5
• Разметка HTML5 : видео-треки, <progress>, УДАЛЕННАЯ поддержка для типа ввода = datetime
  
• API-интерфейсы HTML5 : видимость страницы, AirPlay API, улучшения холста, поддержка REMOVED для общих работников, API синтеза речи в Интернете, нефиксированные временные рамки для веб-аудио и анимации, Mutation Observer и другие незначительные дополнения. БОЛЬШАЯ ПРОБЛЕМА с использованием WebSQL более 5 Мб
• CSS : регионы, закрепление позиции, FlexBox, ClipPath, переходы без префиксов и другие улучшения
• Веб-приложения для домашнего экрана: НЕСКОЛЬКО ПРОБЛЕМ (например, нет поддержки предупреждений !)
• Собственные веб-приложения : пагинация веб-просмотра, среда выполнения JavaScript для нативных приложений и новые возможности воспроизведения видео

Новый браузер

Safari, как и другие нативные приложения, получил самое большое обновление пользовательского интерфейса и опыта со времени версии 1.0. Эти изменения будут влиять на то, как пользователи взаимодействуют с веб-сайтами и как отреагирует ваше веб-приложение.

Панель инструментов Оттенок

Safari теперь будет подкрашивать панели инструментов (панель URL и нижняя панель инструментов) на основе цвета фона при загрузке страницы и текущего основного цвета за полосами при прокрутке.

Если вы хотите «взломать» исходный оттенок и иметь разные фоновые рисунки для тела и оттенка без добавления шума в HTML (например, новые контейнеры), просто используйте следующий CSS-хак:

body {
background-color: blue; /* for the tint */
background-image: linear-gradient(to bottom, green 0%, green 100%); /* for the body */
}

В этом хаке мы определяем как цвет фона, так и изображение; контент будет использовать изображение, в данном случае это градиент (это также может быть URI данных размером 1 пиксель). В следующих примерах вы можете увидеть первые два образца одного цвета (только фон) и последние примеры с одним оттенком и другим цветом фона для тела.

Полный экран и большие проблемы для приложений и игр на HTML5

Просмотр веб-страниц теперь всегда в полноэкранном режиме на iPhone и iPod touch. Когда пользователь прокручивает страницу в портретной ориентации, нижняя панель инструментов исчезнет, ​​а панель URL преобразуется в небольшую полупрозрачную панель в верхней части. В альбомной ориентации после того, как пользователь прокрутит страницу, нижняя панель инструментов и панель домена хоста исчезнут, оставив ее в полноэкранном режиме.

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

На следующем рисунке показано, как изменяется пользовательский интерфейс до и после прокрутки в альбомной и портретной ориентации:

Проблемы:

• Событие resize больше не запускается, когда панель инструментов появляется / исчезает.
• Мы не можем обнаружить изменения с помощью JavaScript или медиа-запросов.
• Старый способ использования  window.scrollTo  для скрытия панели URL больше не работает; следовательно, невозможно скрыть панель URL или панель инструментов без прокрутки страницы пользователем.
• Если вы не используете естественный свиток, у вас будут проблемы (подробности ниже).
• ОБНОВЛЕНИЕ 19/9: Нижняя часть холста больше не является интерактивной (подробности позже).

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

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

Прокрутка назад для восстановления панелей инструментов усложняет и игры HTML5. Поскольку этот пост начался на Apple Forum, а в бета-версии 1, многие люди жаловались на эту проблему, например:

• Ричард Дейви : «На самом деле это реальная проблема для нас. Это сломало отображение всех наших игр на сайте BBC (попробуйте что-нибудь на  http://www.bbc.co.uk/cbeebies/  например). С удалением полноэкранной кнопки и удалением этого «хака» мы не можем заставить наши игры работать в полноэкранном режиме. Таким образом, они забиты в крошечное окно в середине браузера на iPhone. (…) При входе на страницу в ландшафтном режиме доступны только 2/3 области экрана. Органы управления покрывают всю 1/3 часть экрана «.
• TheFlashGuy : «Нам нужно больше контролировать появление / исчезновение панелей браузера в ландшафтном режиме. Для пользователя слишком легко выйти из этого режима, просто коснувшись верхней или нижней части экрана. Это разрушает множество веб-сайтов и веб-приложений, чьи основные элементы пользовательского интерфейса обычно располагаются в верхней или нижней части области контента ».

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

Ричард Дейви.

Нижние панели инструментов и интерактивные элементы

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

Когда вы нажимаете на эту часть области просмотра, не имеет значения, где вы нажимаете. Это просто запустит действие полного экрана. Поэтому появятся панели инструментов Safari, и вам потребуется снова нажать на интерактивный элемент, чтобы активировать его. Например, два нажатия будут необходимы для активации кнопки. Чтобы проверить это, перейдите сюда , прокрутите и попробуйте нажать на нижнюю панель инструментов.

Например, если вы попробуете нажать «Альбомы» на следующем изображении, он просто откроет панель инструментов Safari, и вам нужно снова нажать «Альбомы», чтобы перейти туда.

заглавие

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

На iPhone с iOS 7 <title> вашей страницы будет игнорироваться, пока пользователь просматривает документ.

На iPad нет полноэкранного режима; панель инструментов и строка заголовка всегда видны.

Кнопка Добавить в Домой

Весь пользовательский интерфейс изменился, включая новые значки, заменяющие  значок «Поделиться»  новым стилем, поэтому каждый веб-сайт, который приглашает пользователя добавить его в закладки или на главный экран, должен обновить значок.

жесты

Операционная система и сам Safari теперь предлагают новые жесты, которые могут повлиять на ваш сайт, в основном, если вы сами обнаруживаете жесты.

A.) Центр управления: появляется, когда вы проводите вверх от нижней части экрана. В этой версии из-за полноэкранного режима нижняя часть экрана может быть частью вашего веб-сайта, а не панели инструментов Safari. Поэтому будьте осторожны, предлагая пользователю провести пальцем вверх от нижней части холста.

B.) Жест истории: Второй, и, вероятно, более проблемный жест — это движение вправо и влево от границ. Они заставят Safari запускать действия «Назад» и «Вперед» в истории просмотра, например, Internet Explorer в режиме Windows 8. Этот жест может иметь некоторые конфликты с вашим сайтом, если вы предлагаете пользователям проводить пальцем влево или вправо без каких-либо приятных полей (если честно, у вас сейчас такая же проблема и с Chrome).

Проблема еще более странная в одностраничных веб-приложениях (внутри Safari) при использовании History API или хэш-хака для управления состояниями приложений. Когда пользователь начинает жест назад, он увидит два изображения одного и того же приложения, но пользователь будет в одном приложении. И когда у вас есть жесты прокрутки бок о бок, такие как Yahoo! На домашней странице могут возникнуть проблемы с удобством использования, если пользователь запускает жест с границы (он даже вызывает события касания на некоторое время):

Этот жест и анимация спины (слайд вправо) также конфликтуют с некоторыми структурами пользовательского интерфейса, такими как jQuery Mobile или Sencha Touch. Когда пользователь жестикулирует, чтобы вернуться назад, будут отображаться две анимации (браузером и после этого фреймворком). Кроме того, когда предыдущая страница была оставлена ​​в одной определенной позиции прокрутки, снимок во время анимации слайда в порядке, но затем страница загружается сверху, не сохраняя позицию прокрутки.

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

Надеемся, что жесты «История» недоступны в веб-приложениях на домашнем экране или в приложениях UIWebView (таких как приложения PhoneGap).

Размеры иконок

Значки новой ОС в версии 7.0 на 5 процентов больше, чем в предыдущей версии, например, 120 на 120 на устройствах iPhone Retina вместо прежних 114 на 114. Иконки системы теперь также плоские и больше не имеют блестящего эффекта, поэтому мы можем обновить наши иконки, чтобы они соответствовали новому дизайну. Для этого мы можем использовать ту же ссылку apple-touch-icon с новыми значениями размера.

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

<!-- 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">

<video>
<source src="myvideo.mp4">
<track kind="captions" src="my-captions-en.vtt" srclang="en">
<track kind="subtitles" src="my-captions-fr.vtt" srclang="fr">
</video>

var hasCC = document.querySelector("video").webkitHasClosedCaptions;

::cue { opacity: 0.8 }

<progress max="100" value="40">

<iframe seamless src="mypage.html"></iframe>

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);

h1 { position: -webkit-sticky;   top: 10px; }

h1 { font: -apple-system-headline1 }
p { font: -apple-system-body }

myWebView.paginationMode = UIWebPaginationModeLeftToRight;
myWebView.paginationBreakingMode = UIWebPaginationBreakingModePage;
myWebView.gapBetweenPages = 50;