Прогресивні веб-додатки (PWA): інтеграція з Drupal

25.03.2020
Прогресивні веб-додатки (PWA): інтеграція з Drupal
Автор:

Кожен власник бізнесу сьогодні прагне бути найкраще представленим в цифровому світі, забезпечуючи цікавий та зручний продукт як для користувачів десктоп-пристроїв, так і мобільної аудиторії. Як варіант, багато хто обирає створення мобільного додатку. Однак, задача висококласних компаній з веб-розробки — пропонувати альтернативи до будь-яких ідей. 

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

Що таке прогресивний веб-додаток (PWA)?

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

Progressive web app example

Чому PWA? Дещо про переваги PWA

Інтегрувавши PWA з Drupal-сайтом, ви збагачуєте сайт крутими технологіями, властивими додаткам. Це може внести суттєво підвищити позиції вашого бізнесу. Давайте зараз поговоримо в більших деталях про деякі переваги PWA:

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

Що ж всередині? Компоненти PWA

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

  1. Оболонка додатку (app shell) зберігає основні файли JavaScript, CSS та HTML, необхідні для швидкого завантаження інтерфейсу вашого додатку з кешу.
  2. Сервіси-воркери (service workers) це JavaScript-файли, які забезпечують завантаження ресурсів з кешу для оффлайн-користувачів, а також можуть бути налаштовані для пуш-сповіщень і так далі.
  3. Маніфест веб-додатку (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 module in Drupal

Progressive Web App module in Drupal

Progressive Web App module in Drupal

Системні вимоги до роботи з модулем Progressive Web App

Щоб використовувати цей модуль для інтеграції PWA, потрібно забезпечити дотримання наступних вимог:

  1. Версія PHP на сервері повинна бути 7.2 і вищою. Творці модуля планують подальше підвищення мінімальних вимог до PHP згідно з новими релізами мови програмування.
  2. Ваш сервер повинен підтримувати безпечний обмін даними за протоколом HTTPS. Це рекомендація Консорціуму Всесвітньої павутини.

Наша команда допоможе вам з інтеграцією PWA

Якщо ви зацікавлені в швидкому, цікавому та безпечному PWA для Drupal-сайту, наша команда з Drupal-розробки готова взятися за втілення цієї ідеї.

Ми проведемо правильну інтеграцію PWA і налаштуємо його поведінку в точності з вашими вимогами, включно з написанням необхідних сервіс-воркерів. Крім того, ми подбаємо про виконання технічних вимог до інтеграції (оновимо вам PHP або переведемо сайт на HTTPS, якщо це досі не зроблено).

Давайте обговоримо деталі успішної інтеграції PWA з Drupal-сайтом. Спробуйте прогресивний веб-додаток і нехай ваш бізнес прогресує!

Голосів: 1 Рейтинг: 5

Також по темі

1

Повний гайд із переходу на Drupal 9 і все інше, що ви хотіли знати про майбутній реліз. 

2

Якщо у вас магазин на Ubercart, давайте поговоримо, чому варто розглянути міграцію з Ubercart на Drupal Commerce. Вона допоможе збагатити функціональність вашого магазину, дати йому впевненість у...

3

Drupal рухається в майбутнє і впроваджує все більше інноваційних технологій. Тож лідери у високих технологіях довіряють Друпалу свої сайти. Drupal рухається в майбутнє і впроваджує все більше...

4

Великим компаніям часто потрібен більш ніж один сайт — їм потрібна «колекція» споріднених сайтів, якою було б легко керувати. Для цього існує Drupal-мультисайтинг, який набув популярності серед...

5

Drupal дозволяє створювати сайти набагато швидше і дешевше завдяки дистрибутивам. Готові дистрибутиви в галузі комерції — один із багатьох аргументів на користь того, що...

Subscribe to our blog updates