Как добавить функцию PWA на ваш сайт WordPress? –

Веб-дизайн — это постоянно меняющаяся область, которая развивается на основе новейших технологий и тенденций. PWA или Progressive Web App — это новейшая технология, которая помогает вам сочетать функции настольного сайта с мобильным приложением. Это устраняет необходимость в отдельном мобильном приложении и предлагает все функции, доступные для мобильного приложения, на настольном веб-сайте. Таким образом, владельцы сайтов WordPress могут предложить эту функцию своим читателям. Если вам интересно, вот как вы можете добавить функцию PWA на свой сайт WordPress.

Тенденции в создании сайтов

Вот как технология создания веб-сайтов развивалась за последнее десятилетие.

• Раньше у людей были статические настольные веб-сайты, которые подходили только для настольных браузеров.
• Позже, когда смартфоны только зарождались, многие владельцы сайтов имели отдельную мобильную версию для своего сайта.
• Затем стали популярны адаптивные веб-сайты, что избавило от необходимости иметь отдельную мобильную версию и помогло значительно сэкономить.
• Опять же, мобильные приложения для iOS и Android стали популярными благодаря большому охвату аудитории через мобильные магазины приложений. Однако разработка приложений обходится дороже, чем отдельная мобильная версия, поэтому не многие владельцы сайтов предпочитают иметь приложения для своего сайта.
• Наконец, благодаря Google, теперь у нас есть прогрессивные веб-приложения, которые помогают настольным сайтам иметь функцию мобильного приложения.

Что такое ПВА?

В нашей предыдущей статье мы объяснили, как установить приложение YouTube в Windows и Mac с веб-сайта, поскольку Google не предлагает настольное приложение. Вы можете использовать ту же функцию прогрессивных веб-приложений в WordPress и разрешить своим пользователям устанавливать сайт как приложение.

• На рабочем столе — на сайте появится приглашение в адресной строке браузера, и пользователи могут щелкнуть его, чтобы установить приложение.
• На мобильных устройствах — пользователи могут добавить сайт на главный экран и получить к нему доступ, как и к другим установленным приложениям.

PWA имеет много преимуществ перед доступом к веб-сайту из браузера:

• Он работает как приложение, и вы можете отправлять уведомления прямо на устройство пользователя.
• Доступ к сайту возможен без открытия браузера (хотя для этого нужен браузер).
• Пользователь может закрепить приложение на панели задач или в меню «Пуск» в Windows, добавить в док-станцию ​​на Mac и оставить значок приложения на главном экране на устройствах iOS/Android.
• Все посещенные веб-страницы доступны локально на устройстве, что позволяет получить доступ даже без интернета.
• Приложение откроется очень быстро по сравнению с вашим обычным веб-сайтом, что будет особенно полезно на смартфонах.

Если вы не уверены, читайте дальше, чтобы проверить PWA в действии.

Добавить функцию PWA в WordPress

Что вам нужно, так это установить плагин PWA от Google и настроить один простой параметр, чтобы преобразовать ваш сайт WordPress в приложение PWA. Это бесплатный плагин, доступный для любого сайта WordPress. Помните, что у вас должно быть HTTPS-соединение, чтобы добавить PWA на ваш сайт WordPress. Поскольку бесплатный SSL доступен для всех пользователей WordPress через Let’s Encrypt, мы предполагаем, что это не должно быть проблемой для большинства пользователей.

Кроме того, ваш сервер должен поддерживать создание веб-манифеста и рабочих процессов для вашего сайта. Вы можете проверить полную информацию о PWA в официальная документация Google.

Установите и настройте плагин PWA

Войдите в панель администратора WordPress, чтобы установить и активировать плагин PWA на своем сайте.

Установите приложение PWA в WordPress

После активации плагина перейдите в раздел «Настройки > Чтение», включите опцию «Автономный просмотр» и сохраните изменения. Это поможет кэшировать посещенные страницы в браузере для работы в автономном режиме, и пользователи смогут открыть приложение для посещения страниц без подключения к Интернету.

Включить автономный просмотр

Это все, и никаких других настроек в плагине нет.

Установите свой сайт на рабочий стол

Теперь, когда вы добавили функцию PWA на свой веб-сайт, просто откройте новую вкладку в браузере и откройте свой веб-сайт. В этом примере мы используем Google Chrome, обязательно используйте браузер, поддерживающий функцию PWA. Вы увидите небольшое уведомление, которое будет мигать с надписью «Установить», а затем отобразится значок в правом конце адресной строки браузера. Обратите внимание, что форма значка может меняться в зависимости от используемого вами браузера.

Установите PWA из браузера

Нажмите на это приложение, чтобы увидеть небольшое всплывающее окно, как показано ниже, и нажмите кнопку «Установить».

Выберите Установить

Это добавит приложение в папку вашего браузера (в разделе «Приложения Chrome» для Google Chrome на Mac) и запустит ваш сайт в режиме приложения. Плагин будет использовать значок вашего сайта в качестве значка приложения.

PWA добавлено в приложение Chrome

Вы увидите приложение PWA, как показано ниже, которое будет похоже на любое другое установленное приложение на вашем компьютере.

Сайт открыт как приложение PWA

Вы можете добавить ярлык приложения на рабочий стол, панель задач или док-станцию ​​для быстрого доступа. В Chrome вы можете получить доступ к приложению, перейдя в раздел «chrome://apps». Вы можете в любое время удалить приложение, щелкнув значок с тремя точками в правом верхнем углу приложения и выбрав опцию «Удалить…».

Удалить приложение

Установка приложения PWA на Android и iOS

Вы можете использовать тот же метод, который описан выше, для установки приложения PWA в Chrome Android. Это добавит значок приложения на главный экран, который вы можете нажать и получить к нему доступ, как и к любому другому приложению. Если вы не хотите сохранять установленное приложение, просто удалите его с телефона.

К сожалению, большинство браузеров на iOS, включая Chrome и Safari, не поддерживают прямую установку PWA. Это аналогичная проблема с Apple, поскольку она не поддерживает push-уведомления в Safari на iOS. Что вы можете сделать, так это использовать функцию «Добавить на главный экран» (A2HS), чтобы добавить закладку на главный экран, как приложение. Оно работает аналогично приложению PWA, поскольку A2HS считается частью технологии PWA.

Добавить на домашний экран

Другие плагины

Если вы действительно хотите использовать функцию PWA, то бесплатного плагина PWA может быть недостаточно. Вы можете попробовать премиум-версию Плагин Super Progressive Web Apps который имеет следующую особенность.

• Все, что вам нужно, это настроить страницу по умолчанию, которая открывается, когда пользователь запускает приложение.
• Покажите всплывающее окно с призывом к действию, предлагающее пользователям установить сайт как приложение.
• Настройте внешний вид, домашнюю страницу и автономную страницу.
• Вы также можете превратить свой сайт в настоящее приложение для Android и опубликовать его в Google Play Store.

Супер плагин PWA

Если вы используете версию AMP, вы можете попробовать Плагин PWA для WP и AMP. Премиум-версия этого плагина предлагает такие же функции, как и плагин Super PWA.

Заключительные слова

Добавление PWA на ваш сайт WordPress — это возможность привлечь мобильных пользователей, когда у вас нет времени и денег на поддержку отдельных мобильных приложений. Он имеет много преимуществ, таких как отсутствие дополнительных затрат и простота удержания пользователей путем отправки push-уведомлений с помощью популярных плагинов, таких как OneSignal. Хотя это не работает на устройствах iOS, мы надеемся, что поддержка скоро будет включена.