Progressive Web Apps (PWA) ponúkajú natívny zážitok bez nutnosti inštalácie z app storu. Fungujú offline, posielajú notifikácie a sú bleskovo rýchle.

Čo robí PWA "progresívnou"?

Service Worker

Skript bežiaci na pozadí, ktorý umožňuje:

  • Offline funkcionalitu
  • Background sync
  • Push notifikácie
  • Caching stratégie
// sw.js - Service Worker
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles.css',
        '/app.js',
        '/offline.html'
      ])
    })
  )
})

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request)
    })
  )
})

Web App Manifest

JSON súbor definujúci vzhľad a správanie aplikácie:

{
  "name": "Moja PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#F97316",
  "background_color": "#0A0A0A",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

HTTPS

PWA vyžadujú bezpečné pripojenie - bez HTTPS to nefunguje.

Caching stratégie

Cache First

Pre statické assety - najrýchlejšie.

Network First

Pre dynamický obsah - vždy čerstvé dáta.

Stale While Revalidate

Okamžitá odpoveď z cache, aktualizácia na pozadí.

// Stale While Revalidate
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open('dynamic').then((cache) => {
      return cache.match(event.request).then((cached) => {
        const fetched = fetch(event.request).then((response) => {
          cache.put(event.request, response.clone())
          return response
        })
        return cached || fetched
      })
    })
  )
})

PWA v Nuxt.js

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  pwa: {
    registerType: 'autoUpdate',
    manifest: {
      name: 'Moja Aplikácia',
      short_name: 'App',
      theme_color: '#F97316'
    },
    workbox: {
      navigateFallback: '/',
      globPatterns: ['**/*.{js,css,html,png,svg,ico}']
    }
  }
})

Výhody PWA

Aspekt Natívna app PWA
Inštalácia App Store Okamžitá
Veľkosť 50-200MB 1-5MB
Aktualizácie Manuálne Automatické
Vývoj 2 kódbázy 1 kódbáza
Dosah Len inštalovaní Ktokoľvek

Úspešné PWA

  • Twitter Lite
  • Pinterest
  • Starbucks
  • Uber

Záver

PWA sú ideálne pre aplikácie, kde potrebujete dosah webu s funkciami natívnych aplikácií. Začnite s manifestom a service workerom pre caching.