SmartModal: Добавление сайта в телефон пользователя (PWA, всплывающее окно)

Описание

Заменяет разработку мобильного приложения для установки в телефон — решение позволяет быстро находить ваш сайт пользователям. Предложит добавить иконку сайта на рабочий стол в телефон пользователя. Далее — установка ярлыка (иконки) на рабочий стол мобильного устройства, визуально не отличающегося от ярлыка нативного приложения.

PWA — технология в web-разработке, которая визуально и функционально трансформирует сайт  (вид мобильного приложения в браузере).

Преимущества решения

• Выводит всплывающее окно пользователю с предложением добавить иконку Вашего сайта на рабочий стол телефона.
• Возможность для администратора управления настройкой — иконка приложения, название, фирменный цвет.
• Автоматически генерирует несколько размеров иконок для различных разрешений.
• Для браузеров, в которых не поддерживается автоматическое добавление на рабочий стол, выводит окно с информацией как установить вручную.

Результат — Ваш сайт не потеряется и всегда под рукой у пользователя!

Особенно отлично работает для:

• Сайтов, работающих с дилерами и партнерами.
• Сервисных компаний, выполнение услуг
• Медицинских клиник
• Ресторанов, кафе, HoReCa
• Онлайн СМИ и порталов
• Интернет-магазинов
• Для любого сайта, который хочет прочнее «связать» себя с пользователем и вернуть его на сайт.

Какие задачи позволяет решить

• Упрощать поиск компании. Доступ к компании в один клик на экране.
• Повышать узнаваемость бренда. Иконка (логотип) компании всегда на виду у пользователя
• Стимулировать повторные продажи.
• Оставаться на связи с клиентом.

Примечание:

• Работает только на сайтах с протоколом https
• Сайт не должен содержать смешанное содержимое. Смешанное содержимое — когда страница с протоколом HTTPS, содержит ресурсы, загруженные с другого сайта по протоколу HTTP.
• Сайт в отличии от нативного мобильного приложения недоступен без интернета.

Установка решения

1. Проверить настройки сервера. Для работы решения версия php должна быть не ниже 7.4 (совместимо с php 7.4+, php 8+). Также рекомендуется проверить сервер на соответствие общим требованиям 1С-Битрикс (на странице «Проверка системы», если 1С-Битрикс установлен, или с помощью файла server_bitrix_test.php).
2. Активировать купон решения в админпанели 1С-Битрикс «Marketplace-Обновление решений-Активация купона» (http://вашдомен/bitrix/admin/update_system_partner.php?lang=ru). Введите код купона и нажмите «Активировать купон».
   (Как получить купон? Купон приходит автоматически на почту после покупки решения.)
3. Перейти на страницу http://вашдомен/bitrix/admin/partner_modules.php и нажать «Установить» для решения.
4. Настроить решение на странице настроек решения  http://вашдомен/bitrix/admin/settings.php?lang=ru&mid=apriori.smartmodal Вы можете добавить иконку, название и фирменный цвет.

Если Вы ставите решение после демо-периода - проверьте нажали ли Вы кнопку «Зарегистрировать» для решения.

Возможные проблемы

Окно не показывается

Необходимо проверить:

1. Вы проверяете работу на мобильном устройстве? Окно показывается только на мобильных устройствах.
2. Проверьте, активен ли на сайте протокол https.
3. Проверьте, установлен ли и активирован ли модуль в админпанели.
4. Убедитесь, что окно не блокируется браузером.
5. Очистьте кеш на сайте, в том числе Композитный кеш.
6. Очистьте кеш своего браузера. Проведите проверку в режиме Инкогнито. 

Не работают все страницы кроме главной или часть страниц

Такая ситуация может встречаться при установке второго и последующих сайтов при использовании мультисайтовости или при первоначальном некорректном удалении файлов на сервере.

• Проверьте есть ли в корне сайта файл .htaccess
• Проверьте есть ли в корне сайта файл urlrewrite.php и не пустой ли он
• Убедитесь что в Проверке системы нет ошибок.
• При необходимости это можно сделать в разделе админпанели Битрикс: Настройки-Настройка продукта-Обработка адресов-Правила обработки, нажав кнопку «Пересоздание».

Также страницы могут не работать при повторной переустановке решения на текущий сайт, если предварительно полностью не удалены его публичная часть и соответствующие инфоблоки.

Активировали купон решения в админке, но у решения так и остался демо режим

Если Вы ставите решение после демо-периода - проверьте нажали ли Вы кнопку «Зарегистрировать» для решения.

Вопросы по PWA

PWA в Яндекс Метрике

Одним из плюсов технологии PWA является добавление иконки сайта/приложения на рабочий стол телефона, открывающей сайт в стиле мобильного приложения без адресной строки браузера. И счетчик Яндекс Метрики при этом работает. 

Чтобы отследить вход с PWA, измените ссылку на сайт в настройках файла manifest сайта с "\/" на необходимую вам для отслеживания(например "\/?refer=pwa").

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