Как сделать из обычного сайта web приложение

Автор Алексей в 31.03.2016. Опубликовано Dev

Всем привет!

Хотелось бы продолжить тему фич и плюшек 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-уведомлений вообще пропадает необходимость создавать и тем более поддерживать нативное приложение, это дешевле и быстрее.

Всех Благ!

Теги: application, chrome, web, website

3 516 просмотров

Как сделать из обычного сайта web приложение

Оставить комментарий