Существует простой способ сделать мобильное приложение из сайтов на базе WordPress & WooCommerce с использованием PWA. Пора разбираться…

Технологии прогрессивных веб приложений существуют уже несколько лет, но становятся все более распространенными с развитием веб-браузеров.

Этот вариант может быть полезен, если вам интересно улучшить пользовательский опыт, например, через уведомления для посетителей сайта в браузере.

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

В этом посте мы обсудим процесс разработки веб-приложений, а затем рассмотрим, как создавать веб-приложения в WordPress. Наконец, мы представим некоторые темы и плагины, которые могут помочь вам на этом пути. Начнем!

Что такое прогрессивное веб-приложение?

Вкратце, PWA – это программное обеспечение, которое использует самые современные техники веб-программирования. Обычно PWA может предлагать уведомления с помощью JavaScript. Он может быть легко обновлен, и не требует никаких сложных установочных шагов. Кроме того, он должен работать для каждого пользователя независимо от типа браузера и считаться безопасным (обычно благодаря доставке через безопасный HTTPS).

PWA также избавляет от необходимости для пользователей находить, скачивать и устанавливать приложение из магазина приложений. Он будет работать в любом браузере и может быть доступен с домашнего экрана пользователя. Кроме того, Google недавно объявил, что обновления веб-браузера Chrome будут включать совместимость с PWA. Это означает, что пользователи могут получить преимущества вашего PWA на Chrome OS и настольных компьютерах, и вы можете предоставить улучшенный опыт не только на мобильных устройствах.

Почему следует превратить свой сайт в прогрессивное веб-приложение

Сравнивая веб-сайты, веб-приложения и мобильные приложения, один из элементов, о котором следует подумать, – это уведомления. Исследования показывают, что пользователи, получающие push-уведомления, имеют на 88% более высокий уровень участия. Традиционные веб-сайты обычно не предлагают эту опцию, но создав PWA, вы можете включить эту функциональность без потенциально сложного процесса, который может потребоваться для мобильного приложения.

Скорость загрузки сайта – еще одна причина, чтобы рассмотреть PWA. Если ваш сайт загружается медленно, вы, вероятно, теряете много трафика. Если вы превратите свой сайт в PWA, вы можете перестать беспокоиться о скорости. Ваш контент будет доступен даже в офлайн-режиме, и он будет загружаться быстро и надежно.

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

Плагины для быстрой сборки веб-приложений на базе WordPress

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

Плагин PWA – мой выбор

Скромный плагин со скромным названием PWA https://wordpress.org/plugins/pwa/

Но если вчитаться – то увидим что в его разработке принимают участие лучшие эксперты и разработчики ядра WordPress и даже ребята из Google.

В общем ставится легко и просто практически на любой сайт.

При этом позволяет делать тонкие настройки через хуки.

Super Progressive Web Apps

Плагин Super Progressive Web Apps – это быстрый и простой способ превратить ваш сайт в PWA. Пользователи вашего сайта получат сообщение при посещении вашего сайта на поддерживаемом устройстве, которое попросит их «Добавить на домашний экран». После щелчка по этому приглашению ваш сайт будет «установлен» на их устройстве как PWA с иконкой на домашнем экране. После этого любая страница, которую они просматривают, будет кэширована и доступна офлайн.

Преимущества:

• Быстрая и простая установка и настройка
• Управление иконкой вашего PWA и другими элементами стиля
• PWAs также можно получить через поисковые системы

Недостатки:

• Офлайн можно просматривать только кэшированные страницы
• Ограниченные возможности оповещения push при использовании на iOS
• Нет поддержки Google Analytics

Стоимость:

• Бесплатно

WordPress Mobile Soft

Еще один вариант плагина – WordPress Mobile Soft. Этот инструмент позволяет вам настроить PWA, не влияя на вашу основную тему, а также обеспечивает готовность функции для мобильных устройств. Кроме того, вы сможете использовать URL, оптимизированный для поисковых систем, что позволит посетителям легко переходить на ваш PWA.

Преимущества:

• SEO-дружественный URL
• Не повлияет на вашу тему
• Можно выбрать использование PWA на рабочем столе и мобильном устройстве

Недостатки:

• Не был протестирован с последними версиями WordPress
• Может не поддерживать все дополнения WordPress

Стоимость:

• $ 25

PWA для WP & AMP

Еще один популярный вариант – плагин PWA для WP & AMP. Это решение позволяет создавать PWAs для ваших веб-сайтов и Accelerated Mobile Pages (AMP). Вы сможете предоставить иконку для домашнего экрана вашим пользователям сайта, а также офлайн-доступ.

Преимущества:

• Поддерживает мультисайт и оповещения push OneSignal
• Непрерывное развитие и улучшение плагина
• Предоставляет панель управления статусом для мониторинга PWA

Недостатки:

• Функции Call-to-Action, Pull to Refresh и другие важные функции доступны только в платной версии

Стоимость:

• Freemium: использование одного лицензионного ключа начинается от $ 49 в год

Progressive WordPress (PWA)

Progressive WordPress позволяет пользователям получить опцию «Добавить на домашний экран» и работать как нативное мобильное приложение. Вы также получаете поддержку оповещений push и AMP.

Преимущества:

• Отправляйте оповещения push из панели управления WordPress admin
• Поддерживает AMP
• Предварительно кэширует ресурсы для быстрой загрузки

Недостатки:

• Если не используются совместимые плагины AMP, необходима ручная настройка
• Совместимость с оповещениями push iOS – это улучшение в ожидании

Стоимость:

• Бесплатно

PWA для WordPress

PWA для WordPress создает PWA вашего веб-сайта с установкой только двух файлов.

Преимущества:

• Настройте время истечения кэша
• Поддержка мультисайтов
• Выберите, какие URL исключить из кэша PWA

Недостатки:

• Не был протестирован с последними версиями WordPress
• Не является широко установленным выбором плагина для создания PWA

Стоимость:

• Бесплатно

Разработка веб-приложений в WordPress

WordPress может быть основой для разработки приложений. Однако для этого необходимо понимание пользовательского опыта (UX), HTML, CSS, PHP и JavaScript. Даже создание базового плагина может занять время на изучение.

Что касается PWA, здесь много преимуществ. Однако одним из ключевых преимуществ является экономия времени при воспроизведении завершенного приложения на нескольких производственных сайтах. Для этого вам, вероятно, захочется обратиться к «Service Workers».

Что такое Service Workers в WordPress PWA?

«Service Worker» – это в основном скрипт, который позволяет вашему PWA интегрировать лучшие аспекты традиционных и нативных веб-приложений. Обычно он написан на JavaScript и, подобно клиентскому прокси, позволяет определить, как отвечать на запросы ресурсов. Предварительное кэширование уменьшает необходимость постоянного подключения к Интернету, создавая надежный пользовательский опыт.

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

Как создавать веб-приложения с WordPress

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

Вам также нужно будет выбрать как фреймворк для бэк-энда, так и для фронт-энда. Конечно, WordPress будет вашей системой управления контентом (CMS) для бэк-энда, но вам также захочется выбрать подходящий стек серверов, такой как XAMPP.

Ваш выбор для фронт-энда будет более изощренным при работе с WordPress. Многие выбирают Bootstrap или AngularJS, хотя ReactJS Facebook и Backbone.js также популярны:

Bootstrap также включает в себя множество стильных тем, чтобы помочь вам настроить свой фреймворк.

Это часть того, для чего разработано специальное WordPress Application Framework – упростить процесс создания. Он делает это, предоставляя решения для распространенных ошибок в коде и предлагая актуальные ресурсы для разработчиков.

Progressive Web Apps также работают для ПК как десктоп приложения

Как мы упомянули в начале этого поста, теперь возможно использовать PWAs с десктопными браузерами. Эта функциональность доступна для Mac, Chrome OS, Linux и Windows, начиная с версии браузера Chrome 73.

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

Следуйте рекомендациям PWA от Google

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

Google также определяет несколько других требований для создания базового PWA:

• Сайты обслуживаются по безопасному HTTPS.
• Страницы разработаны с учетом ответной реакции для планшетов и мобильных устройств.
• Все URL приложения загружаются в автономном режиме.
• Для функции «Добавить на домашний экран» должны быть предоставлены метаданные.
• Загрузка должна быть быстрой даже на 3G-сетях.
• Сайты должны быть совместимы с разными браузерами.
• Переходы между страницами быстрые и плавные, независимо от статуса сети.
• Каждая страница должна иметь URL.

Хорошей идеей будет проверить эти базовые элементы с использованием Lighthouse. Это инструмент веб-разработки Google, который можно использовать для аудита страниц веб-сайта на предмет потенциальных улучшений.

Если вы хотите взять свой PWA на следующий уровень, вам нужно обратиться к примерному списку контроля PWA от Google. Сюда входят такие элементы, как проверка того, что контент вашего сайта индексируется Google. Кроме того, вам нужно убедиться, что вы использовали метаданные Schema.org там, где это уместно.