Hva er progressive web -apper og hvordan installerer jeg en?

Hva er progressive web -apper og hvordan installerer jeg en?

Apper dominerer telefonen din. I lang tid påvirket ikke apper skrivebordet eller nettleseren din på samme måte. Det har endret seg de siste årene. Progressive Web Apps (PWA) vokser i vekst og endrer interaksjonen vår med alle slags nettsteder.





Men hva er egentlig en Progressive Web App? Hva gjør en PWA som et nettsted ikke gjør? Her er hva du trenger å vite om Progressive Web Apps.



Hva er en progressiv nettapp?

Progressive Web Apps er webapplikasjoner som tilbyr et vanlig nettsted for brukere, men som fremstår som en mobilapp. PWA -er prøver å bringe brukervennligheten til en innfødt mobilapp til det moderne nettlesersfunksjonssettet, og dra full nytte av fremskritt på begge utviklingsområder.





Hva definerer en PWA, da?

  • Universell : en PWA må fungere sømløst (vel, nesten) for hver bruker, uavhengig av nettleseren.
  • Mottakelig : PWA -er bør fungere med alle enheter, for eksempel den bærbare datamaskinen, nettbrettet, smarttelefonen og så videre.
  • Design : Designet skal etterligne native mobile apps, noe som betyr strømlinjeformede menyer som er enkle å finne, med enkel interaktivitet for avanserte funksjoner.
  • Sikker : PWA -er bør bruke HTTPS for å holde brukerdata sikre.
  • Oppdagbar: brukere kan finne PWA -er, og de kan lett identifiseres som et program (i stedet for et 'nettsted').
  • Engasjement: en PWA må ha tilgang til integrerte engasjementsfunksjoner som push -varsler.
  • Oppdateringer: PWA -er forblir oppdaterte og viser de nyeste versjonene av en tjeneste eller et nettsted.
  • Installasjon: tillate brukere å enkelt 'installere' PWA på startskjermen uten at de trenger en appbutikk.
  • Deling: PWAer krever bare en enkelt URL for å dele, uten installasjon.

Som du kan se, har PWA -er som mål å gi brukerne en fullstendig nettstedopplevelse med de strømlinjeformede funksjonene og grensesnittdesignet til en integrert app.



Hvordan fungerer en progressiv nettapp?

Nøkkelen til Progressive Web Apps er nettlesertjenestearbeidere.

En servicearbeider er et skript som kjører i bakgrunnen i nettleseren din, 'atskilt fra en webside, og åpner døren for funksjoner som ikke trenger en webside eller brukerinteraksjon.' Du kan bruke servicearbeidere som pushvarsler og bakgrunnssynkronisering for øyeblikket, men den umiddelbare PWA -fremtiden gir disse skriptene større kraft.



Som sådan danner servicearbeidere grunnlaget for PWA -standarden, ved å bruke webbufferen for nesten øyeblikkelige resultater.

Før servicearbeidere var skriptbuffer-skriptet for nettlesere Application Cache (eller App Cache). App Cache-funksjoner i et bredt spekter av tjenester som er offline-først, men var noe utsatt for feil. Videre har App Cache flere kjente begrensninger, som En liste fra hverandre forklarer.



Men hovedproblemet for utviklere er mangel på direkte interaksjon med nøyaktig hvordan AppCache fungerer, og stopper utviklere med å fikse problemer nøyaktig når de oppstår. På sin side var nettsteder og tjenester med full frakoblet funksjonalitet et risikabelt valg.

Servicearbeidere varer imidlertid bare så lenge det er nødvendig med handling. Når du klikker på noe eller bruker en funksjon i en PWA, kommer en servicearbeider til handling. Servicearbeideren (husk, det er et skript) behandler hendelsen og bestemmer om offline -bufferen kan fullføre forespørselen. Tanken er at det er flere offline -hurtigbuffere for PWA å velge mellom, noe som gir et mye bredere spekter av offline -funksjonalitet.

I tillegg er hurtigbufferen ikke bare for hastighetsøkninger uten nett. For eksempel går du til en PWA, men forbindelsen din er ekstremt ujevn. Servicearbeideren serverer en tidligere hurtigbuffer, fullt fungerende, uten å avbryte opplevelsen din.

Progressiv nettleserstøtte for apper

Det er to krav for å bruke en Progressive Web App: en kompatibel nettleser og en PWA-aktivert tjeneste.

La oss først se på nettlesere. Du har to alternativer for å sjekke PWA -nettleserstøtte. Den første er Jake Archibalds Er servicearbeider klar ? som praktisk viser PWA-klar status for de store nettleserne, pluss Samsung internett.

For en mer detaljert oversikt over PWA -nettleserstøtte, bør du sjekke ut Kan jeg bruke , et nettsted som spesialiserer seg på å liste implementeringen av ulike web- og nettleserteknologier etter nettleserversjon. For eksempel, hvis du skriver inn 'tjenestearbeidere' i søkefeltet, finner du en tabell som viser versjonsnummeret som hver nettleser implementerte PWA -tjenestearbeidere med.

