Прогрессивные веб-приложения (PWA) при разработке сайтов: интеграция с Drupal

Опубликовано tim в

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

 Прогрессивные веб-приложения (PWA)

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

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

Почему PWA? Несколько слов о преимуществах PWA

Интегрировав PWA с Drupal сайтом, вы обогащаете сайт крутыми технологиями, присущими приложениям. Это может существенно повысить позиции вашего бизнеса. Давайте сейчас поговорим в больших деталях о некоторых преимуществах PWA:

  • Стоимость создания PWA гораздо ниже, чем стоимость создания нативного приложения.
  • Прогрессивное веб-приложение также создается быстрее, чем нативное приложение.
  • PWA может работать для всех пользователей независимо от браузера благодаря подходу прогрессивного улучшения (progressive enhancement).
  • Пользователь может легко добавлять прогрессивные веб-приложения к домашнему экрану без необходимости заходить в магазин приложений.
  • Такие приложения являются респонсивными и обеспечивают удобное использование на десктоп-устройствах, планшетах и смартфонах.
  • Дополнительные возможности вроде пуш-уведомлений прекрасно умеют привлекать внимание, увеличивая привлечения на ваш сайт.
  • Приложения PWA способны работать оффлайн или с очень медленным интернетом благодаря сервис-Воркер, что улучшает пользовательский опыт и расширяет вашу аудиторию.
  • PWA работают безопасно благодаря использованию HTTPS, что препятствует манипуляциям с данными.

Что же внутри? Компоненты PWA

Каждое прогрессивное веб-приложение содержит 3 ключевых компонента:

  • Оболочка приложения (app shell) сохраняет основные файлы JavaScript, CSS и HTML, необходимые для быстрой загрузки интерфейса вашего приложения из кэша.
  • Сервис-Воркер (service workers) — это JavaScript-файлы, которые обеспечивают загрузку ресурсов из кэша для оффлайн-пользователей, а также могут быть настроены для пуш-уведомлений и так далее.
  • Манифест веб-приложения (web manifest) — это файл manifest.json, содержащий конфигурацию приложения (название, цвета, логотипы и т.д.) и позволяет пользователям добавлять его к домашнему экрану.

Как добавить PWA в Drupal

Как известно, Drupal имеет модуль для любой цели. Интеграция прогрессивного веб-приложения — не исключение. Такая интеграция может быть осуществлена с помощью Drupal-модуля Progressive Web App.

Drupal модуль Progressive Web App

Модуль Progressive Web App добавляет функциональность PWA в Drupal-сайта без осложнений. Он обеспечивает стандартные настройки, а JS-разработчики могут добавлять сервис-Воркер для дальнейшей кастомизации поведения PWA.

Вот некоторые опции этого модуля для интеграции Drupal и PWA:

  • Модуль содержит сервис-Воркер для кэширования и работы оффлайн. Когда он активен, он помогает страницам быстрее загружаться. Сервис-Воркер отвечает за оперативную подачу файлов из кэша. Среди дополнительных «секретов» — использование резервных картинок для некэшированных изображений.
  • Этот Drupal создает гибкий в настройке файл manifest.json с необходимыми метаданными. Он дает возможность появляться подсказке «add to home screen» в браузерах, которые поддерживают его.
  • Пользователи сайта могут настраивать и редактировать манифест через веб-интерфейс на Drupal-сайте.
  • Другие модули на Drupal-сайте способны вносить свои модификации в манифест.

Страница настроек модуля доступна по адресу admin / config / pwa / settings, где нужно заполнить необходимые данные в манифест или менять дефолтные данные (название приложения, описание, язык по умолчанию, стартовый URL, цвета темы и фона, и многое другое). Страница также содержит настройки сервис-Воркер вашего PWA, из коробки ответственный за кэширования.

Системные требования к работе с модулем Progressive Web App

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

  • Версия PHP на сервере должна быть 7.2 выше. Создатели модуля планируют дальнейшее повышение минимальных требований к PHP согласно новым релизами языка программирования.
  • Ваш сервер должен поддерживать безопасный обмен данными по протоколу HTTPS. Это рекомендация Консорциума Всемирной паутины.

_


0 комментариев

Добавить комментарий