Progresivne web aplikacije (PWA): Potpuni vodič za 2026.

# Što ćete naučiti#

Ovaj vodič za progressive web app (PWA) objašnjava što su PWA-i u 2026., kada imaju poslovnog smisla i kako implementirati PWA spreman za produkciju u Next.js-u. Dobit ćete konkretne korake implementacije, funkcionalan manifest.webmanifest, primjer service workera i checklistu za prolazak Lighthouse PWA audita.

Također ćete vidjeti gdje PWA nadmašuje nativne aplikacije (trošak, brzina iteracije, distribucija) i gdje nativno i dalje pobjeđuje (duboki OS API-ji, neka iOS ograničenja).

# PWA u 2026.: definicija, ključni gradivni blokovi i zašto je važno#

Progressive Web App (PWA) je web aplikacija koja se ponaša kao aplikacija: može se instalirati, brza je, otporna na lošu mrežu i sposobna cacheirati sadržaj za offline korištenje. “Progresivno” znači da radi za sve u osnovnom načinu, a zatim se nadograđuje na sposobnijim preglednicima/uređajima.

3 stvari bez kojih ne ide#

1. 1
   HTTPS: Service worker-i zahtijevaju siguran kontekst (osim localhost).
2. 2
   Web App Manifest: Definira ponašanje instalacije (naziv, ikone, display mode, start URL).
3. 3
   Service Worker: Skripta u pozadini koja može presretati mrežne zahtjeve, cacheirati resurse i omogućiti offline ponašanje.

Podrška koju ćete vjerojatno dodati#

• App shell + strategija cacheiranja (precache statičkih resursa, runtime cache API odgovora)
• Background sync / periodic sync (gdje je podržano)
• Push notifikacije (varira po platformi; iOS podrška se poboljšala, ali rezultati i dalje ovise o verziji OS-a i stopi dopuštenja korisnika)
• Offline fallbackovi (HTML stranica, cacheirani podaci ili “read-only mode”)

ℹ️ Napomena: “PWA” nije jedna opcija u frameworku koju samo uključite. To je skup mogućnosti koje implementirate, a zatim provjerite Lighthouseom i testiranjem na stvarnim uređajima.

# PWA vs nativne aplikacije: prednosti, kompromisi i kriteriji odluke#

PWA su često najbrži put od ideje do “instalabilne aplikacije” na više platformi. Nativne aplikacije i dalje vode kada trebate maksimalnu integraciju s OS-om i predvidivo izvođenje u pozadini.

Gdje PWA pobjeđuje (za većinu biznisa)#

• Niži ukupni trošak: Jedna baza koda za web + instalabilno iskustvo. Za mnoge proizvode to smanjuje trošak razvoja i održavanja u odnosu na odvojene iOS/Android aplikacije.
• Brže iteracije: Poboljšanja možete isporučivati odmah, bez ciklusa pregleda u app storeu za većinu promjena.
• Distribucija i konverzije: Korisnici mogu doći kroz SEO/linkove i instalirati kasnije. Manje koraka obično znači manje odustajanja u usporedbi s pretraživanjem i instalacijom iz trgovine.
• Performanse mogu biti izvrsne: Uz moderno cacheiranje, code splitting i optimizaciju slika, PWA može postići odlične Core Web Vitals rezultate.

Gdje nativno i dalje pobjeđuje#

• Napredni hardverski/OS API-ji: Neki Bluetooth scenariji, napredni background taskovi i određeni senzori i dalje su lakši ili mogući samo nativno.
• Dugotrajni background rad: Nativni background servisi su zreliji i predvidljiviji.
• Prisutnost u app storeu: Neke kategorije profitiraju od otkrivanja u trgovinama, recenzija i top ljestvica.

Praktična tablica odluke (2026.)#

Ako uspoređujete budžete, prvo mapirajte ovu odluku na opseg i rokove. To se dobro nadovezuje na planiranje iz teksta Cijena web stranice u 2026., jer PWA mogućnosti (offline, cacheiranje, instalabilnost) utječu na troškove testiranja i održavanja.

# PWA koncepti koje morate ispravno postaviti (instalacija, offline, cacheiranje)#

Instalabilnost: Manifest + “Add to Home Screen”#

Instalabilnost je uglavnom UX sloj preko manifesta + service workera. Korisnicima treba biti jasno što dobivaju kada “instaliraju” (brži pristup, offline podrška, uglađenije iskustvo).

Ključna manifest polja koja utječu na instalaciju:

• name, short_name
• start_url
• display (standalone je čest)
• icons (više veličina, ispravan purpose)
• theme_color, background_color

Offline strategija: definirajte što “offline” znači za vašu aplikaciju#

Offline može značiti:

• Offline-first: Aplikacija radi bez mreže za većinu tokova (najteže).
• Offline-ready: Aplikacija učita shell + prethodno pregledan sadržaj; po potrebi prikaže prijateljsku offline stranicu (često i praktično).
• Network-only s fallbackom: Minimalno cacheiranje, samo fallback stranica (osnovni PWA).

Realističan 80/20 pristup za većinu PWA-a:

• Precacheajte app shell (layout, CSS, core JS).
• Cacheirajte statičke resurse (slike, fontove) s dugim TTL-om.
• Cacheirajte GET API odgovore za “read” prikaze s kratkim TTL-om.
• Osigurajte offline fallback stranicu za necachirane rute.

Strategije cacheiranja (birajte namjerno)#

🎯 Ključna poruka: Nemojte “cacheirati sve”. Cacheirajte agresivno predvidljive, verzionirane resurse, a autentificirane tokove (checkout, uređivanje profila, plaćanja) tretirajte kao network-first ili network-only.

# Preduvjeti (Next.js PWA postavke)#

Ako želite tim koji će to implementirati end-to-end (uključujući performance budžete, QA i rollout), to je upravo tip posla koji isporučujemo u Samioda: Web & Mobile Development.

# Korak 1: Dodajte Web App Manifest u Next.js#

U Next.js-u stavite manifest u public/manifest.webmanifest. Neka bude malen, valjan JSON i uključite ključna polja.

{
  "name": "Samioda PWA Starter",
  "short_name": "PWA Starter",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#0b1220",
  "theme_color": "#0b1220",
  "description": "Installable Next.js PWA with offline-ready caching.",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Povežite manifest i theme color#

Za App Router, definirajte metadata u app/layout.tsx koristeći metadata. Ako ste na Pages Routeru, dodali biste tagove u _document ili _app s next/head.

export const metadata = {
  applicationName: "Samioda PWA Starter",
  themeColor: "#0b1220",
  manifest: "/manifest.webmanifest",
  appleWebApp: {
    capable: true,
    statusBarStyle: "default",
    title: "Samioda PWA Starter"
  }
};

💡 Savjet: Dodajte ikone s purpose: "maskable". Bez njih Android launcher može ružno odrezati ikonu, zbog čega aplikacija odmah djeluje manje “nativno”.

# Korak 2: Implementirajte Service Worker (jednostavna, razumljiva osnova)#

Next.js ne dolazi sa service workerom po defaultu. Možete ga ručno implementirati i registrirati na klijentu.

Napravite public/sw.js#

Ova osnova radi tri korisne stvari:

• Precachira offline fallback stranicu.
• Cacheira statičke resurse cache-first.
• Koristi network-first za navigacije s offline fallbackom.

const CACHE_NAME = "pwa-cache-v1";
const OFFLINE_URL = "/offline";
 
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll([OFFLINE_URL]))
  );
  self.skipWaiting();
});
 
self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((keys) =>
      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
    )
  );
  self.clients.claim();
});
 
self.addEventListener("fetch", (event) => {
  const req = event.request;
  const url = new URL(req.url);
 
  if (req.method !== "GET" || url.origin !== self.location.origin) return;
 
  // Navigation requests: try network first, fallback to offline page
  if (req.mode === "navigate") {
    event.respondWith(
      fetch(req).catch(() => caches.match(OFFLINE_URL))
    );
    return;
  }
 
  // Static assets: cache-first
  if (url.pathname.startsWith("/_next/") || url.pathname.startsWith("/icons/")) {
    event.respondWith(
      caches.match(req).then((cached) => {
        if (cached) return cached;
        return fetch(req).then((res) => {
          const copy = res.clone();
          caches.open(CACHE_NAME).then((cache) => cache.put(req, copy));
          return res;
        });
      })
    );
  }
});

Dodajte offline page rutu#

Kreirajte minimalnu offline rutu. U App Routeru možete dodati app/offline/page.tsx kako biste prikazali jednostavnu poruku.

