Skratka PWA znamená “Progressive Web Application”, čo v preklade znamená „progresívna webová aplikácia“. Ide o typ aplikácie, ktorá kombinuje výhody webových stránok a natívnych mobilných aplikácií. PWA umožňuje používateľom používať aplikácie podobne ako tradičné mobilné aplikácie, ale bez potreby ich sťahovania z obchodu.
Hlavné vlastnosti PWA:
1.Progressívna:
•Funguje na akomkoľvek zariadení a prehliadači, ktorý podporuje moderné webové technológie.
2.Responzívna:
•Automaticky sa prispôsobuje rôznym veľkostiam obrazoviek (mobil, tablet, desktop).
3.Prístupná offline:
•Využíva Service Workers na ukladanie obsahu do vyrovnávacej pamäte, čo umožňuje fungovanie aj bez internetového pripojenia.
4.Možnosť inštalácie:
•Používateľ si môže PWA pridať na domovskú obrazovku, kde sa správa ako natívna aplikácia.
5.Rýchlosť:
•Rýchle načítanie obsahu vďaka vyrovnávacej pamäti.
6.Bezpečnosť:
•Využíva protokol HTTPS na ochranu dát.
7.Aktualizácie:
•Automatické aktualizácie bez zásahu používateľa.
Výhody PWA:
1.Jednoduchosť:
•Používateľ nemusí aplikáciu sťahovať z obchodu. Stačí ju otvoriť vo webovom prehliadači.
2.Nižšie náklady na vývoj:
•Namiesto vývoja samostatnej mobilnej a webovej aplikácie stačí vytvoriť jednu PWA.
3.Dostupnosť:
•Prístupná na všetkých platformách s prehliadačom.
4.Vyššia angažovanosť:
•Možnosť posielania push notifikácií a offline prístupu zvyšuje zapojenie používateľov.
Príklady PWA:
1.Twitter Lite: Rýchlejší a ľahší prístup na Twitter.
2.Pinterest: Ich PWA má nižšiu veľkosť ako natívna aplikácia a zvyšuje angažovanosť.
3.Uber: Minimalistická aplikácia pre pomalé siete.
4.Starbucks: Offline objednávanie nápojov a potravín.
Ako funguje PWA?
1.Service Workers:
•Skript bežiaci na pozadí, ktorý umožňuje offline režim, rýchle načítanie a push notifikácie.
2.Manifest súbor:
•Obsahuje metadáta o aplikácii, ako je názov, ikona a správanie po inštalácii.
Príklad manifest.json:
{
“name”: “My PWA App”,
“short_name”: “PWA”,
“start_url”: “/index.html”,
“display”: “standalone”,
“background_color”: “#ffffff”,
“theme_color”: “#000000”,
“icons”: [
{
“src”: “icon.png”,
“sizes”: “192×192”,
“type”: “image/png”
}
]
}
PWA je moderný spôsob, ako ponúknuť používateľom rýchle, dostupné a funkčné aplikácie bez potreby komplikovanej inštalácie.