Safari
Настройка веб-приложений
Веб-приложение предназначено, для того, чтобы выглядеть и вести себя таким образом как нативное приложение, например, оно масштабируется в соответствии с экраном на iOS. Вы можете настроить ваше веб-приложение для Safari на iOS еще глубже, сделав его выглядещем как нативное приложение, когда пользователь добавляет его в Home экран. Это можно сделать с помощью параметров для iOS, которые игнорируются другими платформами.
Указание иконки веб-страницы
Возможно, вы захотите, чтобы пользователи могли добавлять ваши веб-приложения или веб-страницы в качестве ссылки на Home экран. Эти ссылки, представлены иконкой, называумой веб-клип (web clip). Следуйте следующим простым шагам, чтобы указать иконку для представления вашего веб-приложения или веб-страницы на iOS.
Иконка, которая является наиболее подходящей по размерам для используемого устройства. Если атрибут size не установлен, то размер элемента по умолчанию 57 х 57.
Указание изображения заставки
Для iOS веб-приложений, которые похожи на нативные приложения, можно указать изображение запуска, которое отображается в то время, когда ваше веб-приложение запускается. Это особенно полезно, когда ваше веб-приложение находится в автономном режиме. По умолчанию оно представляет собой скриншот веб-приложения при последнем запуске. Для установки другого изображения заставки добавьте элемент link в веб-страницу, например:
На iPhone и iPod Touch, изображение должно быть 320 х 460 пикселей и в портретной ориентации.
Скрытие Safari компонентов интерфейса пользователя
iOS в рамках оптимизации вашего веб-приложения, может его использовать в режиме автономной работы, чтобы больше походить на нативное приложение. При использовании его автономном режиме, Safari не используется для отображения веб-контента, в частности, нет текстового поля URL браузера в верхней части экрана или панели кнопок в нижней части экрана. Появляется только строка состояния в верхней части экрана.
Вы можете определить, отображается ли веб-страница в автономном режиме с помощью логического свойства JavaScript window.navigator.standalone (только для чтения).
Изменение внешнего вида строки состояния
Например, следующий HTML устанавливает цвет фона строки состояния в черный:
Ссылки на другие нативные приложения
Веб-приложение можно связать с другими встроенными приложениями iOS, создав ссылку со специальным URL. Доступные функции: звонок по телефонному номеру, отправка SMS или iMessage, и открытие видео YouTube в своем нативном приложении, если оно установлено. Например, для ссылки на номер телефона, структура элемента привязки в следующем формате:
Отличия в адаптации сайта и AJAX веб-приложения для iOS
Есть сейчас такая тенденция — делать в сайтах поддержку планшетов iPad и других устройств на iOS: iPhone, iPod. Но если для сайтов это достаточно просто, при хорошей верстке, можно добавить пару тегов в head и готово, то для веб-приложений, где есть сессии с использованием Cookies, все обстоит сложнее и есть подводные камни. Итак, возможно, еще не все знают, что в мобильном Safari можно нажать кнопку меню (со стрелкой, как на рисунке) и выбрать там «Добавить в Домой» / «Add to Home Screen», тогда для сайта появится иконка на рабочем столе. Но иконка будет просто запускать Safari с этим сайтом, а вот если добавить пару известных тегов (см. ниже), то все элементы управления Safar будут скрыты и приложение будет работать на полный экран, как обычные нативные приложения iOS. Так вот основная выявленная проблема в том, что в этом режиме сессия все время сбрасывается. Стоит переключится на другое приложение или рабочий стол, даже просто перейти по ссылке, и опять вернуться в веб-приложение, как страница перегрузится и сессионной Cookie уже не будет, нужно логиниться заново. Эту проблему то мы и решим.
По хорошему, полноэкранный режим доступен только для полностью динамических AJAX веб-приложений, которые не перегружают экран целиком и не переходят по ссылкам даже в рамках своего домена. Если же адаптируется обычный сайт, где навигация происходит при смене URL и перегрузке страниц, то и fullscreen не доступен и куки не исчезают.
Рецепт для простого сайта
Решение это известно, я приведу его только потому, что ниже дополню его отличиями для веб-приложения.
Тут документация по дополнительным мета-тегам Safari, а вот нужные нам мета-теги для вставки в head:
Картинка /favicon.png станет иконкой на рабочем столе. Про размеры иконок подробнее написано в документации, их может быть несколько, например.
Полноэкранный режим
Для перехода приложения в полноэкранный режим, присовокупим к тем двум тегам еще два:
Для обычного сайта они имеют спорную пользу, но вот для веб-приложения — другое дело.
Решение для WebApplication
Как я вскользь упоминал, для веб-приложений нужно выдержать дополнительные условия: приложение не должно переходить по ссылкам a href, это приводит к открытию ссылок в браузере и выходу из фулскрин режима. Но вот делать window.location.reload(true); можно и даже window.location = «/demo/path»; вполне разрешен из JavaScript. При этих переходах кукизы не теряются и все хорошо.
Следующий код позволит сохранить сессионный cookie в localStorage, и когда кукиз будет потерян при переходе между приложениями в iOS, то этот же код восстановить из кукиз и перегрузит страницу, чтобы сервер отдал ее в том виде, как должен получить залогиненый пользователь.
Как видно из кода, у нас есть два места хранения сессионной переменной: document.cookie и localStorage, мы читаем из обоих, а пишем туда, где кода небыло. В случае, если код есть в обоих местах, то предпочтение отдается document.cookie, т.к. может так случиться, что сервер заменит сессионную переменную и нам ее нужно записать поверх той, что уже есть в localStorage. Пример вызова: PersistCookie(«SID»); В параметрах передается имя сессионной куки. Вызов нужно делать при загрузке страницы, но оборачивать в событие «onload» или в jQuery.ready() не обязательно. Для PHP имя сессионной куки «PHPSESSID», для ASP.NET «ASP.NET_SessionId» и т.д. но может меняться в настройках сервера или программно. При отлогинивании пользователя нужно не забыть сделать if (localStorage) localStorage.clear(); чтобы кукиз не вернулся. Еще можно отключить проверку navigator.userAgent, чтобы код работал не только в iOS, но я не исследовал, будет ли это полезно или вредно.
P.S. Вообще, я нашел описание проблемы с кукизами в англоязычных форумах, и один робкий совет: устанавливать время жизни сессионного куки со стороны сервера. Не знаю, почему такое советовали, я пробовал это делать, совет не работает, возможно, он работал на каких-то старых версиях iOS или человеку только показалось, что этот метод сработал. Вообще, сессионные куки не должны иметь время жизни, т.е. поля Expires по спецификации у них нет, иначе они перестают быть сессионными.
UPD: Обнаружилась приятная особенность, localStorage сквозной для всего домена, то есть, залогинившись в Safari, сессия распространяется на установленное «псевдо-приложение» и наоборот, если в приложении залогиниться, то потом в сафари кукиз добавляется, если страницу обновить.
UPD2: Есть и неприятная особенность, каждый раз после возвращения к «псевдо-приложению», кроме сброса кукизов еще и страница перегружается, то есть, если выдать форму и пользователь ее начинает заполнять, потом переключился куда-то, вернулся и все пропало, и форма и все, что ввел. Так что, еще до поста нужно все сохранять в localStorage. Скорее всего, нужно сделать универсальное решение для сохранения форм с любыми полями, и вообще, сохранения «состояния» приложения на момент переключения, чтобы восстановить что там было. Состояние же может содержать состояние навигации внутри приложения, состояние контролов (например закладок, списков), состояние прокрутки, состояние динамических изменений html и css на странице. Все же сбрасывается на пол пути. Кстати, страница при сбросе не перегружается с сервера, а берется из кеша.
UPD3: Для тех, кто хочет минимальными усилиями сделать обычный сайт псевдо-приложением в фулскрин режиме, но не имеет желания переписывать все на AJAX, можно перехватывать все ссылки и делать переходы между страницами через window.location. При этом, как уже говорилось, Safari не выбьет вас в режим браузера, если только ссылка не будет вести на другой домен. Вот решение на jQuery:
Но остается проблема со сбросом сайта на первую страницу при переключении между приложениями. Это лечится так же, как и с кукизами — сохраняем в localStorage. Конечно же, нужно определаять, куда ведут ссылки и сохранять в localStorage только ссылки в пределах нашего домена, все другие и так будут открываться в Safari. Вот все наработки собраны в расширение для jQuery:
Safari Web Content Guide
Configuring Web Applications
A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.
Read Viewport Settings for Web Applications for how to set the viewport for web applications on iOS.
Specifying a Webpage Icon for Web Clip
You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png
To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:
In the above example, replace custom_icon.png with your icon filename.
To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:
The icon that is the most appropriate size for the device is used. See the “Graphics” chapter of iOS Human Interface Guidelines for current icon sizes and recommendations.
If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.
If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon. prefix. For example, if the appropriate icon size for the device is 58 x 58, the system searches for filenames in the following order:
Specifying a Launch Screen Image
On iOS, similar to native applications, you can specify a launch screen image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in:
In the above example, replace launch.png with your startup screen filename. See the “Graphics” chapter of iOS Human Interface Guidelines for current launch screen sizes and recommendations.
Adding a Launch Icon Title
On iOS, you can specify a web application title for the launch icon. By default, the tag is used. To set a different title, add a meta tag to the webpage, as in:
In the above example, replace AppTitle with your title.
Hiding Safari User Interface Components
On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen. Read Changing the Status Bar Appearance for how to minimize the status bar.
Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode. For example, the following HTML displays web content using standalone mode.
Changing the Status Bar Appearance
If your web application displays in standalone mode like that of a native application, you can minimize the status bar that is displayed at the top of the screen on iOS. Do so using the status-bar-style meta tag.
For example, the following HTML sets the background color of the status bar to black:
Linking to Other Native Apps
Your web application can link to other built-in iOS apps by creating a link with a special URL. Available functionality includes calling a phone number, sending an SMS or iMessage, and opening a YouTube video in its native app if it is installed. For example, to link to a phone number, structure an anchor element in the following format:
For a complete look of these capabilities, see Apple URL Scheme Reference.
Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-12-12
HTML по стандартам
Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.
В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.
Указатель на язык:
Это идет в паре с hyphens в CSS. Таким образом браузер может более корректно расставлять переносы.
Убираем возможность масштабировать:
Это особенно полезно на телефонах с операционкой Bada, которые могут дождаться загрузки страницы и просто умножить разрешение на 2. Также мы отключаем zoom, т.к. в приложениях обычно никакого зума нет.
Ещё один тег для вышеописанной проблемы:
Индикатор того, что на странице использована разметка оптимизированная для мобильных устройств. Просит документ отображаться без автоматического масштабирования.
Запрещаем кэшировать документ:
Это помогает на некоторых девайсах избавиться от неадекватных попыток восстановления страницы. То есть попытки адекватные, но не все девайсы восстанавливают страницу без багов.
Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов:
Не забываем добавить картинки для Apple устройств:
Этот мета-тег необходим для того, чтобы приложение открылось в полноэкранном режиме:
Ну и корректируем верхнюю полоску в iPhone:
Ну и Windows 8 берет пример с iPhone. Дополнительная разметка для описания:
Дополнительная разметка для оформления ссылки на приложение в меню:
Дополнительные настройки для окна. Видимо, это такая отсылка к HTA, который не пошел:
Просим IE переключиться в последний режим:
Отключаем панель работы с изображениями:
Просим IE оформлять все в классическом стиле без учета текущей темы операционки:
Запрещаем распознавать номера телефонов и адреса, а так-же выделять их:
Для обычной веб-странички лучше вставить набор CSS стилей, описывающих телефон и адрес, а не блокировать их распознание.
Полный набор для SEO:
В последнее время про него тоже стали забывать, а ведь он может помочь, если приложение будет на каком-либо сайте online.
Обязательно скидываем стили по умолчанию:
Свой reset я немного изменил. Он задавал background для TD тега, и это вызвало багу в старом IE, если мы заливаем всю строку через тег TR
Добавляем набор своих стандартных стилей:
А в них учтены ещё некоторые нюансы. Например убираем выделение в CSS:
Но оставляем его для полей ввода текста:
Ещё раз напомню, что в основном я пишу веб-приложения, в которых пользователь ничего выделять не должен. На обычном сайте запрещать выделение текста нельзя.
Ставить border картинкам обычно не забывают, т.к. он в reset.css, а вот vertical-align пропускают:
Ещё у меня хранится стандартный класс анимации, чтобы «мозолить глаза»:
Можно копировать его по мере надобности для кнопок, табиков и т.п. Суть в том, что когда он постоянно попадается на глаза, подключение анимации становится чем-то естественным. О ней уже не надо вспоминать как о фиче, которую нужно не забыть подключить.
А ещё в этих стилях я раскрашиваю плашку которая всегда идет вверху HTML шаблона:
Ну и конечно, ради любимого IE в самом начале добавим:
Этой строкой просим его не показывать нам табличку про то, что скрипты опасны и т.д. и т.п., а просто брать и включать JS
Ну и стили для портретной и альбомной ориентации:
Если будете переводить в HTA, есть такая вставка:
Тут указаны параметры для HTA файла (например, наличие системного меню, отсутствие скролла и т.п.). А также добавлен JS файл (по умолчанию он закомментирован):
Его задача сжать окно и отцентрировать его по середине экрана (если, конечно, это возможно).
Ну а с этим наверное уже знакомы?
Бежим по новым тегам HTML5 и пересоздаем их для старых IE.
Ну и прокачиваем Android
Таким хаком на Android`ах исчезает адресная строка. А ещё можно добить тач, об этом говорил Иван Чашкин на DUMP-2014 (а ещё тут есть статья http://habrahabr.ru/company/mailru/blog/165213/ от Mail.ru). Суть в том, что, если переопределить все тач события и сделать им stopPropagation, то Android`ы перестанут тормозить с отправкой событий.
Просим закэшировать приложение для offline работы, если это возможно:
Там выше ещё про переносы и язык было, поэтому полный тег такой:
Как выглядит input обычного человека:
Как выглядит input курильщика:
Progressive Enhancement и Graceful Degradation
Советую посмотреть доклад Сергея Горобцова из Яндекса про Progressive Enhancement и Graceful Degradation (http://tech.yandex.ru/education/shri/ekb-2013/talks/1500/) о том, как верстать так, чтобы было хорошо везде.
Так же в своем шаблоне я сразу подключаю несколько готовых модулей типа замены стандартных alert`ов, добавление автопрокрутки сбоку (как на хабре или вконтакте) и т.п. Но это уже велосипеды, которые выходят за рамки статьи.
А вот этот стандартный велосипед может пригодиться. Стандартный footer по микроразметке:
С другой стороны, у всех поисковиков она есть в документации, но никто её не поддерживает. Я использую этот footer, т.к. мало ли, может в будущем начнут использовать.
Вот пожалуй и все. Тем кто осили — небольшой бонус:
В демке вы можете посмотреть все meta теги из статьи.
Safari HTML Reference
Supported Meta Tags
Apple-specific meta tags are described here.
Apple-Specific Meta Tag Keys
apple-mobile-web-app-capable
Sets whether a web application runs in full-screen mode.
Syntax
You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.
Availability
Support Level
apple-mobile-web-app-status-bar-style
Sets the style of the status bar for a web application.
Syntax
Availability
Support Level
format-detection
Enables or disables automatic detection of possible phone numbers in a webpage in Safari on iOS.
Syntax
By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number. Specifying telephone=no disables this feature.
Support Level
viewport
Changes the logical window size used when displaying a page on iOS.
Syntax
Use the viewport meta key to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport.
For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing a Safari on iOS-specific web application, you should set the width to the width of the device.
Table 1 describes the properties supported by the viewport meta key and their default values. When providing multiple properties for the viewport meta key, you should use a comma-delimited list of assignment statements. Follow these rules when setting multiple properties:
Do not use a semicolon as a delimiter.
A space may work as a delimiter, but a comma is preferred.
When referring to the dimensions of a device, you should use the constants described in Table 2 instead of hard-coding specific numeric values. For example, use device-width instead of 320 for the width, and device-height instead of 480 for the height in portrait orientation.
For example, to set the viewport width to the width of the device, add this to your HTML file:
To set the initial scale and to turn off user scaling, add this to your HTML file:
Use the Safari on iOS console to help debug your webpages as described in the Safari Web Inspector Guide. The console contains tips to help you choose viewport values—for example, it reminds you to use the constants when referring to the device width and height.
Support Level
The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels.
The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale and maximum-scale properties.
Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field.
The width of the device in pixels.
The height of the device pixels.
Copyright © 2014 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2014-07-15
