Метатеги чи PWA: як стилізувати мобільний статус-бар
Привіт, мене звати Олександр і я прагну поділитися своїм досвідом та інструментами, які допомагають зробити веб-додатки зручнішими для користувачів. У своїй роботі я постійно стикаюся з викликами щодо покращення візуальної привабливості та функціональності інтерфейсу. Навіть мінімальні зміни, такі як додавання метатегів, можуть значно покращити користувацький досвід, не вдаючись до складних рішень на кшталт створення повноцінного PWA.
Стаття допоможе кожному, хто прагне зробити веб-додатки привабливішими, зручнішими та більш схожими на нативні.
Вибір технології
Одна з переваг створення PWA (progressive web application) — гарний вигляд застосунку, подібний до «нативного» (особливо на Android). Але іноді перетворення сайту на PWA є зайвим.
Для цих випадків є інший функціонал для покращення візуалу та UX. Цікаво, що частину функціоналу PWA винесено з веб-маніфесту до HTML-розмітки. Конкретніше — запуск повноекранного режиму при установці веб-застосунку на головний екран та — колір статус-бару. Для цих речей маніфест та воркер не потрібні — достатньо кількох тегів. Десктопу це також стосується, але лише для установки на Windows.
Що таке статус-бар і адресний рядок браузера
Статус-бар — це верхня панель пристрою, де відображаються заряд батареї, час, сповіщення тощо.
Адресний рядок браузера — це область, у якій показується URL веб-сторінки. Браузери дозволяють стилізувати ці елементи для мобільних веб-застосунків, надаючи користувачам враження нативного застосунку.
Війна браузерів торкнулася і цієї сфери, тому для різних систем слід застосовувати різні метатеги.
Apple
Наприклад, щоб прикрасити адресний рядок у Safari (iOs), слід додати наступну розмітку в <head> сайту:
<link rel="apple-touch-icon" sizes="180x180" href="favicon.ico" > <meta name="apple-mobile-web-app-capable" content="yes" > <meta name="apple-mobile-web-app-status-bar-style" content="black" > <meta name="apple-mobile-web-app-title" content="My Super App" >
Причина використання метатегів в даному випадку — бо Safari не підтримує маніфест та fullscreen-API (лише частково і з префіксом).
Даний код задасть іконку при завантаженні на робочий стіл (<link rel="apple-touch-icon" sizes="180×180″ href="favicon.ico">), назву застосунку під іконкою (<meta name="apple-mobile-web-app-title" content="My Super App">), дозволяє відкривати застосунок без адресного рядка (<meta name="apple-mobile-web-app-capable" content="yes">) та підфарбує статусну панель (<meta name="apple-mobile-web-app-status-bar-style" content="black«>).
Тег apple-mobile-web-app-status-bar-style підтримує лише такі значення:
- default — стандартний статус-бар.
- black — чорний статус-бар.
- black-translucent — чорний напівпрозорий статус-бар, що накладається на контент.
Чи включився повноекранний режим, ми можемо перевірити, прочитавши з допомогою JavaScript властивість window.navigator.standalone та використовувати це Boolean-значення для динамічної стилізації.
Детальніше про це можна прочитати за посиланням web.dev
Android
Для Chrome на Android інший варіант:
<meta name="mobile-web-app-capable" content="yes" > <meta name="theme-color" content="#008080" >
Відповідно, метатег mobile-web-app-capable дозволяє працювати без адресного рядка (в повноекранному режимі після установки), а метатег theme-color задає колір фону адресного рядка — просто при відкритті сайту в мобільному браузері. Підтримуються всі допустимі CSS-значення.
Ці теги підтримуються мобільними браузерами Kiwi Mobile, Brave та Samsung Internet. Тег theme-color підтримується також десктопним та мобільним Safari.
Одна з причин написання даної статті — перечитування документації після перегляду інформації на Can I Use про метатег theme-color, доступної за посиланням caniuse
Сфера використання даного метатегу на Stackoverflow та gist.github.com часто неправильно окреслена.
На CSS-tricks (css-tricks) є гарний приклад використання даного тегу для вибору темної/світлої схеми сайту:
<meta name="theme-color" content="#319197" media="(prefers-color-scheme: light)" > <meta name="theme-color" content="#872e4e" media="(prefers-color-scheme: dark)" >
Всі «кольорові» теги для будь-якої платформи працюють без якихось особливих умов — і це суть статті, просто додай теги в <head> і отримай результат.
Зауваження — якщо це все-таки PWA, дані про можливість установки підтягнуться з веб-маніфесту, метатеги будуть проігноровані. Метатег theme-color працює в парі з аналогічним ключем маніфесту, що дозволяє встановлювати різні кольори теми для окремих сторінок програми. Детальніше за посиланням MDN/theme_color
Windows
Windows (Edge) підтримує власні метатеги:
<meta name="msapplication-TileImage" content="favicon.ico" > <meta name="msapplication-TileColor" content="#008080" >
Підтримуються hex-значення та іменовані кольори CSS.
Іконка тайла: msapplication-TileImage задає іконку для стартового екрана.
Колір тайла: msapplication-TileColor задає колір плитки. Працює у Windows 10 — найпоширенішій системі у сімействі.
Слово tile (плитка) використане не просто так — плитки збережених сайтів можна додавати в меню «Пуск» (Live Tiles) при використанні браузера Edge або Chrome у Windows.
Документація — learn.microsoft.com
Для IE працює метатег navbutton-color:
<meta name="msapplication-navbutton-color" content="#c0ffee" >
Firefox та Opera
Firefox та Opera живуть без подібних метатегів. Для Opera працює ключ theme-color у маніфесті PWA.
Fake-fullscreen
Є «секретний» хак, як зробити fullscreen-режим у мобільному браузері. Приховати адресний рядок можна через JavaScript:
window.scrollTo(0, 1);
Цей хак спрацює, лише якщо є достатньо контенту на сторінці.
Іноді вигідніше використовувати стандартне API.
Висновки
Тепер, зібравши всі наведені метатеги докупи в head головної сторінки, ми отримаємо приємніший UI та UX для всіх користувачів. Браузери Safari та Chrome прочитають meta з theme-color, Edge додатково прочитає тег для Windows.
Можливе використання лише тегу для забарвлення — результат миттєвий.
Метатеги відіграють важливу роль у налаштуванні зовнішнього вигляду мобільних додатків, без необхідності створювати PWA.
Немає коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарів