На данном сайте используются cookie-файлы и аналогичные технологии. Если, прочитав это сообщение, вы остаетесь на сайте, это означает, что вы не возражаете против использования этих технологий.
Подробнее Хорошо
Progressive web apps (сайт на главном экране мобильного)
Блог
Андрей Викторович
Специалист по внедрению технических инноваций
13. 01. 2017г.
0

Progressive web apps (сайт на главном экране мобильного)

Те, кто часто выходит в Интернет с мобильного телефона или планшета, как правило, знают о том, что ссылку на сайт можно вынести на главный экран устройства. Для этого достаточно при просмотре сайта в мобильном браузере нажать кнопку "Настройки" и выбрать пункт меню "Добавить на домашний экран".

Однако попробуйте добавить на домашний экран сайт http://lenta.ru... Вы заметите, что при запуске, во-первых, есть сплэш (splashscreen, заставка при запуске), а во-вторых, сайт открывается на весь экран, без панели управления встроенного браузера: то есть сайт выглядит как мобильное приложение (хотя это тот же сайт). Как они это сделали? Об этом вкратце расскажем ниже.

Если сайт имеет адаптивный дизайн и доступен по https, то вы можете легко превратить его в подобное (называется "прогрессивное") веб-приложение. Для этого необходимо сгенерировать иконки и manifest.json - файл настроек. Сделать это возможно с помощью бесплатного сервиса https://app-manifest.firebaseapp.com/. Тот архив, который выдаст сервис, необходимо положить в корневую директорию сайта. Далее, для корректной работы на iOS и старых мобильных браузерах имеет смысл подключить javascript-библиотеку к вашему сайту: https://github.com/boyofgreen/manUp.js.

Чтобы пользователь узнал, что ваш сайт может работать как progressive web application - его можно уведомить всплывающим окном. Оптимальным будет одноразовое оповещение при втором посещении сайта. В этом поможет другая javascript-библиотека: https://github.com/cubiq/add-to-homescreen.

Теоретически, такое приложение может даже работать в оффлайне (хотя и не будет иметь доступ к большинству функций устройства). Но это уже совсем другая история...

Оставить комментарий
Назад
В корзине 0 товаров на 0 р.