Aplikacja PWA dla serwisu sprzedaży i leasingu samochodów
Natywne doświadczenie mobilne bez sklepu z aplikacjami - jeden codebase obsługuje web, PWA i Google Play dzięki Next.js, Service Worker i Firebase FCM.
- Klient
- samochodowy.pl
- Branża
- Automotive / finanse - pośrednictwo leasingowe i sprzedaż pojazdów
- Zakres
- Budowa Progressive Web App jako kanału mobilnego serwisu - instalowalna z przeglądarki, z powiadomieniami push, działająca na Android i iOS
- Wykorzystane technologie
- Next.jsPWAFirebase FCMSymfonyAPI Platform
Rezultaty
Samochodowy.pl to serwis pośrednictwa sprzedaży i leasingu - użytkownicy przeglądają oferty, porównują parametry finansowania i składają zapytania o konkretne pojazdy. Rosnący ruch mobilny nie przekładał się jednak na dobre doświadczenie: każde przejście między stronami wymagało pełnego ładowania, nie było możliwości zainstalowania na ekranie głównym, a kupujący nie dostawali żadnych powiadomień o zmianach w obserwowanych ofertach.
Zaproponowaliśmy podejście PWA jako strategię „jeden codebase, wiele kanałów" - zamiast budować osobną natywną aplikację iOS/Android, nowa platforma na Next.js jest od razu budowana z pełnym wsparciem standardów Progressive Web App. Wybór był podyktowany charakterystyką projektu: serwis z ofertami samochodów to content i wyszukiwanie - kategoria, w której PWA z SSR/SSG i Service Worker dorównuje natywnym aplikacjom, a w kilku wymiarach je przewyższa.
Dlaczego PWA, a nie natywna aplikacja?
To pytanie pada regularnie przy projektach automotive. Nasza odpowiedź w tym przypadku opierała się na trzech argumentach.
Charakter produktu. Serwis z ofertami to content-heavy browsing - przeglądanie, filtrowanie, porównywanie. PWA nie ustępuje natywnym aplikacjom z perspektywy UX w tej kategorii. Inaczej byłoby przy aplikacji z kamerą, mapami w trybie offline czy intensywnym użyciem sensorów urządzenia.
Koszt utrzymania. Natywne aplikacje iOS i Android to dwa osobne projekty, dwa osobne procesy release'u, dwa osobne zestawy bugów. Przy platformie, która jest aktywnie rozwijana, koszt synchronizacji trzech codebases byłby nieproporcjonalny do korzyści.
SEO jako priorytet. Serwis z ogłoszeniami samochodowymi żyje z ruchu organicznego. Natywna aplikacja nie jest indeksowana przez Google - PWA jest. Dla klienta, który buduje pozycję w wynikach wyszukiwania na frazy leasingowe i modelowe, to argument rozstrzygający.
Diagnoza
Mobilny ruch bez mobilnego doświadczenia - 3 bolączki
Strona webowa bez doświadczenia mobilnego
Ładowanie strony przy każdej nawigacji, brak możliwości zainstalowania na ekranie głównym i brak powiadomień push - użytkownik mobilny miał gorsze doświadczenie niż desktopowy.
Dwa codebasy to dwa razy więcej pracy
Utrzymywanie oddzielnej natywnej apki mobilnej przy równoległym rozwoju platformy webowej generuje podwójny koszt każdej zmiany funkcjonalnej.
Brak push notifications dla kupujących
Użytkownik, który dodał ofertę do ulubionych lub zapytał o leasing, nie dostawał powiadomień o zmianach ceny, dostępności ani odpowiedziach od handlowca.
Rozwiązanie
Jeden codebase, trzy kanały dystrybucji
Web App Manifest
Plik konfiguracyjny opisujący aplikację dla przeglądarki: ikona, nazwa, kolor splash screena, tryb standalone bez paska URL. Użytkownik Chrome i Safari widzi prompt 'Dodaj do ekranu głównego'.
Service Worker
Skrypt działający w tle: cachowanie zasobów statycznych, obsługa trybu offline dla wcześniej odwiedzonych stron, interceptowanie requestów i serwowanie z cache przy braku połączenia.
SSR/SSG na Next.js
Renderowanie HTML po stronie serwera - szybki First Contentful Paint na słabym łączu mobilnym, pełna indeksowalność przez Google i brak białego ekranu przy pierwszym załadowaniu.
Firebase FCM
Silnik powiadomień push dla użytkowników PWA i Google Play. Backend Symfony wysyła eventy do Firebase - zmiana ceny, odpowiedź handlowca, dostępność oferty - Firebase dostarcza powiadomienie niezależnie od stanu aplikacji.
Jak pracowaliśmy
PWA jako naturalne wyjście z decyzji o Next.js
Mobile-first przy każdej decyzji
PWA nie była traktowana jako osobny projekt. Każda decyzja architektoniczna platformy webowej była weryfikowana pod kątem mobilnym: czas ładowania na 4G, działanie na 375px, szybkość endpointów przy słabym zasięgu.
Role i uprawnienia jako pierwsza decyzja
System obsługuje różnych użytkowników - kupujących na platformie i handlowców w CRM. Definiowanie trybu PWA per rola (co dostaje push notification, jaki manifest) zapobiegło chaosowi przy rosnącej liczbie funkcji.
Timing reupload w Google Play
Kluczowe było wybranie właściwego momentu na reupload aplikacji - zbyt wcześnie groziło awariami u istniejących użytkowników, za późno zostawiało ich z niekompatybilną wersją. Task był powiązany z kamieniem milowym stabilności nowego API.
Integracja FCM jako osobny tor
Firebase Cloud Messaging miał własne discovery i wycenę - osobna integracja pozwoliła zarządzać ryzykiem bez blokowania głównego backlogu platformy.
Efekty
Jeden codebase, zero kompromisów mobilnych
- ✓ Jeden codebase obsługuje web, PWA i aplikację mobilną - każda zmiana na platformie trafia jednocześnie do wszystkich kanałów bez osobnego procesu wydawania aplikacji
- ✓ Użytkownicy mobilni mogą zainstalować aplikację bez sklepu - prompt instalacji z przeglądarki eliminuje tarcie związane z wyszukiwaniem apki w App Store lub Google Play
- ✓ Push notifications jako nowy kanał komunikacji z kupującym - handlowiec odpowiada na zapytanie o leasing, użytkownik dostaje powiadomienie na telefonie nawet przy zamkniętej aplikacji
- ✓ SEO bez kompromisów mobilnych - SSR/SSG zapewnia pełną indeksowalność ogłoszeń samochodowych przez Google, co bezpośrednio przekłada się na ruch organiczny na mobile
- ✓ Przyszłościowa architektura - geolokalizacja salonów, skaner VIN czy porównywarka offline nie wymagają osobnego projektu mobilnego, dzieje się to w ramach istniejącego Next.js
Zobacz dalej
Kolejne realizacje
Symfony
Dedykowany CRM dla serwisu sprzedaży i leasingu samochodów
Od Exceli do dedykowanego CRM dla leasingu: 6 modułów, integracja z e-podpisem Autenti i KSeF API, pełna analityka sprzedażowa dla samochodowy.pl.
Data Layer
Scortea.pl – nowoczesna drogeria online w 8 tygodni
Scortea.pl – nowoczesna drogeria i apteka online. Endora wdrożyła sklep WooCommerce, zoptymalizowała SEO i skonfigurowała Data Layer w 8 tygodniach.
Masz konkretne wyzwanie?
Nie czytaj o tym - porozmawiajmy o Twoim przypadku.