Преобразование вашего сайта WordPress в PWA: в тренде

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

Некоторые из самых влиятельных брендов в мире, а именно Twitter со своим знаменитым Twitter Lite , теперь официально сделали PWA основой для своих будущих разработок.

 Рекомендуемое чтение: 12 примеров прогрессивных веб-приложений для вашего вдохновения

WordPress, или, если быть более конкретным, Automattic — люди, стоящие за WordPress, также инициировали движение WordPress PWA еще на Chrome Dev Summit 2017, объявив о своей незавершенной работе по интеграции прогрессивных технологий в рабочий процесс таких платформ, как WordPress.

С тех пор ландшафт WordPress изменился настолько, что отказ от преобразования вашего WordPress в PWA почти гарантированно приведет к потере удовлетворенности зрителей.

Понимание PWA

По словам Google, прогрессивные веб-приложения

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

Проще говоря, PWA — это будущее веб-серфинга. Для получения дополнительной информации о PWA, ознакомьтесь с нашей статьей Что такое PWA?.

Почему PWA для WordPress?

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

Возьмем, к примеру, знаменитый Twitter Lite. Тематическое исследование показало, что Twitter претерпел огромные изменения в поведении пользователей с выпуском Twitter Lite.

Николас Галлахер, ведущий инженер Twitter Lite, отмечает:

Twitter Lite теперь является самым быстрым, дешевым и надежным способом использования Twitter. Веб-приложение конкурирует по производительности с нашими родными приложениями, но требует менее 3% дискового пространства устройства по сравнению с Twitter для Android.

И не только Twitter присоединился к движению, крупные бренды, такие как Spotify, тоже сделали это с их недавней разработкой Spotify PWA. Статистика и новости об изменениях, которые привносят PWA, повсюду, и их слишком много, чтобы их игнорировать, поэтому заявление о будущем Интернета на основе PWA кажется еще более реалистичным, чем когда-либо.

Предварительные условия для настройки PWA в WordPress

• Прогрессивные веб-приложения требуют, чтобы ваш веб-сайт WordPress обслуживался из безопасного источника, т. е. ваш веб-сайт должен быть HTTPS, а не HTTP .
• Версия WordPress: выше 3.5.0
• Версия PHP: выше 5.3.

Как превратить ваш сайт WordPress в PWA

После выполнения вышеупомянутых предварительных условий владельцы сайтов WordPress могут выбрать преобразование в PWA одним из двух способов: вручную или с помощью плагинов .

1. Разработайте PWA вручную

Разработка PWA, несмотря на то, что она менее затратна, чем другие типы разработки, по-прежнему требует значительных знаний в области кодирования, а ее разработчик должен знать, как обращаться с распространенными средами и библиотеками Javascript, в первую очередь с Angular и React. Вот почему неопытным владельцам сайтов часто рекомендуется опробовать плагины (бесплатные и/или платные) или нанять профессионального разработчика, поскольку процесс создания PWA непрост.

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

2. С плагинами

Не волнуйтесь, владельцы сайтов, не являющиеся разработчиками! WordPress предлагает широкий выбор плагинов, которые делают большую часть тяжелой работы для своих пользователей. Эти плагины бывают 2 типов: бесплатные и платные плагины.

Бесплатные плагины

1. СуперПВА

На вершине бесплатных плагинов PWA для WordPress находится SuperPWA с его давними традициями отличного обслуживания и качества.

SuperPWA легко настроить, настройка Progressive Web App занимает меньше минуты. SuperPWA выполняет чистую деинсталляцию, удаляя каждую запись базы данных и файл, которые он создает. На самом деле ни одна из настроек по умолчанию не сохраняется в базе данных, пока вы не сохраните ее вручную в первый раз.

Активные установки: 30000+
Звездный рейтинг: ★★★★★

2. ПВА

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

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

Последнее обновление: 5 месяцев назад
Активные установки: 20 000+
Звездный рейтинг: ★★★★

3. PWA для WP и AMP

Для бесплатного предложения PWA для WP и AMP отлично подходит для своих целей. Он хорош, прост в использовании и предлагает исключительное обслуживание клиентов; однако его документации немного не хватает, что может привести к тому, что все будет работать сложнее.
Активные установки: 8000+
Звездный рейтинг: ★★★★★

4. WebSuite PWA

WebSuite PWA — это полный плагин для превращения вашего веб-сайта в PWA со встроенной поддержкой AMP. Плагин поставляется с различными темами, чтобы придать вашему PWA вид приложения, а также со многими функциями, такими как «Добавить на главный экран», «Push-уведомления», CDN, интеграция с аналитикой и т. д.

Активные установки: 30+

Звездный рейтинг: ★★★★★

5. Простой PWA для WordPress от Webkul

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

Активные установки: информация недоступна

Количество звезд: информация недоступна

Как установить плагины PWA

Процесс установки плагинов WordPress PWA довольно прост и оптимизирован. Ниже мы будем использовать SuperPWA в качестве примера:

Установка Вордпресс :

• Посетите Администратор WordPress > Плагины > Добавить новый
• Найдите « Суперпрогрессивные веб-приложения »
• Нажмите « Установить сейчас », а затем « Активировать » Super Progressive Web Apps.

Чтобы установить вручную:

• Загрузите папку super-progressive-web-apps в /wp-content/plugins/ каталог на вашем сервере
• Перейдите в Администрирование WordPress > Плагины.
• Активируйте плагин Super Progressive Web Apps из списка.

Вывод

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

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

Дальнейшее чтение:

• Magento PWA Studio: подробное сравнение с Vue Storefront

• Интеграция Magento с WordPress: пошаговое руководство