register

Розробка PWA

Назад
16
Лют 2021

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

За даними Smashing Ideas, впровадження PWA підвищує залученість клієнтів мінімум на 20%.

На прогресивні додатки переходять компанії абсолютно різних напрямків – від соцмереж (Twitter) до маркетплейсів (OLX) і служб таксі (Uber).

Далі докладніше розглянемо, що таке PWA, як воно працює і як створити прогресивний додаток.

Що таке PWA

PWA – це сайт з можливостями повноцінної програми: швидким інтерфейсом, автономною роботою, відправкою повідомлень, використанням камери і сенсорів.

PWA працює в браузері десктопів і мобільних без установки, і підтримує всі популярні операційні системи.

Коли доречно розробляти PWA

PWA варто розглядати як альтернативу мобільному додатку. Скрізь, де немає складної логіки, воно буде відмінною заміною.

Наприклад, у вигляді PWA можна зробити форму замовлення на сайті компанії по доставці води. Клієнтам не потрібно буде шукати сайт постачальника – досить запустити форму з домашнього екрану смартфона і зробити замовлення.

Особистий кабінет для інтернет-магазину теж можна виділити як PWA. В такому додатку буде зручно переглядати статуси замовлень і вирішувати інші часто повторювані завдання.

У форматі PWA можна виконати практично будь-який додаток: від B2B-порталу до форми записи в салон краси. Тому замовити розробку PWA додатка доречно у всіх випадках, коли користувач виграє від можливостей прогресивних додатків.

Переваги PWA

PWA мають переваги як для користувачів, так і для бізнесу.

Переваги для користувачів

  • Зручний інтерфейс: сторінки перемикаються миттєво, кнопки навігації та управління розташовані по нативним стандартам;
  • PWA адаптується до екранів мобільних, планшетів, ноутбуків і ПК;
  • Працює при повільному інтернеті і офлайн;
  • Працює з камерою, bluetooth, датчиками і іншим «залізом»;
  • Обмінюється даними через безпечний протокол – HTTPS;
  • Займає мало пам’яті на пристрої – в середньому до 1 Мб;
  • Іконку PWA можна додати на домашній екран смартфона разом з додатками з AppStore і Google Play.

Переваги для бізнесу

  • Можна розробити одне рішення для всіх платформ: Android, iOS, Windows, MacOS і Linux;
  • Реалізація маркетингової стратегії через push-повідомлення;
  • PWA індексується в пошукових системах;
  • Легко поширюється – досить поділитися посиланням;
  • За даними Google, для 50% користувачів зручніше купувати на сайтах, ніж завантажувати додаток.

Сюди ж можна додати і всі призначені для користувача переваги. У результаті прибуток компанії безпосередньо залежить від призначениго для користувача досвіду та її клієнтів.

 

Недоліки PWA

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

Різниця в можливостях і зручності між PWA і нативними додатками все ж є. Особливо це справедливо для iOS.
Обмеження на iOS
Apple поступово впроваджує підтримку функцій в прогресивних веб-додатках. Але на поточний момент PWA на iPhone і iPad працюють з обмеженнями.

Зокрема, PWA на iOS не підтримує:

  • Bluetooth, включаючи технологію визначення місцеположення iBeacon;
  • Сканер відбитку пальців TouchID;
  • Технологію розпізнавання особи FaceID;
  • Фреймворк для додатків доповненої реальності ARKit;
  • Висотомір;
  • Отримання інформації про батарею;
  • iOS виділяє під кеш PWA максимум 50 Мб (в більшості випадків цього достатньо);
  • Після 7 днів невикористання кеш стирається і додаток потрібно довантажувати заново;
  • Епловскій браузер, Safari, не підтримує отримання даних з датчиків руху.

У PWA на iOS є проблеми з фонової синхронізацією і push-повідомленнями. Останнє вирішується через інтеграцію сповіщень по SMS.

Також На iOS немає підтримки обробки живого потоку даних з камери. Це створює певні складнощі при скануванні QR-коду.

Як працює PWA

В основі PWA лежать 4 технології: Service Worker, App Shell, HTTPS і Web App manifest.
Service Worker
У звичайному інтернет-додатку є два шари: фронтенд і бекенд. Перший – те, що користувач бачить в браузері, другий – відповідає за логіку обробки даних на сервері.

У PWA з’являється третій шар – Service Worker. Це javascript-файл, який обробляється браузером, як і фронтенд. Але при цьому він може виконувати завдання, які традиційно вимагали підключення до сервера.

Service Working дає можливість відправляти push-повідомлення, працювати з кешем або виконувати складні операції з даними.