UX neka bude praktičan: pokažite što i dalje radi i kako se korisnik može oporaviti.

# Korak 3: Registrirajte Service Worker u Next.js-u#

Registrirajte SW samo u pregledniku i samo u produkciji (ili iza flag-a) kako biste izbjegli probleme s cacheiranjem u developmentu.

Kreirajte app/pwa-register.ts (ili bilo koju client datoteku) i importajte je u layout.

"use client";
 
import { useEffect } from "react";
 
export function PwaRegister() {
  useEffect(() => {
    if (process.env.NODE_ENV !== "production") return;
    if (!("serviceWorker" in navigator)) return;
 
    navigator.serviceWorker.register("/sw.js").catch(() => {
      // Optional: send to monitoring
    });
  }, []);
 
  return null;
}

Zatim ga renderajte jednom (npr. u app/layout.tsx):

import { PwaRegister } from "./pwa-register";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <PwaRegister />
        {children}
      </body>
    </html>
  );
}

⚠️ Upozorenje: Service worker-i agresivno cacheiraju i mogu vas navesti da mislite da je “Next.js pokvaren”. Uvijek testirajte SW ponašanje u incognito prozoru i naučite kako napraviti hard-refresh + unregister u DevToolsima (Application → Service Workers).

# Korak 4: Dodajte runtime cacheiranje za API read (bez razbijanja auth-a)#

Ako vaša aplikacija dohvaća javne podatke (npr. blog postovi, liste proizvoda), cacheiranje GET odgovora poboljšava percipiranu brzinu i otpornost.

Sigurno osnovno pravilo:

• Cacheirajte GET zahtjeve za javne endpointe.
• Ne cacheirajte autentificirane endpointe osim ako u potpunosti razumijete sigurnosne implikacije.

Evo malog proširenja SW-a za cacheiranje javnih API zahtjeva stale-while-revalidate strategijom:

const API_CACHE = "api-cache-v1";
 
async function staleWhileRevalidate(request) {
  const cache = await caches.open(API_CACHE);
  const cached = await cache.match(request);
 
  const networkPromise = fetch(request).then((res) => {
    if (res.ok) cache.put(request, res.clone());
    return res;
  }).catch(() => cached);
 
  return cached || networkPromise;
}
 
self.addEventListener("fetch", (event) => {
  const req = event.request;
  const url = new URL(req.url);
 
  if (req.method !== "GET" || url.origin !== self.location.origin) return;
 
  if (url.pathname.startsWith("/api/public/")) {
    event.respondWith(staleWhileRevalidate(req));
  }
});

Ako nemate čistu podjelu između public i private endpointa, napravite je. To se isplati zbog cacheiranja, CDN ponašanja i sigurnosnih revizija.

# Korak 5: iOS i cross-platform detalji koji utječu na stvarne korisnike#

Ikone, splash i “app-like” poliranje#

• Osigurajte 192 i 512 ikone, plus maskable ikonu.
• Postavite display: "standalone" kako biste smanjili browser UI.
• Postavite theme_color konzistentno s app shellom kako biste izbjegli bijele “flash” trenutke.

Push notifikacije i platformne rupe#

Push podrška nije ujednačena na svim uređajima i postavkama korisnika. Tretirajte push kao opcionalno poboljšanje, a ne kao ključnu ovisnost, osim ako isporučujete i native.

Ograničenja pohrane i izbacivanje cachea#

Preglednici mogu izbaciti cache pod pritiskom pohrane. Dizajnirajte offline UX tako da se graciozno degradira:

• Prikažite timestamp “zadnje ažurirano”.
• Dodajte akciju “osvježi sadržaj”.
• Izbjegavajte cacheiranje ogromnih media blobova osim ako vam stvarno treba offline media.

# Performanse: PWA živi ili umire po Core Web Vitalsima#

Instalabilnost je beskorisna ako je aplikacija spora. Vaš PWA bi trebao ciljati:

• Brzo prvo učitavanje: optimizirajte JS, koristite code splitting i izbjegavajte teški client-only rendering.
• Brzo ponovno učitavanje: cacheiranje + prefetching.
• Stabilan UI: izbjegavajte layout shiftove; uvijek rezervirajte prostor za slike.

Konkretne provjere koje možete raditi:

• Lighthouse mobile simulacija
• testiranje na stvarnom uređaju srednje klase (Android)
• WebPageTest s throttlanom vezom

Dobro pravilo za timove: tretirajte regresije performansi kao funkcionalne bugove. Povežite promjene s mjerljivim budgetima (bundle size, LCP/INP ciljevi).

Za dublje planiranje troška/performansi, povežite ove odluke s ukupnim opsegom izrade: Cijena web stranice u 2026..

# Testiranje i validacija (Lighthouse + stvarni uređaji)#

Što provjeriti#

Brzo pokretanje Lighthousea#

1. 1
   Otvorite Chrome DevTools → Lighthouse
2. 2
   Odaberite Mobile
3. 3
   Pokrenite audite
4. 4
   Popravite upozorenja vezana uz manifest, ikone i SW scope

ℹ️ Napomena: Lighthouse je odličan početak, ali nije produkcijska realnost. Validirajte na barem jednom Android uređaju i jednom iPhoneu, jer se install UX i standalone ponašanje razlikuju.

# Česte zamke (i kako ih izbjeći)#

1. 1
   Nenamjerno cacheiranje HTML-a — Ako cacheirate navigacije cache-first, korisnici mogu zapeti na starim verzijama. Koristite network-first za navigacije i zadržite offline fallback.
2. 2
   Ne verzionirate cacheeve — Ako nikad ne mijenjate nazive cachea, stari resursi ostaju. Koristite pwa-cache-v1, pa podignite na v2 pri izdanju kada se promijene cache pravila.
3. 3
   Cacheiranje autentificiranih odgovora — To može procuriti podatke između sesija na dijeljenim uređajima. Držite private endpointe izvan SW cacheiranja osim ako implementirate stroge kontrole.
4. 4
   Ignoriranje UX-a ažuriranja — Kad isporučite novu verziju, korisnici mogu raditi na starom SW-u dok ne reloadaju. Razmislite o banneru “Dostupna je nova verzija” ako su promjene česte.
5. 5
   PWA kao checkbox — Poslovna vrijednost dolazi iz jasne offline priče, brzih ponovnih učitavanja i jasnog trenutka instalacije.

# Kada odabrati PWA + Next.js vs Flutter (ili native)#

Next.js PWA je idealan kada vaš proizvod već profitira od weba: SEO, dijeljivi linkovi i brze iteracije. Flutter je snažan kada trebate konzistentan UI na platformama s bogatijom offline logikom, ali nije direktna zamjena za web distribuciju.

Ako birate između stackova, krenite od korisničkih putovanja:

• Ako je “otvori link → pregledaj → kupi/registriraj se” ključno, web + PWA je obično najbolji ROI.
• Ako su “svakodnevno aktivni korisnici, teške device mogućnosti, offline-first workflowi” ključni, razmotrite Flutter ili native.

Ako trebate pomoć u definiranju pravog pristupa (PWA, Flutter ili hibrid), radimo oboje: web i mobilna rješenja.

# Ključne poruke#

• Unaprijed definirajte offline cilj (offline-ready vs offline-first) i implementirajte cacheiranje u skladu s tim.
• Dodajte ispravan manifest.webmanifest (ikone, display: standalone, theme boje) kako bi instalacija djelovala nativno.
• Implementirajte service worker s network-first navigacijama i offline fallbackom kako biste spriječili bugove tipa “zapeo na staroj verziji”.
• Cacheirajte statičke resurse agresivno, ali autentificirane tokove tretirajte kao network-only ili ih strogo kontrolirajte.
• Validirajte na stvarnim uređajima i s Lighthouseom; mjerite Core Web Vitals jer performanse su glavni driver prihvaćanja PWA-a.

# Zaključak#

Dobro implementiran PWA u 2026. i dalje je jedan od najpraktičnijih načina da isporučite instalabilnu, brzu, cross-platform aplikaciju bez dupliranja baze koda. S Next.js-om možete spojiti SEO-friendly web distribuciju s UX-om nalik aplikaciji, offline otpornošću i snažnim performansama — ako namjerno implementirate manifest, service worker i strategiju cacheiranja.

Ako želite PWA razine produkcije (Next.js setup, strategija cacheiranja, offline UX, performance budgeti, analitika i QA), Samioda vam može pomoći da ga izgradite i isporučite: Mobile & Web Development.