Всем привет!
Хотелось бы продолжить тему фич и плюшек Google Chrome. Сегодня поговорим о том, как сделать из обычного сайта, будь то adaptive или просто мобильная версия, web приложение, которое можно было б установить на мобильный телефон.
И так, наряду с появлением push-уведомлений в Google Chrome появилась и поддержка так называемого Web App Manifest.
Web App Manifest — это спецификация, определяемая .json файлом, которая предоставляет разработчику централизованное место для размещения метаданных, связанных с web приложением. Метаданные включают в себя:
- Ссылки на иконки,
- Предпочтительное отображение URL страницы при запуске приложения,
- Объявление ориентации экрана телефона,
- А также режим отображения (к примеру, fullscreen)
Используя эти метаданные, web приложения могут предоставить разработчику средства для взаимодействия с пользователем наравне с нативным приложением.
Ну вроде б всё, разобрались с теорией, переходим к практике:
Первым делом создаем файл manifest.json, открываем текстовым редактором, или чем-то другим для редактирования, кто как привык, и вставляем мою уже про тестируемую “рыбу”:
{
"lang": "ru",
"dir": "ltr",
"name": "Virtucone Studio",
"short_name": "Virtucone",
"icons": [{
"src": "manifest_icon_36.png",
"sizes": "36x36",
"type": "image/png"
}, {
"src": "manifest_icon_48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "manifest_icon_72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "manifest_icon_96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "manifest_icon_144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "manifest_icon_192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"splash_screens":[{
"src": "manifest_icon_320x240.png",
"sizes": "320x240"
}, {
"src": "manifest_icon_1334x750",
"sizes": "1334x750"
}, {
"src": "manifest_icon_1920x1080.png",
"sizes": "1920x1080",
"density": 3
}
],
"start_url": "/index.php",
"display": "standalone",
"orientation": "portrait",
"background_color": "#f7f7fa",
"theme_color": "#3b434e"
}
Теперь пройдемся по строкам:
lang — здесь понятно, язык приложения (города в соответствии с Maintenance Agency for ISO 3166 country codes )
dir — написание текста:
- ltr — написание текста слева направо,
- rtl — написание текста справа налево,
- auto — берет настройки системы.
name — полное название приложения (отображается на экране приветствия)
short_name — краткое название приложения (отображается в favicon и на рабочем столе)
icons — иконки для приложения (manifest_icon_36 — manifest_icon_144, всё зависит от плотности пикселя экрана) и иконка для экрана приветствия (manifest_icon_192).
Поддерживаются форматы jpg/png/webp/svg
start_url — начальная страница, можно указать не стартовую, у меня, к примеру, это «/blog/»
display — режим отображения экрана:
- fullscreen — открывается без участия “агента” Chrome, отображение приложения в полный экран;
- standalone — открывается как отдельное приложение, так в полный экран, нет пользовательских элементов управления (так и не понял, в чем различия между fullscreen)
- minimal-ui и browser — опять же не понял разницы, приложение отображается в браузере.
orientation — ориентация экрана, здесь стандартно всё landscape или portrait, если хотите авто — удалите строчку.
theme_color — цвет темы для контекста приложения
background_color — цвет фона экрана приветствия
И так разобрались с главным, теперь осталось всё это залить на сервак и подключить manifest в шапку с помощью <link> <link rel=»manifest» href=»manifest.json»>
После этого ваш сайт имеет поддержку web приложения. Для того, чтобы его добавить на ваш рабочий стол телефона — переходим в настройки — > Добавить на главный экран, и у вас появится иконка.
P.S.: с выходом Chrome 42 появилась возможность быстрой установки ярлыка на рабочий стол. Но! Это Google — не всё так просто, сайт должен подходить по нескольким критериям:
- На сайте должен быть manifest.json с:
- short_name
- start_url — который должен быть загружаемым
- иконка хотя бы с размером 144×144 в формате image/png
- У вас должен быть service worker
- HTTPS
- Пользователь должен хотя бы 2 раза зайти на сайт, с разницей не менее 5 минут.
После соблюдения всех этих условий Google Chrome сам предложит пользователю добавить ярлык.
Как для меня, так это ещё один повод, наряду с push-уведомлениями, подключить https.
P.P.S: С реализацией web приложения и push-уведомлений вообще пропадает необходимость создавать и тем более поддерживать нативное приложение, это дешевле и быстрее.
Всех Благ!