Опыт разработки Web приложений для iOS

Updated: a month ago

Покажу на примере, как адаптировать своё web приложение для iOS.

Пиздёж

Ради развлечения решил переписать свой старый проект на GitHub.

Это была реализация игры виселица, но там у меня было реализовано только разгадывание слов.

Превью первой версии игры

Захотелось оформить всё это покрасивше и повесить на GitHub Pages, а в довесок сделать ещё и “приложение” для мобилок.

Начало

А началось всё с гуглёжки спецификаций.

И первым делом, куда я пошёл, был сайт Apple. Configuring Web Applications.

Попутно нагуглил Gist с примером всех тегов <html>.

Понеслась

Первым делом, в документаци предлагают добавить мета тег apple-touch-icon.

1
2
3
<head>
<link rel="apple-touch-icon" href="/custom_icon.png">
</head>

В идеале нужно использовать несколько картинок разных размеров, под разные устройства, но я забил хуй, ибо

Если устройство не найдет иконку нужного размера, то оно будет использовать самую близкую по большему размеру иконку.
Необязательно создавать иконки для всех разрешений экранов, достаточно будет сделать иконку размером 180×180, так как другие устройства могут уменьшить размер под свои требования.

1
2
3
4
5
6
<head>
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<head>

На сайте Apple есть рекомендации по размерам иконок.

Device or context Icon size
iPhone 180px × 180px (60pt × 60pt @3x)
120px × 120px (60pt × 60pt @2x)
iPad Pro 167px × 167px (83.5pt × 83.5pt @2x)
iPad, iPad mini 152px × 152px (76pt × 76pt @2x)
App Store 1024px × 1024px (1024pt × 1024pt @1x)

Название приложения

Следующим шагом добавляем заголовок для иконки лаунчера.
Мета тег apple-mobile-web-app-title.

1
2
3
<head>
<meta name="apple-mobile-web-app-title" content="AppTitle">
</head>

Автономный режим

Чтобы убрать элементы управления страницой (текстовое поле URL-адреса браузера в верхней части экрана или панели кнопок в нижней части экрана), нужно добавить мета тег apple-mobile-web-app-capable.

Тег говорит iOS, что приложение использует standalone mode.

1
<meta name="apple-mobile-web-app-capable" content="yes">

Определить, используется приложение в автономном режиме, можно вызвав в JS функцию

1
console.log(window.navigator.standalone); // true or false

Почитать про автономный режим больше можно тута.

Настройка внешности статус бара

Можно изменить внешний вид статус бара.

Для этих целей используется мета тег apple-mobile-web-app-status-bar-style.

1
2
3
4
5
<head>
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head>

Белая строка состояния с черным текстом
Чёрная строка состояния с белым текстом
Прозрачный фон с белым текстом

Сразу оговорюсь, что вы не можете сделать черный текст на прозрачном фоне.

Кроме того, при использовании content="black-translucent", строка состояния плавает над вашим контентом и перекрывает содержимое страницы.
Пример перекрытия содержимого

Спизжено отсюда.

Кастомный splash скрин

Как и в нативных приложениях, можено указать изображение экрана запуска, которое будет отображаться при запуске вашего веб-приложения.

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

Для этих целей используется мета тег apple-touch-startup-image.

1
2
3
<head>
<link rel="apple-touch-startup-image" href="/launch.png">
</head>

На сайте Apple написано:

Экран запуска появляется сразу после запуска вашего приложения и быстро заменяется первым экраном приложения, создавая впечатление, что ваше приложение работает быстро и быстро реагирует. Стартовый экран не дает возможности для художественного самовыражения. Он предназначен исключительно для того, чтобы сделать ваше приложение более быстрым и готовым к использованию.
Каждое приложение должно иметь экран запуска.

Оговорюсь, что я пока не разобрался в этом.

На сайте Apple указано

Не используйте статическое изображение для экрана запуска.

А судя по примерам на GitHub (раз, два), нет унифицированного размера и под каждое устройство нужно будет рисовать картинку отдельно.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link
rel="apple-touch-startup-image"
href="pwa/apple-splash-1792-828.png"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="pwa/apple-splash-1242-2208.png"
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="pwa/apple-splash-2208-1242.png"
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
/>
<link
rel="apple-touch-startup-image"
href="pwa/apple-splash-750-1334.png"
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>

Опять же для справки, считаю полезным

Не рекламируйте.
Экран запуска - это не возможность для брендинга. Не создавайте интерфейс входа, похожий на заставку или окно “О программе”. Не добавляйте логотипы или другие элементы брендинга, если они не являются фиксированной частью первого экрана вашего приложения. Если ваша игра или другое иммерсивное приложение отображает сплошной цвет перед переходом к первому экрану, вы можете создать экран запуска, который отображает только этот сплошной цвет.

Список размеров экранов и девайсов представлен по этой ссылке.

Пример экрана запуска.
Запуск приложения
Диспетчер задач

Статья на Medium.

Заключение

Мой пример всегда можно посмотреть в репозитории на GitHub.

Поиграть мржно по этому адресу.

Игра ещё будет развиваться. В старой версии была статистика по проигрышам и отгаданным словам.
Буду рад коммитам)