Izrada PWA aplikacija: web aplikacije koje rade offline

Izrada PWA aplikacija pretvara web stranicu u progresivnu web aplikaciju: aplikaciju koja se učitava trenutno, radi i uz loš signal, može se instalirati na početni ekran telefona i šalje push notifikacije – sve iz jednog web koda, bez app storea između vas i vaših korisnika. Za mnoge firme to je najkraći put do „aplikacije” koju kupci zaista koriste, uz samo dio troška izrade i održavanja odvojenih iOS i Android aplikacija.

Sadržaj

U CodeWizu razvijamo progresivne web aplikacije od nule, ali i dodajemo PWA mogućnosti postojećim web stranicama, online prodavnicama i internim alatima. Osmišljavamo strategiju keširanja, pišemo i testiramo service worker, povezujemo web push na backendu, doterujemo iskustvo instalirane aplikacije i provjeravamo da sve radi kako treba na Androidu, iOS-u i desktop browserima – uključujući i ono u čemu se te platforme još uvijek razlikuju.

Usluga je namijenjena online prodavnicama čiji mobilni posjetioci odustaju zbog sporih stranica, terenskim timovima i skladištima koji rade uz nestabilnu konekciju, izdavačima i SaaS proizvodima kojima treba ponovni kontakt sa korisnicima bez objave u app storeu, te kompanijama kojima je potrebna interna aplikacija na telefonu svakog zaposlenog bez komplikacija oko upravljanja uređajima.

Kod teme izrada pwa alati otvorenog koda su prvi izbor kada odgovaraju poslu.

Izrada PWA: Ruka drži pametni telefon sa otvorenom aplikacijom za reprodukciju muzike

Offline rad uz service worker i pametno keširanje

Srce svake PWA aplikacije je service worker – skripta koju browser izvršava u pozadini, između aplikacije i mreže. Presreće zahtjeve i za svaki pojedinačno odlučuje da li će odgovor doći iz lokalnog cachea, sa mreže ili iz oba izvora. Kada je dobro urađen, ponovne posjete se učitavaju za nekoliko milisekundi, a aplikacija ostaje upotrebljiva u vozu ili u skladištu sa jednom crticom signala. Kada je loše urađen, korisnici ostaju zaglavljeni na zastarjeloj verziji sajta.

Izrada PWA kreće od sistema koji već radi, a ne od praznog šablona.

Izbor strategije keširanja prema vrsti sadržaja

Strategija	Kako radi	Najbolja za	Kompromis
Precache	Fajlovi se preuzimaju prilikom instalacije service workera	App shell: osnovni HTML, CSS, JavaScript, fontovi, offline stranica	Svaka izmjena traži novi build manifest i tok ažuriranja
Cache first	Odgovor iz cachea, a mreža samo kao rezerva	Verzionisani aseti, slike, ikone	Bez pravila isteka cache raste bez ograničenja
Network first	Prvo mreža, a cache nakon isteka zadanog vremena	HTML stranice, podaci korisničkog naloga, cijene	Sporije od cachea na nestabilnoj mreži
Stale-while-revalidate	Trenutno prikazuje keširanu kopiju i osvježava je u pozadini	Podaci kataloga, liste članaka, postavke	Korisnik tokom jedne posjete može vidjeti malo starije podatke
Network only + background sync	Šalje na server, a bez konekcije stavlja u red i pokušava ponovo	Forme, narudžbe, izvještaji sa terena	Backend endpointi moraju biti idempotentni

Kako izgleda produkcijski service worker

Service workere najčešće gradimo pomoću biblioteke Workbox, kroz vite-plugin-pwa, Angular service worker ili vlastiti build korak. Skraćeni primjer rutiranja koje koristimo:

Rad na temi izrada pwa ostaje u vašem repozitoriju i na vašoj infrastrukturi.

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { NetworkFirst, CacheFirst, NetworkOnly } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';
import { BackgroundSyncPlugin } from 'workbox-background-sync';

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(({ request }) => request.mode === 'navigate',
  new NetworkFirst({ cacheName: 'pages', networkTimeoutSeconds: 3 }));

