Mitä ovat progressiiviset verkkosovellukset ja miten voin asentaa sellaisen?

Mitä ovat progressiiviset verkkosovellukset ja miten voin asentaa sellaisen?

Sovellukset hallitsevat puhelintasi. Sovellukset eivät pitkään aikaan vaikuttaneet työpöydällesi tai selaimeesi samalla tavalla. Se on muuttunut viime vuosina. Progressiiviset verkkosovellukset (PWA) kasvavat ja muuttavat vuorovaikutustamme kaikenlaisten verkkosivustojen kanssa.





Mutta mikä tarkalleen ottaen on progressiivinen verkkosovellus? Mitä PWA tekee, mitä verkkosivusto ei tee? Tässä on mitä sinun on tiedettävä progressiivisista verkkosovelluksista.



Mikä on progressiivinen verkkosovellus?

Progressiiviset verkkosovellukset ovat verkkosovelluksia, jotka tarjoavat käyttäjille tavallisen sivuston, mutta näkyvät natiivina mobiilisovelluksena. PWA -yritykset pyrkivät tuomaan alkuperäisen mobiilisovelluksen käytettävyyden nykyaikaisiin selainominaisuuksiin ja hyödyntämään täysimääräisesti molempien kehitysalueiden edistystä.





Mikä sitten määrittelee PWA: n?

  • Yleinen : PWA: n on toimittava saumattomasti (melkein) jokaiselle käyttäjälle selaimesta riippumatta.
  • Reagoiva : PWA -laitteiden pitäisi toimia minkä tahansa laitteen, kuten kannettavan tietokoneen, tabletin, älypuhelimen ja niin edelleen.
  • Design : suunnittelun pitäisi jäljitellä alkuperäisiä mobiilisovelluksia, mikä tarkoittaa virtaviivaisia, helposti löydettäviä valikoita ja yksinkertaista vuorovaikutteisuutta lisäominaisuuksia varten.
  • Turvallinen : PWA -laitteiden tulisi käyttää HTTPS -protokollaa pitääkseen käyttäjätiedot turvassa.
  • Havaittavissa: käyttäjät voivat löytää PWA: ita, ja ne on helppo tunnistaa sovellukseksi ('sivuston' sijaan).
  • Sitoumus: PWA: lla on oltava pääsy natiiviin sitoutumisominaisuuksiin, kuten push -ilmoituksiin.
  • Päivitykset: PWA: t ovat ajan tasalla ja palvelevat palvelun tai sivuston uusimpia versioita.
  • Asennus: avulla käyttäjät voivat helposti asentaa PWA: n aloitusnäyttöön tarvitsematta sovelluskauppaa.
  • Jakaminen: PWA: t tarvitsevat vain yhden URL -osoitteen jakamiseen ilman asennusta.

Kuten näette, PWA: t pyrkivät tarjoamaan käyttäjille täyden verkkosivukokemuksen natiivisovelluksen virtaviivaistetuilla ominaisuuksilla ja käyttöliittymäsuunnittelulla.



Miten progressiivinen verkkosovellus toimii?

Avain progressiivisiin verkkosovelluksiin ovat selainpalvelutyöntekijät.

Huoltotyöntekijä on skripti, joka toimii selaimesi taustalla, 'erillään verkkosivusta, joka avaa oven ominaisuuksille, jotka eivät tarvitse verkkosivua tai käyttäjän vuorovaikutusta'. Voit käyttää huoltotyöntekijöitä, kuten push -ilmoitukset ja taustan synkronointi tällä hetkellä, mutta PWA: n välitön tulevaisuus antaa näille skripteille enemmän valtaa.



Siten huoltotyöntekijät muodostavat PWA -standardin perustan käyttämällä web -välimuistia lähes välittömiin tuloksiin.

Ennen huoltotyöntekijöitä selaimen välimuistikomentosarja oli Sovellusvälimuisti (tai Sovellusvälimuisti). Sovellusvälimuisti sisältää laajan valikoiman offline-palveluja, mutta se oli hieman altis virheille. Lisäksi App Cachella on useita tunnettuja rajoituksia, kuten Lista lukuun ottamatta selittää.



