Здравствуйте, последнее время мобильные приложения заменили браузер. Зачем пользоваться браузерным ВК, когда есть удобное приложение. И если вы хотите, чтобы пользователь заходил к вам чаще то вам необходимо сделать «Приложение». Конечно, для того чтобы создать полноценное приложение нужны знания или деньги.
Но в последнее время плагины WordPress настолько продвинулись, что большую работу можно сделать с помощью них. Поэтому сегодня мы будем делать мобильное «приложение» с помощью плагина. Приступим к созданию!
Создание мобильного приложения сайта.
Ну как я уже сказал раньше сегодня мы будем делать мобильное приложение с помощью плагина WordPress. Сам плагин называется Super Progressive Web Apps вот ссылка на плагин. Скачиваем его и устанавливаем. После этого переходим в настройки и начинаем настройку плагина (Слева в консоли WordPress).
Листаем вниз и смотрим чтобы у вас стояли все 3 галочки зелёным если это не так, то вам необходимо исправить это! Без них ничего не получиться!
Настройка мобильного приложения.
- Название, сокращенное название, описание – обычно подставляются автоматически.
- Иконка заставки (Splash Screen) – устанавливаем картинку размером 512×512 и в формате PNG.
- Иконка приложения – устанавливаем картинку размером 192×192 в формате PNG.
- Цвет фона – советую поставить какой-нибудь серенький или белый.
- Цвет темы – лучше ставить такой же, как и цвет шапки вашего сайта.
- Стартовая страница – советую оставить –Homepage—.
- Использовать AMP версию стартовой страницы – рекомендую галочку не ставить т.к. AMP – страницы выглядят не очень.
- Страница офлайн – выбираете страницу которая будет показываться если у пользователя нет интернета.
- Ориентация – портрет т.к. большинство сайтов используется в формате портрет.
- Display – выбираете один из пунктов.
Типы Display
Режим – Standalone.
Это настройка по умолчанию для SuperPWA. В этом типе отображения веб-приложение выглядит и выглядит как собственное приложение.Веб-приложение запускается в отдельном окне, отдельном от браузера.
Элементы пользовательского интерфейса браузера, такие как адресная строка и навигация, скрыты.Строка состояния Android UI, которая показывает процент заряда батареи и т. Д., Все еще видна.
Режим – Fullscreen.
Если вы хотите, чтобы ваше веб-приложение использовало весь экран, вам нужен именно этот режим. Как следует из названия, ваше веб-приложение откроется во весь экран.
Вся область отображения используется приложением.Элементы пользовательского интерфейса браузера, такие как адресная строка и навигация, скрыты.Строка состояния Android также скрыта.
Режим – Minimal UI
В типе отображения минимального пользовательского интерфейса веб-приложение будет более или менее похоже на режим «Автономный», но некоторые пользовательские интерфейсы браузера сохраняются.
Что будет сохранено, будет зависеть от браузера. Например, в Chrome отображается адресная строка, но ее нельзя ввести, а меню браузера доступно для навигации.«Автономный» режим + некоторые элементы пользовательского интерфейса браузера.Пользовательский опыт варьируется в зависимости от браузера.
Режим – Browser
Если вы выберете «Браузер» в качестве типа отображения, ваше веб-приложение будет вести себя как закладка, и стандартная работа браузера будет сохранена.
Использование режима отображения браузера предотвратит появление уведомления «Добавить на главный экран».Дисплей в режиме отображения. Весь пользовательский интерфейс браузера сохраняется.Уведомление о добавлении на главный экран никогда не отображается.
Расширения
Для того чтобы наше мобильное приложение сайта смотрелось хорошо на всех устройства мы должны установить несколько расширений! Не плагинов! Для этого заходим SuperPWA >> Расширения. После этого устанавливаем расширение «Apple Touch иконки».
— Вот мы наконец то и настроили наш плагин. Не забывайте делиться статьёй в социальных сетях, а также подписываться на рассылку по E-mail.
© TheWebTimes
