Progressive Web Apps (PWA) to strony internetowe, które działają jak aplikacje natywne — można je instalować na ekranie głównym, działają offline i wysyłają powiadomienia push. Dla e-commerce PWA zwiększa konwersję mobile o 30-50% i retencję o 50-100%.
Dlaczego PWA w e-commerce
Badania Google pokazują, że użytkownicy PWA spędzają 2x więcej czasu na stronie i mają o 65% wyższą konwersję niż użytkownicy zwykłego mobile web. Alibaba zwiększyła konwersję o 76% po wdrożeniu PWA.
Korzyści PWA dla sklepu:
- Instalacja — ikona na ekranie głównym, bez App Store
- Offline — przeglądanie katalogu bez połączenia
- Push notifications — powiadomienia o promocjach i zamówieniach
- Szybkość — service worker cacheuje zasoby, LCP < 2s
- Jedna baza kodu — brak osobnej aplikacji iOS/Android
| Cecha | Mobile web | PWA | Aplikacja natywna |
|---|---|---|---|
| Instalacja | nie | tak | App Store |
| Offline | nie | tak | tak |
| Push | nie | tak | tak |
| SEO | tak | tak | nie |
| Koszt | 0 | niski | wysoki |
| Update | natychmiast | natychmiast | recenzja Apple |
Manifest — fundament PWA
PWA wymaga pliku manifest.json z metadanymi aplikacji. Link w HTML: link rel=manifest href=/manifest.json.
Kluczowe pola:
- display: standalone — ukrywa pasek przeglądarki, wygląda jak app
- theme_color — kolor paska statusu na mobile
- icons — min. 192px i 512px (Apple Touch Icon 180px osobno)
Service Worker — mózg PWA
Service Worker to skrypt JavaScript działający w tle, niezależnie od strony. Odpowiada za cache, offline i push notifications.
Podstawowy service worker (cache-first): Rejestrowanie w HTML: if serviceWorker in navigator: navigator.serviceWorker.register(/sw.js)
Strategie cache:
- Cache-first — najpierw cache, potem sieć (dla statycznych)
- Network-first — najpierw sieć, potem cache (dla dynamicznych)
- Stale-while-revalidate — cache natychmiast, aktualizacja w tle
Dla e-commerce:
- Strona główna i kategorie do network-first (aktualne produkty)
- CSS/JS/obrazy do cache-first (szybkość)
- Koszyk i checkout do tylko online (bezpieczeństwo)
- Offline fallback do strona Jesteś offline, wroc pozniej
Push notifications
Push notifications w PWA pozwalają wysyłać powiadomienia do zainstalowanych aplikacji, nawet gdy użytkownik nie ma otwartej strony.
Konfiguracja:
- Generowanie VAPID keys (npm web-push)
- Subskrypcja użytkownika: navigator.serviceWorker.pushManager.subscribe()
- Wysyłanie z serwera: web-push library (Node.js/PHP)
- Wyświetlanie w service worker: self.registration.showNotification()
Scenariusze e-commerce:
- Status zamówienia — Twoja paczka wysłana przez InPost
- Promocje — -20% na całą kategorię tylko dziś
- Porzucone koszyki — Dokończ zakup z -10%
- Nowości — Nowa kolekcja już dostępna
Metryki: 5-15% CTR push notifications (vs 2-5% email), 20-30% konwersja z push.
Instalacja na ekranie głównym
Przeglądarka proponuje instalację PWA po spełnieniu kryteriów:
- HTTPS (obowiązkowo)
- manifest.json z name, short_name, icons, start_url, display
- Service Worker z fetch handler
- min. 1 interakcja użytkownika
Custom install prompt: nasłuchuj zdarzenia beforeinstallprompt, zapamiętaj event, wywołaj prompt() na kliknięciu własnego przycisku.
Wdrożenie PWA w WooCommerce i Shopify
WooCommerce:
- Wtyczka PWA for WP lub SuperPWA (darmowe)
- Automatyczna generacja manifest i service worker
- Uwaga: konflikty z cache — wyklucz koszyk i checkout
Shopify:
- PWA Builder (darmowe, Microsoft)
- AngryLime lub własna implementacja
- Shopify Plus: headless PWA z Shopify Storefront API
Niestandardowa PWA (headless):
- Next.js + Shopify Storefront API
- Vue.js + WooCommerce REST API
- Nuxt.js + Medusa.js (open-source e-commerce)
Audyt i testowanie PWA
Lighthouse PWA audit (w Chrome DevTools):
- Cel: 90+/100
- Sprawdza: manifest, service worker, HTTPS, offline, responsive
Testy:
- Offline mode (DevTools do Application do Service Workers do Offline)
- Install prompt (chrome://flags do bypass installability checks)
- Push notifications (DevTools do Application do Push)
Metryki sukcesu:
- Instalacje: 5-15% ruchu mobile
- Retencja D7: +30-50% vs mobile web
- Konwersja mobile: +20-40%
- Czas w aplikacji: +50-100%
Podsumowanie
PWA to najtańsza droga do aplikacji e-commerce — bez App Store, jedną bazą kodu, z SEO i offline. Zacznij od wtyczki (WooCommerce/Shopify) lub manifest + service worker dla custom. Kluczowe: HTTPS, manifest, service worker, push notifications i install prompt.