PWA: a Progressive Web App, Service Worker és manifest alapjai

Mi az a Progressive Web App

Progressive Web App (PWA) — egy webalkalmazás-fejlesztési megközelítés, amely egyesíti a web és a natív alkalmazások legjobb tulajdonságait. A kifejezést Francesco Berriman vezette be 2015-ben, és a Google aktívan népszerűsíti a PWA-t az egyszerű mobilalkalmazások helyettesítőjeként. Az alapötlet: a webhely fokozatosan fejlődik a böngésző és az eszköz képességeitől függően. Ha a böngésző támogatja a Service Worker-t — bekapcsol az offline mód. Ha támogatja a manifestet — megjelenik a «Telepítés» gomb. Ha van értesítési API — az alkalmazás push-t küldhet. A gyenge eszközön lassú internettel rendelkező felhasználó a webhely alapverzióját kapja, a modern okostelefonon pedig egy teljes értékű alkalmazást ikonnal az asztalon.

A PWA-t nem kell telepíteni az alkalmazásbolton keresztül. Elég egy link. Ez megoldja a mobilalkalmazások fő problémáját — a magas belépési küszöböt. A felhasználó nem megy a Google Play-be vagy App Store-ba, nem vár egy 100 MB-os letöltésre, nem ad tucatnyi engedélyt. Egyszerűen megnyitja a webhelyet, és a böngésző felajánlja az alkalmazás telepítését. Ha a felhasználó visszautasítja — továbbra is használja a webhelyet. Ha pedig beleegyezik — az ikon megjelenik a kezdőképernyőn, és az alkalmazás natívként nyílik meg: böngésző címsor nélkül, teljes képernyős módban és gyors indítással.

Technikailag a PWA-nak három kritériumnak kell megfelelnie: HTTPS (biztonságos kapcsolat) segítségével kell működnie, Service Worker (háttérfeldolgozó szkript) kell rendelkeznie, és manifestet (Web App Manifest) kell tartalmaznia. Ez a három összetevő egy hétköznapi webhelyet telepíthető alkalmazássá változtat.

Service Worker: a PWA szíve

Service Worker — egy JavaScript szkript, amelyet a böngésző egy külön szálban futtat, függetlenül a weboldaltól. Nincs hozzáférése a DOM-hoz, nem tud közvetlenül kapcsolatba lépni a felülettel, de képes elfogni és módosítani a hálózati kéréseket, kezelni a gyorsítótárat, feldolgozni a push értesítéseket és háttérszinkronizációt végezni. A Service Worker proxy szerverként működik a böngésző és a hálózat között: minden kérés az oldalról a Service Worker-on keresztül halad, amely eldönti — visszaadja az adatokat a gyorsítótárból, lekérje a szerverről, vagy mindkettőt megtegye.

A Service Worker a saját életciklusa szerint él, nem kötődik a nyitott oldalhoz. Telepítésre kerül, aktiválódik és a háttérben működik még a webhely összes lapjának bezárása után is. Ez lehetővé teszi a PWA számára, hogy push értesítéseket fogadjon és frissítse a gyorsítótárat a háttérben, a felhasználó részvétele nélkül.

A Service Worker életciklusa

A Service Worker négy szakaszon megy keresztül: regisztráció, telepítés, aktiválás és tétlenség/befejezés.

Regisztráció. A böngésző kap egy linket a Service Worker JS fájljához, és elindítja a letöltést. A regisztráció a hétköznapi JavaScript-ből történik az oldalon:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('SW regisztrálva:', registration.scope);
    })
    .catch(error => {
      console.log('SW regisztráció sikertelen:', error);
    });
}

Telepítés. Sikeres letöltés után a böngésző elindítja az install eseményt. Ebben a szakaszban szokás a kulcsfontosságú erőforrásokat (HTML váz, CSS, főbb képek) gyorsítótárazni, hogy az alkalmazás offline is működhessen. Ha a telepítés sikeres, a Service Worker továbblép a következő szakaszba. Ha a szkript hibát dob — a telepítés megszakad, és a régi Service Worker folytatja a működést.

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('pwa-cache-v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/app.js',
        '/images/logo.png'
      ]);
    })
  );
});

Aktiválás. Amikor a webhely összes lapja be van zárva, a régi Service Worker befejeződik, és az új aktiválódik. Az activate esemény a régi gyorsítótárak tisztítására és adatmigrációra szolgál:

self.addEventListener('activate', event => {
  const cacheWhitelist = ['pwa-cache-v2'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Tétlenség. Az aktivált Service Worker elfogja a kéréseket és feldolgozza az eseményeket. A böngésző leállíthatja az erőforrások megtakarítása érdekében, és a következő kérésnél újraindíthatja. A Service Worker eseményvezérelt: csak addig él, amíg eseményeket dolgoz fel.

Gyorsítótárazási stratégiák

A Service Worker több gyorsítótárazási stratégiát támogat. A választás az erőforrás típusától és az adatok frissességére vonatkozó követelményektől függ.

Cache First (először gyorsítótár). Először a gyorsítótár ellenőrzése történik. Ha az erőforrás megtalálható — a gyorsítótárból kerül visszaadásra. Ha nem — a kérés a szerverre megy, a válasz elmentésre kerül a gyorsítótárba. A stratégia statikus erőforrásokhoz alkalmas: képek, betűtípusok, CSS, JS. Maximális sebességet és teljes offline működést biztosít.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request).then(fetchResponse => {
        return caches.open('pwa-cache-v1').then(cache => {
          cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        });
      });
    })
  );
});

Network First (először hálózat). A kérés először a szerverre megy. Ha a szerver válaszol — az adatok visszakerülnek a felhasználóhoz, és elmentésre kerülnek a gyorsítótárba. Ha a szerver nem elérhető — a gyorsítótárazott másolat kerül visszaadásra. A stratégia API kérésekhez, hírekhez, olyan tartalomhoz alkalmas, amelynek frissnek kell lennie, de offline is működhet.

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).then(response => {
      return caches.open('pwa-dynamic-v1').then(cache => {
        cache.put(event.request, response.clone());
        return response;
      });
    }).catch(() => {
      return caches.match(event.request);
    })
  );
});

Stale While Revalidate (elavult frissítéssel). A válasz azonnal visszakerül a gyorsítótárból, miközben a háttérben kérés megy a szerverre a gyorsítótár frissítéséhez. A felhasználó azonnal látja a tartalmat, a következő kérés pedig már friss adatokat kap. Ideális olyan tartalomhoz, amely változik, de nem kritikus, ha a felhasználó egy pár perccel régebbi verziót lát.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      const fetchPromise = fetch(event.request).then(response => {
        return caches.open('pwa-dynamic-v1').then(cache => {
          cache.put(event.request, response.clone());
          return response;
        });
      });
      return cached || fetchPromise;
    })
  );
});

Web App Manifest: hogyan néz ki az alkalmazás az eszközön

A manifest — egy JSON fájl, általában manifest.json, amely a <link> tagon keresztül csatlakozik a HTML oldal fejlécébe. Tájékoztatja a böngészőt, hogy az alkalmazás hogyan jelenjen meg az eszközre telepítéskor: név, különböző méretű ikonok, háttérszín, téma szín, tájolás és megjelenítési mód (böngésző, minimális UI, teljes képernyő).

{
  "name": "PWA Demo App",
  "short_name": "PWA Demo",
  "description": "Demo PWA alkalmazás",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3f51b5",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

A display paraméter határozza meg, hogy az alkalmazás hogyan fog kinézni a telepítés után. A standalone elrejti a böngésző címsorát és navigációs paneljét — az alkalmazás natívnak tűnik. A fullscreen a teljes képernyőt használja böngésző elemek nélkül. A minimal-ui minimális böngésző elemeket hagy meg (vissza és frissítés gombok).

Az ikonokat legalább két méretben kell előkészíteni: 192x192 és 512x512 pixel. A PNG formátum a purpose paraméter (például maskable) támogatásával lehetővé teszi a böngésző számára, hogy az ikont az eszköz burkolatának alakjához igazítsa — Androidon az ikon lekerekített négyzetre vágható. A manifest csatlakoztatása után a Chrome böngésző Androidon elkezdi megjeleníteni a «Hozzáadás a kezdőképernyőhöz» feliratú sávot a feltételek teljesülése esetén: HTTPS, regisztrált Service Worker, helyes manifest és legalább két látogatás 5 perces időközzel.

Push értesítések a PWA-ban

A PWA push értesítéseket küldhet, mint egy natív alkalmazás. Ehhez két API-t használnak: Push API (szerveroldali küldés) és Notification API (megjelenítés az eszközön). A Service Worker akkor is megkapja a push eseményt, ha az alkalmazás nincs megnyitva, és megjeleníthet egy értesítést címmel, szöveggel és ikonnal.

A push értesítések fogadásához a felhasználónak engedélyt kell adnia:

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    console.log('Push engedélyezve');
  }
});

