Progressive Web Apps (PWA): webová aplikace s možnostmi nativní appky

Vaši zákazníci chtějí rychlou, spolehlivou aplikaci na telefonu – ale nechcete je nutit k instalaci z App Store. Progressive Web Apps (PWA) nabízejí třetí cestu: webová stránka, která se chová jako mobilní aplikace. Bez App Store, bez poplatků za distribuci, s jednou kódovou základnou.

Co je Progressive Web App?

Progressive Web App je webová aplikace, která splňuje sadu technických kritérií umožňujících:

• Instalaci na domovskou obrazovku zařízení (bez App Store)
• Offline fungování nebo fungování při nestabilním připojení
• Push notifikace – i když uživatel nemá otevřený prohlížeč
• Rychlé načítání díky chytrému cachování
• Nativní UX – celá obrazovka bez prohlížečových ovládacích prvků

PWA není nová technologie jako taková – je to kombinace existujících webových technologií (Service Workers, Web App Manifest, HTTPS) použitá specifickým způsobem.

Klíčové technologie PWA

Service Worker

Service Worker je JavaScript skript, který běží na pozadí prohlížeče, nezávisle na stránce. Umí:

• Zachytávat síťové požadavky a obsluhovat je z cache
• Fungovat offline (zobrazit cachedový obsah)
• Přijímat push notifikace ze serveru
• Provádět background sync (odeslat data, jakmile je připojení obnoveno)

// Základní service worker - cachování souborů
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll(['/index.html', '/styles.css', '/app.js']);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

Web App Manifest

JSON soubor definující, jak se PWA zobrazuje při instalaci:

{
  "name": "Můj E-shop",
  "short_name": "Eshop",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    {"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"},
    {"src": "/icon-512.png", "sizes": "512x512", "type": "image/png"}
  ]
}

HTTPS

PWA vyžadují HTTPS – bez zabezpečeného připojení Service Workers nefungují. To je ale v roce 2026 standard pro každý web.

Výhody PWA

Pro uživatele

• Rychlost – cachované zdroje se načítají okamžitě, i při pomalém připojení
• Offline přístup – prohlíží položky, čte obsah i bez internetu
• Menší datová spotřeba – načítají se pouze změny, ne celá stránka
• Push notifikace – informace o slevách, stavu objednávky, novém obsahu
• Žádná instalace z obchodu – jednoduché přidání na domovskou obrazovku

Pro firmy

• Nižší náklady – jedna kódová základna místo web + iOS app + Android app
• Žádné poplatky App Store (Apple bere 15–30 % z nákupů v nativních appkách)
• Automatické aktualizace – uživatel má vždy aktuální verzi bez nutnosti manuálního update
• SEO přívětivost – PWA jsou indexovatelné vyhledávači, na rozdíl od nativních appek
• Lepší konverze – studie ukazují zvýšení konverzí u e-shopů po implementaci PWA

Nevýhody PWA

• Omezené API na iOS – Apple historicky omezoval možnosti PWA. iOS 16.4+ přidal podporu push notifikací, ale stále existují limity oproti nativním appkám.
• Nativní funkce – přístup k Bluetooth, NFC, kontaktům nebo pokročilým kamerovým funkcím je omezený
• Instalovatelnost – „přidání na domovskou obrazovku" je méně intuitivní než stažení z App Store
• Pokročilá grafika – hry a AR aplikace stále potřebují nativní výkon

Kdy PWA, kdy nativní aplikace?

PWA se hodí pro: e-shopy, zpravodajské weby, firemní intranetové aplikace, nástroje pro produktivitu, portály zákaznické podpory.

Nativní appka se hodí pro: hry, AR/VR aplikace, aplikace využívající pokročilé HW funkce (NFC platby, biometrie), aplikace s high-performance grafikou.

Příklady úspěšných PWA

• Twitter Lite – 65 % nárůst zobrazených stránek na relaci, 75 % nárůst odeslaných tweetů
• Pinterest PWA – 60 % nárůst engagement, 44 % nárůst příjmů z reklamy
• Starbucks PWA – 2× více objednávek přes web než přes aplikaci

Závěr

PWA je zralá technologie, která dává smysl pro velkou část webových projektů – zejména e-shopy a aplikace, kde instalace nativní appky by zbytečně zvyšovala tření. Pokud váš web slouží hlavně mobilním uživatelům, stojí za to posoudit, zda PWA nejsou tou správnou cestou.

Zdroje

• web.dev: Progressive Web Apps
• MDN: Service Workers
• Google Developers: PWA Checklist