Все о прогрессивных веб-приложениях и их реализации в Drupal 9

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

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

Особенности нативных мобильных приложений

• Это приложения для конкретной платформы. Это также означает, что их нужно перестраивать для каждой новой платформы (iOS, Android).
• Нужно скачать.
• Обычно сверхбыстрый.
• Богатый набор функций и возможностей.
• Может легко вписаться в любое устройство и чувствовать себя его частью.
• Может работать в автономном режиме.
• Они могут легко получить доступ к данным устройства, аппаратному обеспечению устройства и локальной файловой системе.
• Дороже в разработке, обслуживании и обновлении.
• Предварительно одобрены для обеспечения безопасности и могут быть загружены в магазинах приложений.
• Поисковым системам сложно сканировать.

Особенности веб-приложений

• Не зависит от платформы. Все, что вам нужно, это браузер для доступа к ним. Поддерживает большинство современных браузеров. Не нужно скачивать.
• Нет специального SDK для их разработки. Фронтенд разрабатывается с использованием HTML, CSS, JavaScript и стека LAMP или MEAN для бэкэнда.
• Нет необходимости обновлять. Меньшие затраты на разработку и обслуживание.
• Хотя для этого требуется проверка подлинности, безопасность представляет собой проблему, поскольку может быть уязвима для несанкционированного доступа.
• Они не работают в автономном режиме и могут работать медленнее, чем собственные мобильные приложения.
• Их нет в магазинах приложений, поэтому обнаружить их будет сложнее.

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

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

Progressive Web Apps - это идеальное сочетание преимуществ нативных приложений и веб-приложений. Используя современные веб-возможности, прогрессивные веб-приложения (PWA) могут предоставлять пользователям возможности, подобные приложениям. Он сочетает в себе функции, предлагаемые большинством современных браузеров, с преимуществами мобильного взаимодействия. Вы можете создавать очень сложные и устанавливаемые приложения, похожие на нативные. Поскольку сейчас веб-сборка поддерживается большинством браузеров, PWA можно создавать на языках по выбору разработчика, что значительно увеличивает объем и гибкость предлагаемых функций.

Особенности прогрессивных веб-приложений

• Они не зависят от платформы и устройства. Прекрасно работает в любом браузере.
• Они быстро загружаются и очень надежны (даже при низкой скорости интернета). Прокрутка очень плавная и плавная.
• Может работать и в автономном режиме.
• Можно включить нативные push-уведомления в виде приложений.
• Может получать доступ к оборудованию и данным устройства, например к собственным приложениям.
• Ярлыки можно добавить на главный экран пользователя (вместо их загрузки)
• Нет необходимости в сложных установках. Могут легко делиться URL-адресами.
• Отзывчивый на всех устройствах.
• Их легче и быстрее разрабатывать. Обслуживание также простое.

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

• Должен быть запущен через HTTPS.
• Должен включать Service Worker - Service Worker - это скрипт (javascript), который запускается через https в браузере и обеспечивает доступ браузера. Он предоставляет встроенные функции, похожие на приложения, такие как автономная доставка контента, push-уведомления и т. Д.
• Должен иметь манифест веб-приложения - файл JSON, содержащий метаданные с информацией о веб-приложении, такой как имя, описание, автор и т. Д. Это также полезно для поисковой оптимизации.

Модуль PWA Drupal - Как создавать прогрессивные веб-приложения с помощью Drupal 9 (и 8)

Модуль Drupal PWA легко установить, он поставляется с Service Worker (для кэширования и других функций, подобных автономным приложениям) и Manifest.js, которые вы можете настроить. Однако вам необходимо убедиться, что у вас установлен SSL, прежде чем вы начнете процесс установки PWA. Если ваши требования чрезвычайно специфичны с множеством настроек, вы можете разработать PWA, используя интерфейсные фреймворки, такие как Angular или React, и настроить своего собственного Service worker.

Установка модуля PWA Drupal 9

В Drupal 7 установить модуль Progressive Web App Drupal было так же просто, как загрузить и включить модуль. Вы можете создать файл manifest.js через форму конфигурации и проверить его. Однако в Drupal 9 мы не можем интегрировать эту функциональность напрямую, просто включив модуль PWA. Причина в том, что он не дает вам возможности настроить файл manfest.js.

1. Установите модуль, загрузив и включив модуль PWA Drupal.

2. Для Drupal 9 примените этот патч

3. После этого перейдите к конфигурации -> ПРОГРЕССИВНОЕ ВЕБ-ПРИЛОЖЕНИЕ -> Настройки PWA и добавьте необходимую информацию.

Сервисный работник

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

Manifest.json

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

Файл будет добавлен в тег заголовка вашей индексной страницы.
<link rel = "manifest" href = "/manifest.json">

На изображении ниже показан параметр «Добавить на главный экран». Когда вы выбираете эту опцию, на главном экране будет создан значок.