A Service Worker feliratkozik a push eseményre, és megjeleníti az értesítést:

self.addEventListener('push', event => {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png',
    actions: [
      { action: 'open', title: 'Megnyitás' },
      { action: 'close', title: 'Bezárás' }
    ]
  });
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  if (event.action === 'open') {
    clients.openWindow('/');
  }
});

A push szerverről történő küldéséhez a Web Push (VAPID) protokollt használják. A szerver titkosítja az üzenetet, és elküldi a böngésző push szolgáltatásán keresztül (Firebase Cloud Messaging Chrome-hoz, Mozilla Autopush Firefox-hoz). A felhasználó előfizetését (PushSubscription objektum) a regisztrációkor el kell menteni a szerveren.

Teljesítmény és Lighthouse

A PWA-nak gyorsnak kell lennie. A Google Lighthouse — egy audit eszköz, amely egy ellenőrző lista alapján vizsgálja a PWA-t: Service Worker regisztráció, 200-as válasz offline hozzáféréskor, helyes manifest, HTTPS, megfelelő ikonméret, gyors betöltés lassú hálózatokon. A PWA minimális átmenő pontszáma — 80 a 100-ból a Lighthouse skálán. A 80 pont alatti alkalmazások nem kapnak telepítési sávot a Chrome-ban.

A PWA kulcsfontosságú teljesítménymutatói — First Contentful Paint (FCP) 1,8 másodpercig, Largest Contentful Paint (LCP) 2,5 másodpercig, Time to Interactive (TTI) 3,5 másodpercig. A Service Worker jelentősen javíthatja az FCP-t és LCP-t, ha a kritikus HTML-t és CSS-t gyorsítótárazza a telepítéskor. A Cache First stratégia a statikus tartalomhoz és a Stale While Revalidate az API-hoz biztosítja a legjobb felhasználói élményt.

Offline hozzáférés és háttérszinkronizáció

A PWA egyik fő képessége — internet nélküli működés. A Service Worker elfogja a kéréseket és visszaadja a lapok gyorsítótárazott verzióit. Ha a felhasználó megpróbál megnyitni egy olyan oldalt, amely nincs a gyorsítótárban, egy egyéni tartalék oldal jeleníthető meg:

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

A háttérszinkronizáció (Background Sync) lehetővé teszi az adatok szerverre küldésének elhalasztását, ha az eszköz offline. A Service Worker elmenti a kérést, és automatikusan elküldi, amikor a kapcsolat helyreáll:

self.addEventListener('sync', event => {
  if (event.tag === 'sync-messages') {
    event.waitUntil(sendMessages());
  }
});

function sendMessages() {
  return caches.open('pwa-pending-v1').then(cache => {
    return cache.keys().then(requests => {
      return Promise.all(requests.map(request => {
        return fetch(request).then(() => cache.delete(request));
      }));
    });
  });
}

Eszközök a PWA fejlesztéshez

A Chrome DevTools Application panelt biztosít, ahol lehet debuggolni a Service Worker-t (regisztráció, állapot, gyorsítótár, push), ellenőrizni a manifestet, törölni a gyorsítótárat és saját push értesítéseket létrehozni teszteléshez. A Network lap offline mód emulációval segít ellenőrizni a gyorsítótár működését. A Lighthouse az Audits panelben teljes PWA auditot ad ajánlásokkal.

Workbox — a Google könyvtára, amely leegyszerűsíti a Service Worker létrehozását. A gyorsítótárazási stratégiák kézi írása helyett a Workbox kész modulokat kínál:

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  new StaleWhileRevalidate()
);

A Workbox integrálódik a bundlerekkel (Webpack, Vite), és automatikusan generálja az előzetes gyorsítótárazási manifestet. A Microsoft PWA Builder (pwabuilder.com) online generálja az összes PWA fájlt: Service Worker, manifest, ikonok, HTML sablon.