Suurin ongelma kehittäjille on kuitenkin se, että AppCache ei toimi suoraan vuorovaikutuksessa AppCachen kanssa, mikä estää kehittäjiä korjaamasta tarkasti ongelmia niiden syntyessä. Verkkosivustot ja palvelut, joissa on kaikki offline -toiminnot, olivat puolestaan ​​riskialtis valinta.

Huoltotyöntekijät kestävät kuitenkin vain niin kauan kuin heidän toimintaansa vaaditaan. PWA: ssa, kun napsautat jotain tai käytät ominaisuutta, huoltotyöntekijä ryhtyy toimiin. Huoltotyöntekijä (muista, se on komentosarja) käsittelee tapahtuman ja päättää, voiko offline -välimuisti suorittaa pyynnön. Ajatuksena on, että PWA: lla on useita offline -välimuisteja, joista valita, mikä tarjoaa paljon laajemman valikoiman offline -toimintoja.

Lisäksi välimuisti ei ole vain offline -nopeuden lisäämiseen. Olet esimerkiksi menossa PWA: han, mutta yhteys on erittäin hajanainen. Huoltotyöntekijä palvelee edellisen välimuistin täysin toimivana keskeyttämättä kokemustasi.

Progressiivinen Web App Browser -tuki

Progressiivisen verkkosovelluksen käyttöön liittyy kaksi vaatimusta: yhteensopiva selain ja PWA-yhteensopiva palvelu.

Katsotaanpa ensin selaimia. Voit tarkistaa PWA -selaimen tuen kahdella tavalla. Ensimmäinen on Jake Archibald's Onko huoltotyöntekijä valmis ? joka näyttää kätevästi tärkeimpien selainten PWA-valmiustilan sekä Samsungin Internetin.

Saat tarkemman yleiskatsauksen PWA -selaimen tuesta tarkistamalla Voinko käyttää , verkkosivusto, joka on erikoistunut luetteloimaan eri verkko- ja selaintekniikoiden toteutukset selainversioiden mukaan. Jos esimerkiksi kirjoitat hakupalkkiin 'huoltotyöntekijät', löydät taulukon, jossa näkyy versionumero, jolla jokainen selain toteutti PWA -palvelun työntekijät.

Voinko käyttää huoltotyöntekijöitä -taulukko vahvistaa, että kaikki suuret selaimet tukevat PWA: ta. Se kuvaa myös PWA -tukea useille vaihtoehtoisille pöytäselaimille ja mobiiliselaimille.

Rikkoo sitä hieman lisää:

  • Työpöytäselain (täysi tuki): Chrome, Firefox, Opera, Edge, Safari
  • Työpöytäselain (osittainen tuki/vanhentunut versio): QQ -selain, Baidu -selain
  • Mobiiliselain (täysi tuki): Chrome, Firefox, Safari, UC -selain, Samsung Internet, Mint Browser, Wechat
  • Mobiiliselain (osittainen tuki/vanhentunut versio): QQ -selain, Android -selain, Opera Mobile

Joten kaikki suuret selaimet tukevat PWA: ita. Microsoft Edge ja Safari ovat viimeisimmät lisäykset täydelliseen tukiluetteloon. Sitä vastoin sekä QQ -selain että Baidu -selain käyttävät nyt vanhentuneita versioita ja ovat siten pudonneet toiselle tasolle.

Progressiivisen verkkosovelluksen löytäminen ja asentaminen

Nyt kun tiedät, mitä selainta haluat käyttää, voit harkita PWA: n etsimistä ja asentamista. Tässä esimerkissä käytän Samsung Galaxy S8: a Google Chromen kanssa.

Progressiivisia verkkosovelluksia on kaikkialla. Monet yritykset ovat mukauttaneet sivustojaan ja palveluitaan tarjoamaan Progressive Web App -version. Usein saatat kohdata PWA: n, kun siirryt etusivulle tai mobiilipalvelusivustolle, mikä käynnistää Lisää aloitusnäytölle valintaikkuna.

Katso alla olevasta videosta, mitä tapahtuu, kun vierailet Twitterin mobiilisivusto .

