+38 067 532 01 40
Написати нам

PWA

Робимо з сайту застосунок, який встановлюється на екран телефона: маніфест, service worker, офлайн-кеш і пуш-сповіщення. Без публікації в магазинах.
Замовити проєкт

Що входить у розробку PWA

Працюємо поверх наявного сайту: додаємо маніфест, service worker і сповіщення, не переписуючи проєкт заново. Код лишається у вашому репозиторії.

Web App Manifest і встановлення

Іконки під усі розміри екранів, назва, кольори, екран запуску й режим без адресного рядка. Саме цей файл робить сайт таким, що його пропонують встановити.

ManifestІконкиВстановлення

Service worker і офлайн-режим

Оболонку сайту й статику кешуємо наперед, дані тягнемо з мережі з підстраховкою кешем. Без звʼязку людина бачить збережені сторінки, а не помилку браузера.

Service workerОфлайнКеш

Пуш-сповіщення

Підписка через Web Push, сегменти й сценарії: покинутий кошик, статус замовлення, надходження товару. Запит на дозвіл показуємо після дії користувача, а не на першому екрані.

Web PushСегменти

Швидкість повторних візитів

Друге відкриття йде з кешу, тому інтерфейс зʼявляється майже миттєво навіть на слабкій мережі. Це видно в мобільних показниках Core Web Vitals.

КешCore Web Vitals

PWA поверх наявного сайту

Працює на WordPress, OpenCart чи самописному проєкті. Переносити контент і міняти CMS не потрібно — змінюється шар доставки файлів, а не сайт.

WordPressOpenCartІнтеграція

Вимірювання встановлень

Події встановлення, запуску з іконки й реакції на пуші передаємо в GA4. Видно не лише скільки людей поставили застосунок, а скільки ним справді користуються.

GA4Події

Результати наших клієнтів

Ми будуємо партнерства, а не збираємо клієнтів — і цифри говорять самі за себе: середній термін співпраці становить 5 років, а фінансові результати наших партнерів ростуть від кварталу до кварталу.

Відгуки

Ми будуємо партнерства, а не збираємо клієнтів — і цифри говорять самі за себе: середній термін співпраці становить 5 років, а фінансові результати наших партнерів ростуть від кварталу до кварталу.

Як ми працюємо

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

Спершу швидкий сайт, потім PWA

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

Кеш із версіями

Найчастіша помилка впровадження — користувач бачить стару ціну, бо service worker віддає збережену копію. Версіонування кешу закладаємо одразу.

Не вмовляємо встановити

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

Замовити консультацію або аудит

Розкажіть про завдання — підберемо рішення й покажемо, як воно рахується в цифрах. Консультація безкоштовна, без зобовʼязань.
Помилка: Переконайтеся, що всі необхідні поля правильно заповнені і повторіть спробу

Коли PWA вигідніша за застосунок

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

01

Одна кодова база

Сайт і застосунок — той самий проєкт. Не потрібні окремі розробники під iOS та Android і синхронізація трьох версій функціоналу.

02

Оновлення без модерації

Виправлена ціна чи текст зʼявляються в користувача при наступному відкритті. Не треба чекати перевірки магазину й переконувати людей оновити застосунок.

03

Контент лишається в пошуку

Сторінки PWA — це звичайні URL, які індексуються й приводять трафік. Вмісту нативного застосунку в пошуковій видачі не існує.

Як ми впроваджуємо PWA

Починаємо не з маніфеста, а з питання, що саме користувач має робити без мережі. Від відповіді залежить стратегія кешу.

01

Аудит сайту

Перевіряємо HTTPS, швидкість, мобільну верстку й те, які сторінки взагалі має сенс кешувати. Якщо сайт повільний, спершу лагодимо це.

02

Сценарій офлайну

Домовляємось, що доступне без мережі: каталог, картка товару, контакти, збережені документи. Решта показує зрозумілу сторінку-заглушку замість помилки браузера.

03

Маніфест, service worker, кеш

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

04

Перевірка й запуск

Тестуємо встановлення на Android та iOS, режим без мережі й перехід на нову версію. Далі підключаємо пуші й події в аналітиці.

Gift
Показати промокод

Додаткові послуги

Усі компетенції в штаті — швидке вирішення комплексних задач без втрати якості та часу на комунікацію з підрядниками.

Сайти

Landing Page

E-commerce

Рекламні креативи

Впровадження CRM

Часті питання про PWA

Те, що запитують до старту робіт.

01

Чим PWA відрізняється від адаптивного сайту?

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

02

PWA замінить нам нативний застосунок?

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

03

Як PWA поводиться на iPhone?

Встановлюється лише вручну через Safari: «Поділитися» → «Додати на початковий екран». Веб-пуші вмикаються після цього кроку. Кеш система може очистити, якщо застосунок довго не відкривали, тож офлайн-сценарій на iOS менш надійний, ніж на Android.

04

Чи можна опублікувати PWA в Google Play чи App Store?

У Google Play — так, через обгортку Trusted Web Activity. З App Store складніше: Apple відхиляє застосунки, які лише відкривають сайт, тому для магазину Apple частіше потрібна повноцінна нативна розробка.

05

Скільки коштує підтримувати PWA?

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

06

PWA впливає на позиції в пошуку?

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

07

Скільки часу займає розробка?

Залежить від стану сайту й обсягу офлайн-сценарію. Базовий набір — маніфест, кеш статики й офлайн-сторінка — робиться помітно швидше, ніж офлайн-каталог із синхронізацією даних. Строк називаємо після аудиту.

08

Ми на WordPress. Плагін не зробить це сам?

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

Розробка PWA: сайт, що працює як застосунок

Що таке PWA простими словами

PWA (Progressive Web App) — це звичайний сайт, якому додали три речі: іконку на домашньому екрані, роботу без інтернету й пуш-сповіщення. Користувач відкриває його з екрана телефона, як застосунок, але завантажувати нічого не треба — усе працює через браузер.

Технічно це кілька файлів поверх наявного сайту. Web App Manifest описує назву, іконки, кольори й те, що застосунок відкривається без адресного рядка. Service worker — скрипт, який стоїть між сторінкою й мережею: він перехоплює запити й віддає збережені копії, коли звʼязку немає. Обовʼязкова умова — HTTPS.

Чим PWA відрізняється від сайту й від застосунку

Порівняння за тими пунктами, які реально впливають на рішення й на бюджет.

КритерійЗвичайний сайтPWAНативний застосунок
Встановленнянемаєіконка на екран просто з браузерачерез App Store чи Google Play
Без мережіпорожня сторінкапрацює те, що в кешіпрацює
Пуш-сповіщеннялише в браузерітак, з обмеженнями на iOSтак
Оновленняодразуодразу, після зміни версії кешуреліз і модерація магазину
Доступ до залізамінімальнийкамера, геолокація, файлиповний
Кодова базаоднаоднаокрема під iOS та Android
Пошукова видачаіндексуєтьсяіндексуєтьсяні

Обмеження на iOS, про які варто знати заздалегідь

Android пропонує встановлення сам: браузер показує підказку, і людині достатньо погодитись. На iPhone сайт треба відкрити в Safari й натиснути «Додати на початковий екран» — системного банера немає, і частина аудиторії просто не знає про цю дію. Веб-пуші на iOS працюють тільки після цього кроку, а кеш система може очистити, якщо застосунок довго не відкривали.

Коли PWA замовляти не варто

  • потрібен Bluetooth, NFC-оплата чи фонове відстеження маршруту — тут виграє нативний застосунок;
  • аудиторія шукає вас саме в App Store й сприймає присутність у магазині як доказ серйозності;
  • сайт повільний або незручний — PWA цього не лікує, вона консервує проблему в кеші;
  • трафік разовий: люди приходять із реклами, купують один раз і не повертаються. Іконку на екран нема кому ставити.

PWA чи новий сайт

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

З ким ми працювали

Adcore працює з 2014 року, у штаті 24 співробітники, понад 600 завершених проєктів. Серед клієнтів — Hyundai, Heineken, Kärcher, CLAAS, Hilti, PepsiCo, «Сільпо», Materia Medica, житлові комплекси й мережі клінік. Кейси зібрані в портфоліо.