Что такое PWA? Простое объяснение для тех, кто не является разработчиком

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

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

Что такое PWA и как они работают

Эти файлы обеспечивают пользовательский опыт, схожий с приложением: сайт становится устанавливаемым, при установке на устройстве появляется иконка приложения. Более того, service-worker.js действует как промежуточный слой между сайтом и браузером и может предоставлять различные индивидуальные решения, такие как отображение кэшированного контента, даже если устройство находится оффлайн, или отправка push-уведомлений на устройство.

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

Какие функции доступны с PWA

Рассмотрим самые интересные функции, которые продукт может получить с использованием PWA:

• Различные стратегии кэширования. Можно загружать кэш только в оффлайн-режиме или показывать кэшированную версию, пока загружается новая.
• Фоновые задачи. Service worker может выполнять задачи даже тогда, когда пользователь не находится на вашем сайте. Например, загружать новый контент в фоновом режиме.
• Push-уведомления. Вы можете использовать Firebase или недавно добавленный PushAPI для отправки нативных уведомлений на устройство пользователя: маркетинговые предложения, новые публикации и так далее.
• Бейджи. Мини версии уведомлений, которые отображаются прямо на иконке приложения. Вы такое видели на счётчике непрочитанных сообщений в мессенджерах.
• Поделиться через нативный UI. Позволяет выводит интерфейс устройства с доступными на устройстве приложениями в которых можно поделиться ссылкой.
• Балансировка нагрузки. Можно перехватывать запросы к сайту и направлять их на сервер по вашему выбору.
• Отложенные запросы. Service worker может сохранять запросы, которые не выполнились из-за недоступности сервера или оффлайн-режима пользователя, и периодически пытаться выполнить их в фоновом режиме или позже.
• Установка на устройство. Ярлык для открытия вашего сайта без браузера, с локальным хранилищем данных для использования сайта в оффлайн-режиме. Вы можете заранее загрузить все или некоторые страницы в кэш, даже если пользователь их еще не посещал.
• Размещение в App Store. Это возможно не для всех магазинов приложений, но Google Play позволяет публиковать PWA-приложения. Для Apple App Store, придется делать более сложное решение с WebView. При этом нативные платежные решения платформ и другие фичи могут быть недоступны при реализации через PWA.
• Одна кодовая база. Вы можете получить некоторую функциональность как у нативных приложений, без необходимости поддерживать три версии кода. Хотя справедливости ради, нативные приложения также можно создать на одной кодовой базе с помощью React Native или Unity, но это уже другая история.
• PWA может показывать лучшую производительность чем нативное приложение. Веб всегда был оптимизирован для работы на слабых девайсах, тогда как нативные приложения могут интенсивно потреблять ресурсы.

Недостатки использования Прогрессивных Веб-Приложений (PWA)

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

• Возможно, вы не сможете опубликовать приложение в некоторых App Store или использовать API магазинов приложений.
• Неудобный процесс установки. Уведомление с предложением установки появляется редко, и вы не можете контролировать, как часто его показывать. Пользователь может вручную установить приложение через настройки браузера.
• Эта технология добавляет новый уровень сложности и потенциальных багов на сайт.

PWA для WordPress с WP BOX

WP BOX реализует основную функциональность PWA через must-use плагин для WordPress с динамически генерируемым файлом manifest.json, который заполняется данными из текущего заголовка сайта и логотипа.

Этот плагин также подключает асинхронный скрипт, который при загрузке страницы регистрирует service-worker.js.

WP BOX также управляет версионированием для всех трех файлов.

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