Kodėl progresyvios žiniatinklio programos yra interneto plėtros ateitis

„Svarbiausia yra anksti priimti sutrikimus ir pokyčius. Nereaguokite į tai po dešimtmečių. Negalite kovoti su naujovėmis “. - Ryanas Kavanaughas

Pastaruoju metu aplink PWA kilo daug ažiotažo ir daugelis teigė, kad tai ateities žiniatinklio kūrimo ateitis, ypač kalbant apie mobiliuosius įrenginius. Savo esme „Progressive Web App“ (PWA) yra tiesiog žiniatinklio programa, naudojanti šiuolaikines žiniatinklio technikas, kad vartotojams būtų suteikta savoji programa. Tai yra žiniatinklio programos su laipsnišku patobulinimu, kad būtų įdiegtos tokios funkcijos kaip talpykla, sinchronizavimas fone ir tiesioginiai pranešimai.

Nors PWA egzistuoja daugiau nei dvejus metus, atsakas yra gana pribloškiantis. Nedaug didelių žaidėjų pasirinko šią filosofiją, tačiau dauguma jų nelabai perėmė. „Chrome“ ir „Mozilla“ yra bene geriausios naršyklės norint išbandyti jūsų PWA, nes „Apple“ dar neturi įsitraukti į šią medžiagą.

PWA - ar tikrai gerai?

Viena vertus, turime vietinių programų, kurios, be abejo, daugeliu atvejų yra greitos ir efektyvios. Kita vertus, yra svetainių, kurios yra gana lėtos ir dėl ryšio problemų ji tik blogėja.

„Twitter“ ir „Google“ vadovaujamas „Accelerated Mobile Pages Project“ (AMP) buvo pradėtas 2016 m., Siekiant išspręsti tik tas lėtojo ryšio problemas. PWA veikia nepriekaištingai visais įmanomais atvejais. Turint gerą ryšį, niekada nėra problemų. Problema yra tada, kai mes neturime ryšio ir mus pasitinka klaidos puslapis.

Bet tai gali tapti labiausiai erzinantis, jei turime lėtą ryšį. Panašu, kad puslapis kraunamas ir viskas, ką matome, yra tuščias ekranas. Mes tiesiog laukiame, laukiame ir laukiame, bet atrodo, kad puslapis niekada neįkeliamas. Čia PWA mus gelbsti. Geriausia dalis apie PWA - jūs gaunate geriausią įmanomą vartotojo patirtį lėtam ryšiui ir be ryšio (taip, jūs gerai perskaitėte ..).

Kodėl prasminga naudoti PWA

Remiantis tyrimu, vidutinis vartotojas 80% viso savo laiko praleidžia programose tik trijose savo programose (man jos „Chrome“, „Quora“ ir „Medium“).

Kitos programos didžiąją laiko dalį tiesiog neveikia, o tai sunaudoja brangią atminties dalį. Be to, sukurti apytiksliai dešimt kartų kuriama programa, o ne sukuriama tam skirta svetainė. Kaina gali būti daug didesnė, jei planuojate sukurti ir palaikyti atskiras skirtingų platformų, pvz., „Android“, „iOS“ ir žiniatinklio, kodų bazes.

Gimtosios programos funkcijos, kurias gali naudoti PWA

  • Spaudiniai pranešimai
  • Per visą ekraną
  • Darbas neprisijungus
  • Palaikomas purslų ekranas, suteikiantis jam daugiau programų, tokių kaip jaustis

PWA gali naudoti dar daug tokių funkcijų. Pirmiau pateikti punktai tik suteikia jums užuominą apie tai, ką sugeba PWA. Tačiau yra keletas tradicinių funkcijų, kuriomis dabar naudojasi tik vietinės programos.

Gimtosios programos funkcijos, kurių PWA dabar negali naudoti

  • Nėra arba labai ribojama prieiga prie skirtingų aparatūros jutiklių
  • Aliarmai
  • Telefonų knygos prieiga
  • Modifikuoti sistemos nustatymus

PWA vystosi gana greitai, ir mes galime tikėtis, kad šios funkcijos greitai veiks.

Du pagrindiniai PWA komponentai

Programos manifestas

Tai JSON failas, kuriame apibrėžiama programos piktograma, kaip paleisti programą (atskirą, viso ekrano režimą, naršyklėje ir pan.) Ir visa kita susijusi informacija. Jis yra jūsų programos šaknyje. Kiekviename puslapyje, kurį reikia pateikti, būtina pateikti nuorodą į šį failą.

Jis pridedamas HTML puslapio antraštės skiltyje:

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.