Weboldalról appra: Teljes útmutató a Progressive Web Apps-hoz
Miért érdemes Progressive Web Appot választanod a projektedhez?
Képzeld el: natív appot fejleszteni igazi macera. Két külön kódbázist kell karbontartani iOS-re és Androidra, app store jóváhagyásra várni, plusz platformspecifikus build-eket menedzselni. A Progressive Web Apps mindent megfordítanak.
A PWA-kkal megkapod a natív app előnyeit – kezdőlapos ikont, teljes képernyős indítást, offline módot –, miközben egyetlen kódbázist használsz. Semmi app store cirkusz, semmi platformfüggő bonyodalom. Csak a szuperfeltuningozott weboldalad.
A kulcs a service workerekben rejlik: ezek könnyű JavaScript folyamatok, amik hátul futnak, elkapják a hálózati kéréseket, cache-elnek, és offline-ban is működnek. Egyszerűen zseniális.
A valóság: mire elég a PWA, mire nem?
Ne ugorj fejest rögtön. A PWA-k domainhez kötöttek, HTTPS-en futnak, és sandboxolt környezetben élnek. Ez nem hátrány, hanem biztonsági alapelv.
Viszont hozzáférhetsz natív API-khoz, amik eddig appokban rejtőztek: geolokáció, kamera, szenzorok. Frissítéseid azonnal élnek, nincs jóváhagyási várakozás – legközelebbi látogatáskor megkapják a userek.
Így építsd meg a PWA-dat: lépésről lépésre
Egy meglévő weboldalt PWA-vá alakítani öt fő elemből áll. Lássuk, mit kell összeraknod:
1. App Manifest: a PWA személyi igazolványa
A manifest egy JSON fájl, ami mindent elmesél az oprendszertől az appodról:
- Teljes név és rövidítés
- Téma- és háttérszín az integrált külsőhöz
- Működési scope (URL-kör)
- Indító URL
- Leírás
- Ikonok a kezdőlapra
- Forgatási beállítások
Íme egy működő példa:
{
"name": "Szuper Appod",
"short_name": "SzuperApp",
"theme_color": "#2196F3",
"background_color": "#FFFFFF",
"display": "standalone",
"scope": "/",
"start_url": "/",
"description": "Ide írd az app leírását",
"orientation": "any",
"icons": [
{
"src": "/assets/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Hagyd "any"-on a orientation-t, hacsak nincs erős indokod a korlátozásra. Mobilosok szeretik a rugalmasságot.
2. Csatold be a manifestet az HTML-be
Dold be a <head>-be (alap template-be vagy index.html-be):
<link rel="manifest" href="/assets/manifest.json">
Így tudják a böngészők, hol keressék a beállításokat.
3. Gondold át az offline működést
A service workerek böngészés közben cache-elnek. Ha offline-ban valami nincs a cache-ben, kell egy kecses megoldás. Készíts offline.html-t, ami elmagyarázza a szitut.
Single-page appoknál linkeld át az index.html-re:
ln -s index.html offline.html
Így nem ragadnak le a userek holt képernyőn.
4. Regisztráld a service worker-t
Tedded be ezt a scriptet a </body> elé:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker regisztrálva'))
.catch(err => console.log('Service Worker hiba'));
}
</script>
5. Írd meg a service worker-t
Itt történik az offline varázslat. Elkapja a fetch kéréseket, cache-el, és offline-ban kiszolgál:
const CACHE_NAME = 'v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js',
'/offline.html'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
.catch(() => caches.match('/offline.html'))
);
});
Ez installkor cache-el kulcsfontosságú fájlokat, priorizálja a cache-t, és offline-ban az offline oldalt adja.
HTTPS: ez kötelező
Service workerek csak HTTPS-en mennek. Ez biztonsági alap. Ha még nincs HTTPS-ed, itt az idő. A NameOcean-nél egyszerűvé tesszük SSL-lel és hostinggal, ahol auto-konfiguráció jár.
Telepítés és tesztelés
Deployold a manifestet, service worker-t és friss HTML-t. Aztán teszteld:
- Nyisd meg a DevTools-t (F12) → Application fül
- Ellenőrizd, hogy a manifest hibátlan töltődik
- Nézd meg a service worker regisztrációt a Service Workers részen
- Teszteld offline-t (DevTools → Network → Offline)
- Próbáld telepíteni (böngészők promptolnak vagy menüben kínálják)
A valódi előny
Usereid natív app érzetet kapnak, te meg spórolsz az iOS/Android kódbázisokon. Frissítések villámgyorsak. Teljes kontroll a deploy-on.
Ez megéri a kis befektetést.
Gyors tipp az automatizáláshoz
Ha soknak tűnik, nézd meg a PWABuilder.com-ot – online tool, ami sok mindent legenerál. Néha jobb a boilerplate-et gépre bízni.
Összefoglalva: PWA-k már nem kísérlet. Praktikus mód app-szintű élményre, miközben te a lényegre fókuszálsz.