registerRoute(({ request }) => request.destination === 'image',
  new CacheFirst({ cacheName: 'images', plugins: [
    new ExpirationPlugin({ maxEntries: 200, maxAgeSeconds: 30 * 86400 })] }));

registerRoute(({ url }) => url.pathname === '/api/orders',
  new NetworkOnly({ plugins: [new BackgroundSyncPlugin('orders')] }), 'POST');

Offline podaci, a ne samo offline stranice

Za aplikacije u kojima se podaci moraju unositi i bez interneta – kontrolne liste, potvrde dostave, nacrti narudžbi – zapise čuvamo u IndexedDB-u (preko malog wrappera poput Dexieja), označavamo ih kao neposlate i sinhronizujemo kada se konekcija vrati. U Chromium browserima to automatski radi Background Sync, a u Safariju i Firefoxu sinhronizacija se pokreće pri sljedećem otvaranju aplikacije ili na online događaj. ID koji generiše sam klijent garantuje da ponovljeni zahtjev nikada ne napravi duplikat. Isti princip smo opisali u članku o e-commerceu bez gubitka podataka i narudžbi: svaka akcija kupca je zabilježena i može se vratiti.

CodeWiz provjerava izrada pwa u produkciji, ne samo na demonstraciji.

Web push notifikacije koje korisnici zaista žele

Push notifikacije vraćaju korisnike bez emaila i bez app storea. PWA se pretplaćuje preko Push API-ja, vaš server potpisuje poruke VAPID ključevima, a push servis proizvođača browsera ih isporučuje čak i kada je aplikacija zatvorena. Web push radi na Androidu, u desktop verzijama Chromea, Edgea, Firefoxa i Safarija, te na iPhoneu i iPadu od verzije iOS 16.4 – ali na iOS-u tek kada korisnik doda aplikaciju na početni ekran.

Odluke o temi izrada pwa vežu se za ograničenje koje stvarno koči poslovanje.

Strategija traženja dozvole važnija je od koda

Najbrži način da izgubite push kanal je da dozvolu tražite čim se stranica prvi put učita. Browseri takve upite sve češće sakrivaju ili automatski blokiraju, a odluku „Blokiraj” je vrlo teško poništiti. Zato dozvolu tražimo u pravom trenutku: nakon što korisnik naruči („Obavijesti me kada paket krene”), sačuva pretragu ili se pretplati na temu. Blagi upit u vašem interfejsu prvo objasni korist, a tek odgovor „Da” otvara dijalog browsera.

Predaja teme izrada pwa uključuje uputstvo koje tim može koristiti.

Backend i isporuka

import webpush from 'web-push';

webpush.setVapidDetails('mailto:hello@example.com',
  process.env.VAPID_PUBLIC_KEY, process.env.VAPID_PRIVATE_KEY);

await webpush.sendNotification(subscription,
  JSON.stringify({ title: 'Your order has shipped', url: '/account/orders/1042' }),
  { TTL: 3600, urgency: 'high' });

Pretplate se čuvaju u bazi po korisniku i uređaju, a odgovori sa statusom 404 ili 410 automatski uklanjaju one koje su istekle.
Laravel projekti koriste paket laravel-notification-channels/webpush, Node.js projekti biblioteku web-push, a Firebase Cloud Messaging je opcija kada imate i nativne aplikacije.
Slanje ide kroz red poruka (queue), tako da kampanja prema velikom broju pretplatnika nikada ne usporava web zahtjeve.
Poruka nosi deep link i tag koji zamjenjuje zastarjele notifikacije, a service worker na klik otvara ili fokusira pravi ekran.

Osoba provjerava pametni telefon za stolom u kafiću pored šoljica kafe

Iskustvo kao u nativnoj aplikaciji: instalacija, manifest i osjećaj

Upravo iskustvo nalik aplikaciji razlikuje PWA od obične web stranice sa service workerom. Korisnik treba moći da je instalira, pokrene sa početnog ekrana bez adresne trake browsera i da u svakodnevnom korištenju ne osjeti razliku u odnosu na nativnu aplikaciju.

Za izrada pwa CodeWiz prvo mjeri ograničenje, pa bira alat.

Web app manifest

{
  "name": "Example Store",
  "short_name": "Store",
  "id": "/",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "theme_color": "#0f172a",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512",
      "type": "image/png", "purpose": "maskable" }
  ],
  "shortcuts": [{ "name": "My orders", "url": "/account/orders" }]
}

Detalji zbog kojih djeluje nativno

App shell koji se odmah prikazuje iz cachea, sa skeleton ekranima umjesto praznih stranica dok se podaci učitavaju.
Vlastito dugme za instalaciju preko događaja beforeinstallprompt u Chromium browserima i kratko vizuelno uputstvo za „Add to Home Screen” na iOS-u, gdje upit za instalaciju ne postoji.
Maskable ikone, usklađena boja teme, podrška za safe area na ekranima sa zarezom (notch) i ispravan splash ekran.
Glatka navigacija uz View Transitions API, elementi za dodir od najmanje 44–48 px i bez interakcija koje zavise samo od hovera.
Prečice aplikacije, Badging API za broj nepročitanih stavki i Web Share API tamo gdje donose stvarnu korist.
Jasan tok ažuriranja: kada objavimo novu verziju, korisnik vidi „Dostupna je nova verzija – osvježi” umjesto da nesvjesno koristi stari kod.

Kompatibilnost na svim platformama: Android, iOS i desktop

Jedan kod za sve platforme je glavni ekonomski argument za PWA, ali „radi svuda” mora se provjeriti, jer platforme podržavaju različite dijelove PWA tehnologija. Radimo po principu progresivnog unapređenja: osnovno iskustvo radi u svakom modernom browseru, a dodatne mogućnosti se uključuju tamo gdje su dostupne.

Izrada PWA ostaje prilagođen poslu, a ne obrnutno.

Mogućnost	Android (Chrome, Edge, Samsung Internet)	iOS i iPadOS (Safari)	Desktop Chrome i Edge	Desktop Firefox
Offline rad preko service workera	Da	Da	Da	Da
Instalacija na početni ekran ili desktop	Da, uz upit za instalaciju	Ručno preko menija Share	Da, uz upit za instalaciju	Ograničeno
Web push	Da	iOS 16.4+, samo instalirane aplikacije	Da	Da
Background Sync	Da	Ne	Da	Ne
Objava u prodavnici aplikacija	Google Play kao Trusted Web Activity	App Store samo uz nativni wrapper	Microsoft Store preko PWABuildera	–

Testiramo na stvarnim Android i iOS uređajima, a ne samo na emulatorima, i pazimo na ograničenja skladišta: Safari može obrisati podatke sajtova koji se neko vrijeme ne koriste, pa se sve važno uvijek sinhronizuje sa serverom. Ako vam treba objava na Google Playu, PWA pakujemo kao Trusted Web Activity pomoću Bubblewrapa i Digital Asset Links. Za Apple App Store obično je potreban tanki Capacitor wrapper sa stvarnim nativnim funkcijama da bi aplikacija prošla pregled.

Izrada PWA je tema ovog članka, od ograničenja koje koči do predaje posla.

PWA, nativna aplikacija ili responzivna web stranica

PWA nije uvijek pravi odgovor i to ćemo vam otvoreno reći. Tabela ispod je polazna tačka u razgovoru sa klijentima:

CodeWiz dokumentuje kako izrada pwa radi u produkciji i kako se predaje timu.

Kriterij	Responzivna web stranica	Progresivna web aplikacija	Nativna ili cross-platform aplikacija
Broj kodova za održavanje	Jedan	Jedan	Jedan do tri, plus web
Vidljivost u pretraživačima	Da	Da	Samo stranica u prodavnici
Offline rad i instalacija	Ne	Da	Da
Ažuriranja	Trenutna	Trenutna, bez pregleda u prodavnici	Kroz pregled u prodavnici
Dubok pristup hardveru (Bluetooth na iOS-u, NFC, lokacija u pozadini)	Ne	Djelimično, uglavnom na Androidu	Potpun
Uobičajen budžet	Najniži	Umjeren	Najviši

Ako vašim korisnicima treba zahtjevna obrada u pozadini ili duboka integracija sa iOS hardverom, nativna ili cross-platform aplikacija je bolji alat. Za kataloge, rezervacije, naručivanje, dashboarde i većinu internih alata PWA pokriva sve zahtjeve uz znatno niži ukupni trošak.

Kod teme izrada pwa alati otvorenog koda su prvi izbor kada odgovaraju poslu.

Performanse, sigurnost i SEO progresivnih web aplikacija

PWA mora raditi preko HTTPS-a, a kao aplikacija djeluje samo ako je brza. Performanse tretiramo kao zahtjev od prvog sprinta: renderovanje na serveru ili statičko generisanje za prvi prikaz, kod podijeljen po rutama, optimizovane slike i strog performance budžet koji se provjerava u CI-ju. Tehnike se preklapaju sa pristupom kojim postižemo rezultat 100/100 za performanse web stranice, a sloj na edgeu poput dobro podešenog Cloudflarea čuva brzo prvo učitavanje i za posjetioce udaljene od vašeg servera.

SEO: sadržaj se renderuje na serveru ili tokom builda, pa pretraživači indeksiraju pravi HTML umjesto prazne JavaScript ljuske. Svaki ekran ima svoj URL.
Sigurnost: strog Content-Security-Policy, opseg (scope) service workera ograničen na ono što mu treba, a odgovori API-ja za prijavljene korisnike nikada ne završavaju u zajedničkom cacheu.
Provjera: Lighthouse je u verziji 12 izbacio posebnu PWA kategoriju, pa mogućnost instalacije i service worker provjeravamo u Chrome DevToolsu, a offline ponašanje testiramo uz ograničenu mrežu i avionski režim na stvarnim uređajima.

Kako postojeću web stranicu ili prodavnicu pretvoriti u PWA

Rijetko je potrebno sve pisati ispočetka. Većina frameworka ima zrele PWA alate, a PWA mogućnosti dodajemo postepeno:

Vue, React, Svelte i Vite projekti: vite-plugin-pwa sa prilagođenim Workbox service workerom.
Next.js i Nuxt: Serwist ili Nuxt PWA modul, uz pažljiv rad sa rutama koje se renderuju na serveru.
Angular: ugrađeni @angular/service-worker i njegova konfiguracija data grupa.
Laravel i klasični PHP: manifest, ručno pisan ili Workboxom generisan service worker i web push kroz Laravel notifikacije.
WordPress i WooCommerce: lagan service worker koji kešira asete i offline stranicu, dok korpa, checkout i korisnički nalog uvijek idu na mrežu.

Najčešće greške u PWA aplikacijama koje ispravljamo

HTML keširan po principu cache first, pa korisnici danima nakon deploymenta ostaju na staroj verziji.
Bezuslovno pozivanje skipWaiting(), koje zamijeni kod ispod otvorenog taba i pokvari dijelove koji se učitavaju naknadno.
Keširanje personalizovanih odgovora API-ja, pa na dijeljenom uređaju jedan korisnik može vidjeti podatke drugog.
Traženje dozvole za notifikacije već pri prvoj posjeti, čime se kanal trajno gubi.
Bez pravila isteka, pa cache slika i neprozirnih (opaque) odgovora sa drugih domena napuni kvotu skladišta.
Testiranje samo u desktop Chromeu, uz otkriće na dan lansiranja da se iOS ponaša drugačije.

Od čega zavisi cijena izrade PWA aplikacije

Procjenu dajemo nakon kratke analize, a ne naslijepo. Najvažniji faktori cijene su:

Da li gradimo novu aplikaciju ili dodajemo PWA mogućnosti postojećoj stranici.
Obim offline podrške: keširano čitanje je jednostavno, a offline unos podataka sa rješavanjem konflikata nije.
Logika push notifikacija, segmentacija i administratorski interfejs za slanje kampanja.
Broj platformi i uređaja za testiranje, te da li je potrebna objava u prodavnicama aplikacija.
Integracije sa vašim backendom, ERP-om, CRM-om ili servisom za plaćanje.

Pogled odozgo na radni sto sa telefonom u ruci, laptopom i bilježnicama

Kako radimo

Analiza: mapiramo vaše korisnike, uređaje i uslove konekcije, te dogovaramo koji ekrani moraju raditi offline i koji događaji zaslužuju notifikaciju.
Plan: definišemo strategiju keširanja po ruti, model sinhronizacije podataka, push arhitekturu i matricu podržanih browsera.
Izrada: razvijamo app shell, service worker, manifest, offline skladište i push backend, uz performance budžet koji se provjerava u CI-ju.
Testiranje: testiramo na stvarnim Android i iOS uređajima i desktop browserima, offline i na usporenoj mreži, uključujući scenarije ažuriranja i vraćanja na prethodnu verziju.
Puštanje u rad: objavljujemo iza HTTPS-a i CDN-a, pažljivo uvodimo service worker i pratimo greške i broj instalacija.
Podrška: održavamo zavisnosti i kompatibilnost sa browserima i dalje razvijamo aplikaciju zajedno sa vama.

Zašto CodeWiz

Full-stack odgovornost: sami pravimo frontend, service worker, API-je, push backend i servere, pa offline sinhronizacija i notifikacije rade od početka do kraja.
Specijalisti za performanse: brzo učitavanje je naš svakodnevni posao, od koda do Varnisha i Cloudflarea.
Iskrene preporuke: ako je responzivna web stranica dovoljna ili vam zaista treba nativna aplikacija, reći ćemo vam.
Open-source na prvom mjestu: Workbox, Vite, Dexie i otvoreni web standardi vas čuvaju od zavisnosti od jednog dobavljača.
Fer cijene: vrhunski razvoj bez vrhunskih cijena, iz Banje Luke, uz rad na daljinu sa klijentima iz regiona i svijeta – saznajte više o CodeWizu.

Često postavljana pitanja

Koliko košta izrada PWA aplikacije?

Zavisi od toga da li krećemo od nule ili nadograđujemo postojeću stranicu, koliko toga mora raditi offline i koliko je složena logika notifikacija. Dodavanje instalacije i offline keširanja postojećoj web stranici je skroman projekat, dok je potpuna offline-first aplikacija sa sinhronizacijom podataka znatno veći posao. Jasnu procjenu dobijate nakon analize.

Da li progresivne web aplikacije rade na iPhoneu?

Rade. Offline podrška, instalacija preko „Add to Home Screen” i, od verzije iOS 16.4, web push za instalirane aplikacije rade na iPhoneu i iPadu. Neki API-ji, poput Background Synca, nisu dostupni u Safariju, pa za njih pravimo zamjenska rješenja.

Može li se PWA objaviti na Google Playu ili App Storeu?

Google Play prihvata PWA aplikacije upakovane kao Trusted Web Activity, a prihvata ih i Microsoft Store. Apple App Store traži nativni wrapper i funkcije koje idu dalje od obične web stranice, pa taj slučaj procjenjujemo pojedinačno.

Da li će PWA naštetiti SEO-u?

Neće, ako je pravilno napravljena. Uz renderovanje na serveru ili statičko generisanje svaka stranica je brza i može se indeksirati, što pomaže rangiranju. Problemi nastaju samo kod renderovanja isključivo u browseru, kada pretraživač vidi praznu stranicu.

Koliko traje izrada PWA aplikacije?

Dodavanje PWA mogućnosti postojećoj web stranici obično traje nekoliko sedmica, uključujući testiranje. Nova aplikacija sa offline unosom podataka i push notifikacijama najčešće traje nekoliko mjeseci, zavisno od obima i integracija.

Spremni za vašu progresivnu web aplikaciju?

Recite nam ko su vaši korisnici i gdje vaša trenutna web stranica ili aplikacija ne ispunjava očekivanja, a mi ćemo predložiti PWA plan koji odgovara vašim ciljevima i budžetu. Kontaktirajte nas da razgovaramo o projektu ili pogledajte cijelu ponudu naših usluga izrade PWA aplikacija.

Izrada PWA aplikacija: web aplikacije koje rade offline