добавить на главный экран скрипт
В Веб-браузере Chrome существует функция позволяющая добавлять любой сайт (при соблюдении ряда условий) в качестве веб-приложения на главный экран гаджета.
Это так называемый режим PWA Ready.
Краткое видео для понимания
Так как мы разрабатываем сайты исключительно на DataLife Engine то предметный разбор будет именно для структуры DLE.
Добавляем в шаблон сайта функции Progressive Web App (PWA)
Архив с файлами для самых нетерпеливых Плагин для DLE 13 и выше [4,81 Kb] (cкачиваний: 58)
Установить можно через систему плагинов DLE или в ручную распаковав архив.
1. Загрузить в папку /templates/ файлы:
2. В корень сайта загрузить файл
3. В файл шаблона main.tpl
перед закрывающим тегом
Перед закрывающим тегом
4. Отредактировать содержимое файла /templates/pwa-manifest.json
Указать ссылки на свои иконки сайта в секциях
Указать фирменный цвет для вашего приложения в секциях
Указать свое название приложения вместо
А так же подробное описание, вместо
Вписать адрес своего домена, вместо
5. Отредактировать содержимое файла /templates/pwa-offline.html
К примеру на нашем сайте он выглядит так
Собственно данный файл необходим для тех случаев, когда клик по иконке приложения внезапно не смог соединится с сайтом и на экране посетителя отобразится страница-заглушка оффлайн режима.
Рекомендуется указывать на ней контактные данные, режим работы и прочую информацию важную для реальных посетителей.
Ниже код всех трех файлов используемых для PWA Ready режима.
Условия срабатывания PWA
Их на самом деле всего три.
Условие 1:
Сайт должен иметь SSL версию, т.е. открываться по HTTPS протоколу.
Условие 2:
В файле манифеста должно быть указаны ссылки на иконки размером 192х192 и 512х512 (мы уже проставили там заглушки, пожалуйста замените их на свои иконки).
Условие 3:
Файл service worker должен быть в корне сайта (речь о /pwa-sw.js).
Но лучшим показателем того, что вы сделали все правильно будет автоматическое появление банера с предложением поставить приложение на главный экран вашего смартфона
В настольной версии Хрома, кстати, тоже работает. Но скрыто в меню
клик по пункту меню переоткроет сайт в виде веб-приложения
Как сделать уведомление на сайте «Добавить на главный экран» в мобильной версии сайта.
Google в последнее время очень радует новыми функциями в браузере Chrome, постоянные читатели моего блога наверняка помнят мою детальную инструкцию «Как сделать push уведомление в браузере» она была очень популярна и я решил продолжить писать про хитрости, которые могут улучшить ваш сайт.
Речь пойдет о уведомлении на сайте, которая всплывает в мобильной версии сайта — «Добавить на главный экран». При нажатии на эту кнопку, на рабочем столе вашего телефона создается иконка с ссылкой на ваш сайт. Ссылка работает как приложение, т.е ваш сайт будет открываться как отдельное приложение. Меньше слов, больше дела. Начнем.
Шаг 1. Создание рабочего файла и добавление скрипта.
В первую очередь, в корневой папке вашего сайта, создайте пустой файл с названием — «service-worker.js«. И где нибудь в шаблоне вашего сайта (можно в футоре) добавьте следующий код:
Шаг 2: Создание manifest.json файла.
Вторым этапом нужно также в корневой папке вашего сайта, создать файл manifest.json. И добавить запись в шаблон вашего сайта. Запись добавляется перед закрывающимся тегом
Шаг 3. Редактирование manifest.json файла.
Третьи и заключительный этап. Это конфигурация manifest.json файла. Тут нужно быть предельно аккуратным и не копировать бездумно, вам нужно будет отредактировать его под себя.
В принципе тут должно быть все понятно. Но давайте разберем основные моменты:
На этом все, следите за новыми статьями моего блога, постараюсь про новые и интересные хитрости. Не забудьте поделиться ссылкой и сохранить у себя статью. 🙂
Для устройств работающих на Android в веб-браузере Chrome можно добавить опцию которая будет помогать сохранять ярлык сайта на главном экране смартфона или планшета.
Добавляем в удобном место вашего мобильного шаблона кнопку, при клике на которую будем выводится уведомление с предложением добавить ярлык сайта на главный экран.
Мы его немного доработали под реалии DataLife Engine
Скачать архив add-to-homescreen.zip [1,43 Kb] (cкачиваний: 59)
Содержимое архива а именно папку templates загрузить в корень вашего сайта.
После этого в списке шаблонов появится новая папка pwa это и есть набор скриптов.
Далее открываете свой шаблон сайта, который используете для мобильных устройств в файле main.tpl в секции перед тегом
Далее в main.tpl перед тегом
На этом скрипт подключен.
Вам остается вывести кнопку для его активации.
Что бы использовать его в любом месте шаблона сайта и даже в теле новостей, рекомендуем добавить код кнопки в качестве банера.
Пример того, как это сделать
обратите внимание на чекбокс «разрешить использование тега банера в тексте новостей«
дополнительно можно указать и типы устройств на которых отображать этот банер-кнопку.
Далее прямо в тексте публикации просто вставляете тег банера
Вот и сама такая кнопка для тестов (видна только на смартфонах и планшетах)
Что бы протестировать кнопку «в живую» переключите шаблон на action_skin_change=yes&skin_name=smartphone
скриншот для тех, кто смотрим с десктопа 🙂
Настройки скрипта DLE: add-to-homescreen
Вам потребуется поставить вместо картинок-заглушек свои ссылки на иконки сайта.
например, заменить на
Для генерации всех необходимых значений favicon используйте онлайн сервис https://realfavicongenerator.net
Раз кнопка работает только в веб-браузере Chrome то не помешало бы как-то настроить вывод скрипта исключительно для Хрома (и только на андройде).
Небольшой плагин для DLE добавляет новые теги
Javascript для «добавить на главный экран» на iPhone?
можно ли использовать Javascript для эмуляции опции добавить на главный экран в меню закладок мобильного Safari?
что-то похожее на IE window.external.AddFavorite(location.href, document.title); возможно?
6 ответов:
до тех пор, пока Safari не реализует Service Worker и не следует направлению, заданному Chrome и Firefox, нет никакого способа добавить ваше приложение программно на главный экран или заставить браузер запрашивать пользователя
однако, есть небольшая библиотека, которая предлагает пользователю сделать это и даже указывает на нужное место. Работает лакомство.
другой скрипт, который запускает всплывающее окно «добавить на главный экран»:http://cubiq.org/add-to-home-screen
существует библиотека Javascript с открытым исходным кодом, которая предлагает что-то связанное : mobile-bookmark-bubble
Mobile Bookmark Bubble-это библиотека JavaScript, которая добавляет промо-пузырь в нижнюю часть вашего мобильного веб-приложения, приглашая пользователей добавлять закладки в приложение на главный экран своего устройства. Библиотека использует локальное хранилище HTML5 для отслеживания того, было ли уже отображено промо, чтобы избежать постоянного ворчания пользователей.
в текущая реализация этой библиотеки специально предназначена для мобильного Safari, веб-браузера, используемого на устройствах iPhone и iPad.
после создания mobileconfig файл мы можем передать этот url в iPhone safari browser install certificate и после этого проверить ваш iphone домашний экран есть ярлык вашей веб-страницы или веб-приложения..
Как сделать из сайта приложение и выложить его в Google Play за несколько часов. Часть 1/2: Progressive Web App
Наверное, все близкие к веб-разработке люди уже наслышаны о Progressive Web App. Ещё бы! Эта технология практически уравняла веб и мобильную разработку с точки зрения распространения продуктов и вовлечённости пользователей.
И казалось бы, всё прекрасно! Но увы, за 10 с лишним лет мобильной эпохи пользователи слишком сильно привыкли искать приложения в Google Play и App Store. Ломать привычки пользователей — дело неблагодарное, и потому ребята из Google (кстати, Google является разработчиком PWA) решили, что если гора не идёт к Магомеду, то… В общем, совсем недавно, 6 февраля 2019 года, они обеспечили использование Trusted Web Activities для выкладки веб-приложений в Google Play.
В статье из двух частей будет рассказано, как пройти полный путь от обычного веб-сайта до приложения в Google Play всего за считанные часы. Всё это будет показано на примере реального сервиса — Скорочтец.
Lighthouse
На входе у нас есть веб-сайт с мобильной вёрсткой:
Первым делом нужно установить расширение Lighthouse в Google Chrome на своём рабочем компьютере. Это инструмент для анализа сайтов в целом и для проверки соответствия стандарту Progressive Web App в частности.
В разделе Progressive Web App отчёта вы должны увидеть примерно следующее:
Обратите внимание на раздел Installable. Во-первых, если вы запускаете сайт локально, а вам придётся это делать во время разработки и тестирования, то нужно использовать домен localhost и никакой другой. Благодаря этому будет удовлетворено требование «Use HTTPS», а точнее Lighthouse просто закроет глаза на него, и вы сможете полноценно тестировать свой PWA.
Кроме требования HTTPS, чтобы наше приложение превратилось в PWA и стало устанавливаемым, нужно подключить к сайту service worker и Web app manifest. Давайте сделаем это.
Service worker
Технология service workers позволяет вашему сайту быть online даже тогда, когда сервер недоступен. Это такой посредник между клиентом и сервером, который перехватывает каждый запрос и в случае чего подсовывает данные из кэша в качестве ответа.
Для работы PWA достаточно базовой реализации service worker, которая выглядит следующим образом:
Чтобы всё это заработало, нужно добавить скрипт для регистрации сервис-воркера в html-файлы. Так как Скорочтец является одностраничным приложением (SPA), то у него один единственный html, который после добавления указанного скрипта выглядит вот так:
Функция navigator.serviceWorker.register(‘/service-worker.js’) принимает в качестве аргумента URL, по которому расположен файл сервис-воркера. Здесь не важно, как именно называется файл, но важно, чтобы он был расположен в корне домена. Тогда областью видимости сервис-воркера станет весь домен, и он будет получать события fetch из любой страницы.
Таким образом, расположив файл сервис-воркера по адресу skorochtec.ru/service-worker.js и добавив нужный скрипт в html, мы получаем следующую картину в отчёте Lighthouse:
Если сравнивать с предыдущим отчётом, то теперь у нас удовлетворён второй пункт и сайт отвечает 200 даже offline, а также в 5-м пункте мы видим, что сервис-воркер обнаружен, но вот стартовой страницы не хватает. Информация о стартовой странице и не только указывается в Web App Manifest, давайте добавим его!
Web App Manifest
Манифест предоставляет информацию о нашем приложении: короткое и длинное имя, иконки всех размеров, стартовая страница, цвета и ориентация.
Последняя переменная указывает, что это будет отдельное приложение. Файл манифеста необходимо расположить на сайте (не обязательно в корне) и подключить его в html:
Давайте снова проанализируем сайт Lighthouse-ом:
Ура! Теперь у нас не просто сайт, а Progressive Web App! Возможно, вы заметили, что скорость загрузки резко подросла. Это никак не связано с тем, что мы делали, просто я заменил development-сборку React-приложения на production, чтобы отчёт выглядел максимально красиво.
Ну что ж, заходим на сайт из мобильного Chrome и что же мы видим?
Да! Можно открывать шампанское! Добавляем приложение на главный экран:
Бонусом получаем заставку при запуске, которая собирается из указанных в манифесте name, background_color и иконки 512×512 в массиве icons:
К сожалению, цвет текста подбирается автоматически, что в случае Скорочтеца немного ломает стиль.
Ну и само приложение:
Ограничения
На данный момент PWA поддерживается только в Chrome и Safari (начиная с iOS версии 11.3). Причём, Safari поддерживает эту технологию «по-тихому». Пользователь может добавить приложение на главный экран, но только никакого сообщения об этом нет, в отличие от Chrome.
Полезные советы и трюки
1. Предложение об установке на Safari
Поскольку в Apple этого не сделали (надеемся, что пока не сделали), то приходится реализовывать «руками». Получается вот такое:
Реализуется следующим JavaScript-кодом:
2. Отслеживание установок
Это работает только в Google Chrome. Нужно добавить в html скрипт, отлавливающий событие appinstalled и, например, отправлять на свой сервер сообщение об этом:
3. Правильный выбор start_url
В случае Скорочтеца, все страницы, относящиеся к приложению, начинаются с /app/, поэтому таких казусов не возникает.
Что дальше?
Ну что ж, теперь вы знаете, как забраться к пользователю на главный экран смартфона через ваш сайт. Но это только одна из дверей, и скорее всего не парадная. Во второй части будет рассказано, как войти через парадную дверь: вы узнаете, как выложить ваше прогрессивное веб-приложение в Google Play.