Miksi progressiiviset verkkosovellukset ovat verkkokehityksen tulevaisuus?

”Avain on omaksua häiriöt ja muutos aikaisin. Älä reagoi siihen vuosikymmeniä myöhemmin. Et voi taistella innovaatioita vastaan. " - Ryan Kavanaugh

Viime aikoina PWA: n ympärillä on ollut paljon huhuja, ja monet väittävät sen olevan verkkokehityksen tulevaisuus, erityisesti mobiililaitteiden suhteen. Ytimessä Progressive Web App (PWA) on yksinkertaisesti verkkosovellus, joka käyttää moderneja verkkotekniikoita tarjoamaan natiivisovelluksen kaltaisen kokemuksen käyttäjille. Nämä ovat verkkosovelluksia, joissa on progressiivinen parannus sellaisten ominaisuuksien toteuttamiseen kuin välimuisti, taustasynkronointi ja push-ilmoitukset.

Vaikka PWA: t ovat olleet olemassa jo yli kahden vuoden ajan, vastaus on varsin surkea. Harvat suuret pelaajat ovat omaksuneet tämän filosofian, mutta useimmat eivät ole omaksuneet sitä kovin paljon. Chrome ja Mozilla ovat kenties parhaat selaimet PWA-laitteidesi testaamiseen, koska Apple ei ole vielä päässyt tähän sisältöön.

PWA - Onko se todella hyvä?

Toisaalta meillä on natiivisovelluksia, jotka ovat epäilemättä nopeita ja tehokkaita useimmissa tapauksissa. Toisaalta on verkkosivustoja, jotka ovat melko hitaita, ja yhteysongelmien kanssa se vain pahenee.

Twitterin ja Googlen johtama Accelerated Mobile Pages Project (AMP) käynnistettiin vuonna 2016 vain näiden hitaiden yhteysongelmien ratkaisemiseksi. PWA: t toimivat moitteettomasti kaikissa mahdollisissa tilanteissa. Hyvällä yhteydellä ei ole koskaan ongelmaa. Ongelmana on, kun meillä ei ole yhteyttä ja meidät tervehditään virhesivulla.

Mutta tästä voi tulla eniten ärsyttävää, jos meillä on hidas yhteys. Sivu näyttää latautuvan ja kaikki mitä näemme on tyhjä ruutu. Odotamme vain, odotamme ja odotamme, mutta sivu ei koskaan näytä latautuvan. Täällä PWA tulee pelastamaan. Parasta PWA-laitteista - saat parhaan mahdollisen käyttökokemuksen hitaassa yhteydessä ja ilman yhteyttä (joo, luit sen oikein ..).

Miksi on järkevää käyttää PWA: ta

Tutkimuksen mukaan keskimääräinen käyttäjä viettää 80% koko ajastaan ​​sovelluksiin vain kolmessa sovelluksessaan (Minulle sen Chrome, Quora ja Medium).

Muut sovellukset ovat vain käyttämättömiä suurimman osan ajasta, mikä vie arvokkaan osan muistista. Lisäksi sovelluksen kehittäminen maksaa noin kymmenen kertaa pikemminkin kuin verkkosivuston luominen samalle. Kustannukset voivat nousta paljon korkeammiksi, jos aiot kehittää ja ylläpitää erillisiä koodipohjia eri alustoille, kuten Android, iOS ja verkko.

Alkuperäiset sovelluksen ominaisuudet, joita PWA: t voivat käyttää

  • Push-ilmoitukset
  • Koko näyttö
  • Offline-työskentely
  • Splash-näyttöä tuetaan antamalla sille enemmän sovelluksen tyyliä

PWA: t voivat käyttää monia muita ominaisuuksia. Yllä olevat kohdat antavat vain vihjeen PWA: iden kyvystä. On kuitenkin joitain perinteisiä ominaisuuksia, joista vain natiivisovellukset nauttivat nyt.

Natiivisovelluksen ominaisuudet, joita PWA: t eivät voi käyttää tällä hetkellä

  • Ei tai erittäin rajoitetusti pääsyä erilaisille laitteistoantureille
  • Hälytykset
  • Puhelinluettelon käyttö
  • Järjestelmäasetusten muuttaminen

PWA: t kehittyvät melko nopeasti, ja voimme toivoa näiden ominaisuuksien toimivan melko pian.

Kaksi PWA: n pääkomponenttia

Sovelluksen ilmentymä

Se on JSON-tiedosto, joka määrittelee sovelluskuvakkeen, sovelluksen käynnistämisen (itsenäinen, koko näytön kokoinen, selaimessa jne.) Ja kaikki vastaavat tiedot. Se sijaitsee sovelluksesi juuressa. Linkki tähän tiedostoon vaaditaan jokaisella renderöitävällä sivulla.

Se lisätään HTML-sivun pääosaan:

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.