Tabellen Can I Use Service Workers bekrefter at de store nettleserne alle støtter PWA -er. Den illustrerer også PWA -støtte for flere alternative stasjonære nettlesere og mobile nettlesere.

Bryter det ned litt mer:

  • Desktop -nettleser (Full støtte): Chrome, Firefox, Opera, Edge, Safari
  • Desktop -nettleser (delvis støtte/utdatert versjon): QQ Browser, Baidu Browser
  • Mobilleser (Full støtte): Chrome, Firefox, Safari, UC Browser, Samsung internett, Mint Browser, Wechat
  • Mobilleser (delvis støtte/utdatert versjon): QQ -nettleser, Android -nettleser, Opera Mobile

Så de store nettleserne støtter alle PWAer. Microsoft Edge og Safari er de siste tilleggene til hele støttelisten. Motsatt bruker både QQ -nettleseren og Baidu -nettleseren nå utdaterte versjoner og har som sådan falt ned i andre nivå.

Hvordan finne og installere en progressiv webapp

Nå som du vet hvilken nettleser du skal bruke, kan du tenke på å søke etter og installere en PWA. I dette eksemplet bruker jeg en Samsung Galaxy S8 med Google Chrome.

Progressive Web -apper er overalt. Mange selskaper har tilpasset nettstedene og tjenestene sine for å tilby en Progressive Web App -versjon. I mange tilfeller vil du først støte på en PWA når du går til hjemmesiden eller mobilnettstedet, som utløser Legg til på startskjermbildet dialogboks.

Se videoen nedenfor for å se hva som skjer når du besøker Twitter mobilnettsted .

Selvfølgelig er det ikke nyttig å besøke utallige nettsteder og håpe å se startskjermen. Faktisk er det rett og slett tidkrevende. Heldigvis trenger du ikke gjøre det, da det er et par nettsteder dedikert til å katalogisere PWAer.

Første forsøk outweb . Den viser et ganske anstendig utvalg av PWA, med nye alternativer som ofte vises. Prøv deretter pwa.rocks. Den har et mindre utvalg, men noen praktiske PWA -er som du vil legge til på enheten din.

I januar 2019 ble Chrome 72 for Android levert med Trusted Web Activity (TWA). TWA lar Chrome -faner åpne i en frittstående modus. Dette gjør at PWA -er kan brukes i Google Play -appbutikken. De første PWA -ene som ble vist på Google Play var Twitter Lite , Instagram Lite og Google Maps Go , med mer som skal vises over tid.

Bildegalleri (2 bilder) Utvide Utvide Lukk

Vil progressive web -apper erstatte opprinnelige apper?

Progressive Web Apps er et utmerket hybrid -trinn mellom nettleseren din og en mobilapp. Vil PWA -er erstatte opprinnelige apper helt? Det er et vanskelig nei fra meg. PWA -er er gode som et lett tilbud, men gitt at de for tiden hovedsakelig fokuserer på å replikere eksisterende nettsteder og tjenester, vil de ikke erstatte opprinnelige apper.

I hvert fall ikke foreløpig.

hva kan noen gjøre med simkortet ditt?

PWAer fungerer imidlertid. Dataene som er tilgjengelige hos PWA Stats, støtter også dette. Her er noen interessante tall som illustrerer hvordan PWA endrer interaksjonen vår med vanlige nettsteder:

  • Trivago opplevde en økning på 150 prosent engasjement for brukere som legger til PWA på en startskjerm.
  • Forbes 'PWA' hjemmeside starter helt på bare 0,8 sekunder, mens visninger per besøk er opp 10 prosent. Forbes 'PWA så også brukersøktlengder doble.
  • Twitter Lite hadde en 65 prosent økning i sider per økt, med en massiv 75 prosent økning i tweets. Det er også interaktivt 'på mindre enn 5 sekunder over 3G.'
  • Alibaba opplevde en økning på 76 prosent i mobilkonverteringer.

PWA er ennå ikke vanlige. Men med det store utvalget av fordeler de gir, for eksempel å spare plass på enheten din, vil du høre mer om dem i fremtiden.

Dele Dele kvitring E -post En nybegynnerguide for animering av tale

Å animere tale kan være en utfordring. Hvis du er klar til å begynne å legge til dialog i prosjektet ditt, bryter vi ned prosessen for deg.

Les neste Relaterte temaer Om forfatteren Gavin Phillips(945 artikler publisert)

Gavin er Junior Editor for Windows and Technology Explained, en fast bidragsyter til den virkelig nyttige podcasten, og en vanlig produktanmelder. Han har en BA (Hons) Contemporary Writing with Digital Art Practices plyndret fra åsene i Devon, i tillegg til over et tiår med profesjonell skriveerfaring. Han liker store mengder te, brettspill og fotball.

Mer fra Gavin Phillips

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere