PWA — це вебзастосунок, побудований на звичайних веб-технологіях (HTML, CSS, JavaScript), який поводиться як нативний мобільний чи десктопний додаток. Користувач відкриває його у браузері, але може встановити на пристрій, працювати офлайн та отримувати сповіщення.
Service Worker кешує ресурси — застосунок працює навіть без мережі.
Додається на домашній екран без магазину застосунків.
Повертають користувачів навіть при закритому застосунку.
Миттєве завантаження завдяки кешу та оптимізації ресурсів.
Обовʼязкове захищене зʼєднання для всіх можливостей.
Один код для мобільних, планшетів і десктопів.
Будь-який PWA тримається на трьох обовʼязкових компонентах.
JS-скрипт, що працює у фоні окремо від сторінки. Перехоплює мережеві запити, кешує відповіді й забезпечує офлайн-режим та фонову синхронізацію.
JSON-файл з метаданими: назва, іконки, кольори, режим відображення. Саме він дозволяє встановити застосунок на пристрій.
Захищене зʼєднання — обовʼязкова умова. Без нього Service Worker і більшість можливостей PWA не активуються.
Конфігураційний JSON, що описує, як застосунок виглядає після встановлення.
{
"name": "PWA Demo — Олександр Блажейко",
"short_name": "PWA Demo",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#0B1F2A",
"theme_color": "#0D9488",
"orientation": "portrait",
"lang": "uk",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
]
}Скрипт-посередник між застосунком і мережею — кешує ресурси й дає офлайн.
const CACHE = "pwa-cache-v1";
const ASSETS = ["/", "/index.html", "/app.js", "/style.css"];
// 1. Встановлення — кешуємо оболонку застосунку
self.addEventListener("install", (e) => {
e.waitUntil(
caches.open(CACHE).then((c) => c.addAll(ASSETS))
);
});
// 2. Активація — видаляємо старі кеші
self.addEventListener("activate", (e) => {
e.waitUntil(
caches.keys().then((keys) =>
Promise.all(keys
.filter((k) => k !== CACHE)
.map((k) => caches.delete(k)))
)
);
});
// 3. Запити — спершу кеш, інакше мережа
self.addEventListener("fetch", (e) => {
e.respondWith(
caches.match(e.request).then(
(hit) => hit || fetch(e.request)
)
);
});Два рядки у HTML та реєстрація Service Worker зв'язують усе разом.
<link rel="manifest" href="/manifest.json">
<meta name="theme-color"
content="#0D9488">if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("/service-worker.js")
.then((reg) =>
console.log("SW зареєстровано", reg.scope))
.catch((err) =>
console.error("Помилка SW", err));
}| Критерій | PWA | Нативний | Веб-сайт |
|---|---|---|---|
| Встановлення на пристрій | ✓ | ✓ | ✗ |
| Робота офлайн | ✓ | ✓ | ✗ |
| Публікація у store | Не обовʼязково | Обовʼязково | ✗ |
| Вартість розробки | Низька | Висока | Низька |
| Оновлення | Миттєве | Через store | Миттєве |
| Доступ до апаратури | Частковий | Повний | Обмежений |
Великі продукти переходять на PWA заради швидкості та охоплення.
Інтернет-магазини: швидкі покупки, кошик офлайн, push про знижки.
Читання статей офлайн і миттєве завантаження стрічки.
Музика, відео, соцмережі з нативним відчуттям у браузері.
Сучасні Web API дають PWA доступ до можливостей, що раніше були лише в нативних застосунків. Два проєкти показують це наживо.
Інтерактивний showcase можливостей PWA, який сам є встановлюваним PWA. Відкрийте його на своєму пристрої — і побачите наживо, які API підтримує саме ваш браузер.
Демонструє: камеру й геолокацію, Bluetooth і NFC, доступ до контактів і файлової системи, WebAuthn (відбиток / passkey), push-сповіщення тощо.
whatpwacando.today ↗Каталог від Chrome із реальними застосунками, що використовують API з ініціативи Project Fugu — зусиль закрити розрив у можливостях між вебом і нативом.
Охоплює API: File System Access, Web Bluetooth, WebUSB, Web Serial, Web HID, Web NFC, Badging, Window Controls Overlay та десятки інших.
developer.chrome.com · fugu-showcase ↗PWA поєднує охоплення вебу зі зручністю нативних застосунків. Це швидкий, надійний і встановлюваний продукт з однією кодовою базою — оптимальний вибір для сучасних веб-проєктів.