„A legfontosabb a zavarok és a változások korai felkarolása. Ne reagálj rá évtizedekkel később. Nem harcolhat az innováció ellen. ” - Ryan Kavanaugh
Az utóbbi időben sok pezsgés hallatszott a PWA-k köré, sokan azt állították, hogy ez a webfejlesztés jövője, különösen a mobil eszközök tekintetében. Alapjában véve a Progresszív Webalkalmazás (PWA) egyszerűen egy webalkalmazás, amely modern webes technikákat alkalmazva natív alkalmazásszerű élményt nyújt a felhasználók számára. Ezek olyan webalkalmazások, amelyek fokozatos fejlesztéssel rendelkeznek olyan funkciók megvalósításához, mint a gyorsítótár, a háttérszinkronizálás és a push értesítések.
Annak ellenére, hogy a PWA-k már több mint két éve léteznek, a válasz meglehetősen lesújtó. Kevés nagy játékos fogadta el ezt a filozófiát, de a legtöbben nem nagyon fogadták be. A Chrome és a Mozilla talán a legjobb böngésző a PWA-k tesztelésére, mivel az Apple még nem kapott bele ilyen dolgokat.
PWA - Tényleg jó?
Egyrészt vannak natív alkalmazásaink, amelyek az esetek többségében kétségtelenül gyorsak és hatékonyak. Másrészről vannak olyan weboldalak, amelyek meglehetősen lassúak, és a csatlakozási problémákkal együtt ez csak tovább romlik.
A Twitter és a Google által vezetett Accelerated Mobile Pages Project (AMP) 2016-ban indult, hogy csak ezeket a lassú csatlakozási problémákat oldja meg. A PWA-k hibátlanul működnek az összes lehetséges forgatókönyvben. Jó kapcsolat esetén soha nincs probléma. A probléma az, amikor nincs kapcsolatunk, és a hiba oldalával fogadunk.
De ez a legbosszantóbbá válhat, ha lassú a kapcsolatunk. Úgy tűnik, hogy az oldal betöltődik, és csak egy üres képernyőt látunk. Csak várunk, várunk és várunk, de úgy tűnik, hogy az oldal soha nem töltődik be. Itt jön a PWA megmentésünkre. A legjobb rész a PWA-kban - a lehető legjobb felhasználói élményt nyújtja a lassú csatlakozás és a kapcsolat nélküli kapcsolatok esetén (igen, jól olvasta ..)
Miért van értelme a PWA használatára?
Egy tanulmány szerint egy átlagos felhasználó teljes idejének 80% -át csak három alkalmazásán tölti (csak nekem a Chrome, a Quora és a Medium).
A többi alkalmazás csak tétlenül üzemel az idő nagy részében, ami a memória értékes részét veszi fel. Ezenkívül körülbelül tízszeres költsége van egy alkalmazás fejlesztése, ahelyett, hogy egy webhelyet hoznánk létre. A költségek sokkal magasabbak lehetnek, ha különálló kódalapok fejlesztését és fenntartását tervezi különböző platformokhoz, például Androidhoz, iOS-hez és az internethez.
Natív alkalmazásfunkciók, amelyeket a PWA-k használhatnak
- Értesítések
- Teljes képernyő
- Offline munka
- A Splash képernyő támogatott, így még több alkalmazást érezhet
A PWA-k még sok ilyen funkciót igénybe vehetnek. A fenti pontok csak arra utalnak, hogy mire képesek a PWA-k. Van azonban néhány olyan hagyományos szolgáltatás, amelyet csak a natív alkalmazások élvezhetnek.
Natív alkalmazásfunkciók, amelyeket a PWA-k mostantól nem tudnak használni
- Nincs vagy nagyon korlátozott hozzáférés a különböző hardver érzékelőkhöz
- Riasztások
- Telefonkönyv-hozzáférés
- A rendszerbeállítások módosítása
A PWA-k elég gyorsan fejlődnek, és remélhetjük, hogy ezek a funkciók hamarosan működésbe lépnek.
A PWA két fő alkotóeleme
App Manifest
Ez egy JSON fájl, amely meghatározza az alkalmazás ikonját, az alkalmazás indításának módját (önálló, teljes képernyős, a böngészőben stb.), És minden ilyen kapcsolódó információt. Az alkalmazás gyökerében található. Minden egyes megjelenítendő oldalon meg kell adni a linket ehhez a fájlhoz.
A HTML-oldal fejrészébe kerül:
Service Worker
Service worker is where most of the magic of happens. Its nothing but JavaScript code that acts as programmable proxies solely responsible for intercepting and responding to network requests. Since it acts as a proxy and can be easily programmable, the application must be served over HTTPS to keep the data secure.
Its worth noting that the service worker caches the actual response, including all HTTP headers, rather than just the response data. This means that your application can simply make network requests and process the response without any specific code to handle the cache.
How do I get started?
The best thing about getting started is that it’s quite easier than it seems. In fact, it’s very much possible to take an existing site and convert into a PWA. I highly suggest you watch this if you intend to develop a PWA.
Thanks for reading! If you liked it, please support by clapping and sharing the post.