Prečo sú progresívne webové aplikácie budúcnosťou vývoja webu

„Kľúčom je včasné prijatie narušenia a zmeny. Nereagujte na to o desaťročia neskôr. S inováciami nemôžete bojovať. “ - Ryan Kavanaugh

V poslednej dobe sa okolo serverov PWA objavuje veľa hlášok, z ktorých mnohí tvrdia, že je to budúcnosť vývoja webových aplikácií, najmä pokiaľ ide o mobilné zariadenia. Progresívna webová aplikácia (PWA) je vo svojej podstate jednoducho webová aplikácia, ktorá využíva moderné webové techniky na to, aby používateľom poskytla natívne zážitky podobné aplikácii. Jedná sa o webové aplikácie s postupným vylepšovaním na implementáciu funkcií, ako je ukladanie do pamäte cache, synchronizácia na pozadí a oznámenia push.

Aj napriek tomu, že PWA existujú už viac ako dva roky, odpoveď je dosť nepriaznivá. Len málo veľkých hráčov si osvojilo túto filozofiu, ale väčšina ju vlastne príliš neprijala. Chrome a Mozilla sú možno najlepšie prehľadávače, ktoré otestujú vaše PWA, pretože Apple sa k týmto veciam ešte nedostal.

PWA - Je to naozaj dobré?

Na jednej strane máme natívne aplikácie, ktoré sú vo väčšine prípadov nepochybne rýchle a efektívne. Na druhej strane existujú webové stránky, ktoré sú trochu pomalé a s problémami s pripojením sa to ešte zhoršuje.

V roku 2016 bol spustený projekt Accelerated Mobile Pages Project (AMP), ktorý vedie spoločnosť Twitter a Google, aby sa vyriešili iba tieto problémy s pomalým pripojením. PWA fungujú bezchybne vo všetkých možných scenároch. Pri dobrom spojení nikdy nie je problém. Problém je, keď nemáme žiadne pripojenie a sme pozdravení s chybovou stránkou.

Toto však môže byť najotravnejšie, ak máme pomalé pripojenie. Zdá sa, že sa stránka načítava a vidíme iba prázdnu obrazovku. Čakáme, čakáme a čakáme, ale zdá sa, že sa stránka nikdy nenačíta. To je miesto, kde PWA prichádza na našu záchranu. To najlepšie o PWA - získate najlepšiu možnú užívateľskú skúsenosť pri pomalom pripojení, ako aj pri žiadnom pripojení (áno, čítate to dobre ..).

Prečo má zmysel používať PWA

Podľa štúdie strávi priemerný používateľ 80% svojho celkového času nad aplikáciami iba v troch svojich aplikáciách (pre mňa Chrome, Quora a Medium).

Ostatné aplikácie väčšinu času len nečinne trávia drahocennú časť pamäte. Okrem toho stojí vývoj aplikácie asi desaťkrát namiesto toho, aby ste pre ňu vytvorili webovú stránku. Cena sa môže oveľa zvýšiť, ak plánujete vyvinúť a udržiavať samostatné kódové základne pre rôzne platformy, ako sú Android, iOS a web.

Funkcie natívnej aplikácie, ktoré môžu PWA používať

  • Push notifikácie
  • Celá obrazovka
  • Práca offline
  • Je podporovaná úvodná obrazovka, ktorá dodáva aplikácii viac pocitu

PWA môžu využívať oveľa viac takýchto funkcií. Vyššie uvedené body slúžia iba na ilustráciu toho, čoho sú PWA schopné. Existuje však niekoľko tradičných funkcií, ktoré odteraz tešia iba natívne aplikácie.

Funkcie natívnej aplikácie, ktoré PWA odteraz nemôžu používať

  • Žiadny alebo veľmi obmedzujúci prístup k rôznym hardvérovým senzorom
  • Alarmy
  • Prístup k telefónnemu zoznamu
  • Úpravy nastavení systému

PWA sa vyvíjajú pomerne rýchlo a môžeme dúfať, že sa tieto funkcie dostanú do praxe čoskoro.

Dve hlavné zložky PWA

Manifest aplikácie

Je to súbor JSON, ktorý definuje ikonu aplikácie, spôsob spustenia aplikácie (samostatná, celá obrazovka, v prehliadači atď.) A všetky súvisiace informácie. Nachádza sa v koreňovom adresári vašej aplikácie. Odkaz na tento súbor je povinný na každej stránke, ktorá sa musí vykresliť.

Pridáva sa do hlavnej časti stránky HTML:

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.