Progressive Web App (PWA): kuidas teha koduleht äpiks

Mis on PWA?

Progressive Web App = koduleht, mis käitub kui äpp: - Installeeritav (telefoni avalehele) - Töötab offline'is - Push teavitused - Ligipääsu kaamerale, GPS-ile - Native äpi tunnetus

Tuntud PWA-d: Twitter, Pinterest, Starbucks, Spotify.

Eelised vs native äpp

PWA - Üks codebase (web + iOS + Android) - Installimine ilma App Store'ita - Kiire arendus (50% odavam) - SEO eelised (otsitav Google'is) - Pole 30% Apple/Google tax'i

Native - Parem sooritus - Parem operatsioonisüsteemi integratsioon - App Store'ides leitav - Apple/Google brand association

PWA komponendid

1. Service Worker JS, mis töötab taustal – pakub offline'i ja cache'i.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => 
      cache.addAll(['/index.html', '/styles.css'])
    )
  );
});

2. Web App Manifest JSON fail, mis kirjeldab äpi metaandmed:

{
  "name": "Kodulehe Haldus",
  "short_name": "KH",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0F172A",
  "theme_color": "#1E3A5F",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

3. HTTPS PWA vajab HTTPS-i. Cloudflare Free pakub tasuta.

Funktsionaalsus

Offline tugi - Cache strateegiad (cache-first, network-first, stale-while-revalidate) - Offline fallback leht - Background sync (saadab andmed, kui võrk taastub)

Push teavitused ```js const subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: 'public-vapid-key' }); ```

Web push töötab iOS Safari 16.4+ (alates 2023), Android Chrome (kõikjal).

Installimine - Chrome / Edge: Add to Home Screen prompt - iOS Safari: Share → Add to Home Screen (manuaalne) - Desktop: install icon URL bar's

Frameworks

Workbox Google'i ametlik tööriist: ```bash npm install workbox-cli ```

Next.js + next-pwa ```bash npm install next-pwa ```

Vite + vite-plugin-pwa ```bash npm install vite-plugin-pwa ```

WordPress - **Super PWA** plugin (tasuta) - **PWA for WP** plugin

Testimine

Chrome DevTools - Application → Manifest - Application → Service Workers - Lighthouse → PWA audit

Tools - [PWA Builder](https://www.pwabuilder.com/) – ametlik Microsoft - [Web Manifest Validator](https://manifest-validator.appspot.com/)

Sobib vs ei sobi PWA

Sobib - E-pood (offline tooted, push teavitused) - News/blog (offline lugemine) - Productivity äpid - Toidu tellimine - Reisitööriistad - Sotsiaalmeedia

Ei sobi - Mängud (sooritus piiratud) - Kompleksne 3D / AR - Massive offline data - Bluetooth/USB ligipääs (piiratud)

iOS piirangud (2026)

Apple lubas PWA-d, kuid piiratud: - 50 MB storage limiit - Pole täielik push teavitusi (parem alates iOS 16.4) - Background tasks piiratud - Pole In-App Purchase (Apple tahab oma 30%)

Reaalsed näited

Pinterest - Vahetas mobile web'i PWA-le 2017 - Time spent: +60% - User-generated ads: +44% - Revenue: +44%

Starbucks - PWA versus native äpp: PWA 2x kasutab, 99.84% väiksem - Tellimuste kasv läbi PWA

Twitter Lite - Bounce rate: -20% - Lehed/sessiooni: +65% - Tweets: +75%

SEO eelised

• Indekseeritav (erinevalt native äppidest)
• Schema.org WebApplication
• Mobile-friendly automaatselt
• Core Web Vitals paremad (cache'iga)

Vt SEO juhend.

Hinnang Eestis

PWA hind - Lihtne (lisaks olemasolevale lehele): 800–2000€ - Kompleksne (offline-first): 3000–8000€ - Kohandatud (push, native features): 5000€+

Native äpp hind - Lihtne: 8000–15000€ - Keskmine: 15000–30000€ - Kompleksne: 30000€+

PWA on 3–5x odavam.

Kokkuvõte

PWA on 2026 mõistlik valik enamikule projektidele, kus mobiilne äpp on soovitud. 50% kuludest, 80% funktsionaalsusest. Pakume PWA arendust WordPress-i baasil või kohandatud Next.js-iga. Küsi pakkumist.

Allikad

• Google – PWA Documentation
• MDN – Progressive Web Apps
• PWA Stats – Case Studies