Service Worker зберігає запити і дані в кеші пристроя. Це дає 3 переваги:

  • прискорює роботу PWA за рахунок економії часу на передачу даних між сервером і пристроєм;
  • дає можливість працювати офлайн;
  • дозволяє проводити фонову синхронізацію.

Для пояснення останньої технології наведемо приклад.

Щоб відправити повідомлення в звичайному інтернет-додатку, вам потрібно натиснути на кнопку відправки і дочекатися, поки сервер проведе операцію. При поганому з’єднанні чекати доводиться довго. Якщо ж ви закриєте вкладку, повідомлення так і не буде відправлено.

PWA продовжує виконувати ваш запит навіть при закритому браузері. І як тільки з’являється з’єднання, додаток автоматично відправляє повідомлення (грошовий переказ, файл). Це і є фонова синхронізація.

Сумісність з браузерами

Сервіс Воркер підтримуються основними браузерами: Chrome, Firefox, Edge, Safari і Opera.

App Shell

App Shell – архітектура, при якій оболонка ( англ. Shell) сторінок PWA завантажується в кеш пристрою під час першого відвідування. При подальшому використанні програми каркас сторінок береться з локального кешу, з сервера завантажується тільки сам контент.

Така архітектура робить інтерфейс PWA порівнянним за швидкістю з нативними додатками
HTTPS

PWA працює тільки через захищений протокол – HTTPS. Дані передаються через HTTPS в зашифрованому вигляді. Тому хакерам складніше отримати до них доступ.

Щоб веб-додаток працював через HTTPS, потрібно підключити SSL-сертифікат в налаштуваннях хостингу.

Web App manifest
Це файл в якому знаходяться дані про програму: режим вікна, назва, іконка, режим вікна.

Режими вікна PWA можете бути трьох видів:

  • мінімальний UI (зліва);
  • автономний або standalone (по центру);
  • повноекранний (праворуч);

В автономному режимі PWA зовні не відрізняються від нативного мобільного додатка.

Етапи розробки прогресивного додатка

ІТ-проекти, включаючи розробку PWA, проходять через стандартні етапи:

  1. Дослідження . Тест гіпотези, дослідження ринку,розробка бізнес-завдання.
  2. Технічні вимоги. На цій стадії потрібно визначити, який тип програми будувати: сайт, PWA, нативний мобільний додаток або розробляти продукти для декількох платформ паралельно. Відмінності між різними видами додатків ми розібрали
    в цій статті .
  3. Проектування . Створення оптимальних для вирішення завдань проекту архітектури та інтерфейсу програми.
  4. Опрацювання стилю . Затвердження високоточних макетів, створення логотипів, кнопок, банерів та іншої графіки.
  5. Програмування . Написання коду для фронтенда, сервіс Воркер і бекенд.
  6. Фронтенд пишуть за допомогою HTML, CSS і Javascript.Service-worker – це javascript файл. Тому його розробляють за допомогою JavaScript фреймворків. Наприклад, ми працюємо на Vue.js.

    Бекенд можна розробляти на будь-якій мові. Ми спеціалізуємося на Python.

  7. Тестування . На цій стадії QA-фахівці вирішують дві ключові завдання:
    1. перевіряють, що користувачі отримають якісний продукт;
    2. знаходять помилки на етапі, коли ціна їх виправлення відносно невелика;
  8. Запуск . Міграція на постійний хостинг, підключення домену та фінальні налаштування.

Питання-відповідь

Чим PWA відрізняється від SPA

SPA – односторінковий інтернет-додаток. Він може відноситися до прогресивних, якщо відповідає трьом критеріям:

  1. Надійності роботи при будь-якому стані мережі
  2. Зручному і швидкому інтерфейсі
  3. Використанню технологій PWA: Service Worker, HTTPS, App Shell і Web App Manifest.

При цьому PWA можуть бути як односторінкові так і багатосторінковими.

Різниця між PWA і мобільним додатком

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

Детальніше читайте в статті про мобільні веб-додати

Скільки коштує розробка PWA додатків

Основні компоненти формули розрахунку вартості розробки PWA додатків: кількість сторінок додатку, кількість і складність функцій і необхідність відтворення унікальних графіків.
Ми можемо безкоштовно підготувати кошторис розробки PWA по вашому проекту. Для цього зателефонуйте нам або скористайтеся формою нижче.

Ilya Smyrnov

Author: Ilya Smyrnov

Position: CEO, Business analyst

Biography: Більше 8 років займаюся аналізом бізнесів клієнтів і підвищую їх ефективність за допомогою впровадження IT-рішень.

Дякуємо за ваш інтерес!

Ми з вами зв'яжемося найближчим часом