Tietenkin vierailu lukemattomilla sivustoilla ja toivo nähdä aloitusnäytön laukaisimen ei ole hyödyllistä. Itse asiassa se on suorastaan ​​aikaa vievää. Onneksi sinun ei tarvitse tehdä sitä, koska on olemassa pari sivustoa, jotka on omistettu PWA: iden luetteloinnille.

Ensimmäinen yritys ulos . Siinä luetellaan melko kunnollinen valikoima PWA -laitteita, ja uusia vaihtoehtoja esiintyy usein. Kokeile seuraavaksi pwa.rocks. Siinä on pienempi valikoima, mutta joitain käteviä PWA -laitteita, jotka haluat lisätä laitteeseesi.

Lisäksi tammikuussa 2019 Chrome 72 Androidille toimitti Trusted Web Activity (TWA) -toiminnon. TWA sallii Chrome -välilehtien avaamisen itsenäisessä tilassa. Tämä puolestaan ​​sallii PWA: iden esiintyä Google Play -sovelluskaupassa. Ensimmäiset Google Playssa ilmestyneet PWA: t olivat ensimmäiset Twitter Lite , Instagram Lite ja Google Maps Go , ja enemmän asetuksia tulee näkyviin ajan myötä.

Kuvagalleria (2 kuvaa) Laajentaa Laajentaa kiinni

Korvaavatko progressiiviset verkkosovellukset natiivisovellukset?

Progressiiviset verkkosovellukset ovat erinomainen hybridivaihe selaimen ja alkuperäisen mobiilisovelluksen välillä. Korvaavatko PWA: t natiivisovellukset kokonaan? Se on kova ei minulta. PWA: t ovat loistavia kevyinä tarjouksina, mutta koska ne keskittyvät tällä hetkellä pääasiassa olemassa olevien sivustojen ja palvelujen toistamiseen, ne eivät korvaa natiivisovelluksia.

Ei ainakaan toistaiseksi.

kuinka nähdä poistetut viestit messengerissä

PWA -laitteet toimivat kuitenkin. PWA Statsin saatavilla olevat tiedot tukevat myös tätä. Seuraavassa on muutamia mielenkiintoisia numeroita, jotka havainnollistavat, kuinka PWA: t muuttavat vuorovaikutustamme yleisesti käytettyjen verkkosivustojen kanssa:

  • Trivago lisäsi 150 prosenttia käyttäjien sitoutumisesta aloitusnäyttöön.
  • Forbesin PWA -kotisivu latautuu kokonaan vain 0,8 sekunnissa, kun taas näyttökertoja käyntiä kohden kasvaa 10 prosenttia. Forbesin PWA näki myös käyttäjän istunnon pituuden kaksinkertaistuneen.
  • Twitter Liten sivujen määrä kasvoi 65 prosenttia istuntoa kohden, ja twiittien määrä kasvoi valtavasti 75 prosenttia. Se on myös vuorovaikutteinen 'alle 5 sekunnissa 3G: n kautta'.
  • Alibabassa mobiilikonversioiden määrä kasvoi 76 prosenttia.

PWA: t eivät ole vielä valtavirtaa. Mutta niiden tarjoamien valtavien etujen, kuten laitteen säästämisen, ansiosta kuulet niistä enemmän tulevaisuudessa.

Jaa Jaa Tweet Sähköposti Aloittelijan opas puheen animointiin

Puheen animointi voi olla haaste. Jos olet valmis aloittamaan vuoropuhelun lisäämisen projektiin, jaamme prosessin puolestasi.

Lue seuraava Liittyvät aiheet Kirjailijasta Gavin Phillips(945 artikkelia julkaistu)

Gavin on Windows- ja Technology Explainedin Junior Editor, säännöllisesti Really Useful Podcastin toimittaja ja säännöllinen tuotearvioija. Hänellä on BA (Hons) Contemporary Writing ja digitaaliset taidekäytännöt, jotka on ryöstetty Devonin kukkuloilta, sekä yli vuosikymmenen ammattikirjallinen kokemus. Hän nauttii runsaasti teetä, lautapelejä ja jalkapalloa.

Lisää Gavin Phillipsiltä

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi