Hvad er progressive web -apps, og hvordan installerer jeg en?

Hvad er progressive web -apps, og hvordan installerer jeg en?

Apps dominerer din telefon. I lang tid påvirkede apps ikke dit skrivebord eller din browser på samme måde. Det har ændret sig i de senere år. Progressive Web Apps (PWA'er) vokser i statur og ændrer vores interaktioner med alle slags websteder.





Men hvad er egentlig en Progressive Web App? Hvad gør en PWA, som et websted ikke gør? Her er hvad du behøver at vide om Progressive Web Apps.



Hvad er en progressiv webapp?

Progressive Web Apps er webapplikationer, der tilbyder et almindeligt websted til brugere, men som fremstår som en native mobilapp. PWA'er forsøger at bringe brugervenligheden af ​​en indfødt mobilapp til det moderne browsers funktionssæt og drage fuld fordel af fremskridt inden for begge udviklingsområder.





Hvad definerer en PWA, så?

  • Universel : en PWA skal fungere problemfrit (godt, næsten) for hver bruger, uanset deres browser.
  • Lydhør : PWA'er skal fungere med enhver enhed, f.eks. Din bærbare computer, tablet, smartphone osv.
  • Design : designet skal efterligne native mobile apps, hvilket betyder strømlinede, let tilgængelige menuer med enkel interaktivitet til avancerede funktioner.
  • Sikker : PWA'er skal bruge HTTPS til at holde brugerdata sikre.
  • Opdagelig: brugere kan finde PWA'er, og de kan let identificeres som en applikation (snarere end et 'websted').
  • Engagement: en PWA skal have adgang til native engagement -funktioner som f.eks. push -meddelelser.
  • Opdateringer: PWA'er forbliver opdaterede og betjener de nyeste versioner af en tjeneste eller et websted.
  • Installation: give brugerne mulighed for let at 'installere' PWA på deres startskærm uden at have brug for en appbutik.
  • Deling: PWA'er kræver kun en enkelt URL for at dele, uden nogen installation.

Som du kan se, har PWA'er til formål at give brugerne en fuldstændig webstedsoplevelse med de strømlinede funktioner og interface design af en native app.



Hvordan fungerer en progressiv webapp?

Nøglen til Progressive Web Apps er medarbejdere i browsertjenester.

En servicemedarbejder er et script, der kører i baggrunden af ​​din browser, 'adskilt fra en webside, der åbner døren for funktioner, der ikke kræver en webside eller brugerinteraktion.' Du kan bruge servicemedarbejdere som push -meddelelser og baggrundsynkronisering i øjeblikket, men den umiddelbare PWA -fremtid giver disse scripts større magt.



Som sådan udgør servicemedarbejdere grundlaget for PWA -standarden ved hjælp af webcachen til næsten øjeblikkelige resultater.

Før servicemedarbejdere var go-to browser-cache-script Application Cache (eller App Cache). Appcache har en bred vifte af offline-first-tjenester, men var noget tilbøjelig til fejl. Desuden har App Cache flere velkendte begrænsninger, som En liste fra hinanden forklarer.



Men hovedproblemet for udviklere er mangel på direkte interaktion med præcis, hvordan AppCache fungerer, hvilket forhindrer udviklere i at rette problemer præcist, når de opstår. Til gengæld var websteder og tjenester med fuld offline funktionalitet et risikabelt valg.

Servicemedarbejdere varer dog kun, så længe deres handling er påkrævet. Når du klikker på noget eller bruger en funktion i en PWA, kommer en servicemedarbejder i gang. Servicemedarbejderen (husk, det er et script) behandler hændelsen og beslutter, om offlinecachen kan fuldføre anmodningen. Ideen er, at der er flere offline -cacher, som PWA kan vælge imellem, hvilket giver en meget bredere vifte af offline -funktioner.

Derudover er cachen ikke kun til offlinehastighedsforøgelser. For eksempel går du til en PWA, men din forbindelse er ekstremt ujævn. Servicemedarbejderen serverer en tidligere cache, der fungerer fuldt ud, uden at afbryde din oplevelse.

Progressiv webbrowserunderstøttelse

Der er to krav til brug af en Progressive Web App: en kompatibel browser og en PWA-aktiveret service.

Lad os først se på browsere. Du har to muligheder for at kontrollere PWA -browsersupport. Den første er Jake Archibalds Er servicearbejder klar ? som praktisk viser PWA-klar status for de store browsere plus Samsung internet.

For en mere detaljeret oversigt over PWA -browsersupport, bør du tjekke ud Kan jeg bruge , et websted, der har specialiseret sig i at liste implementeringen af ​​forskellige web- og browserteknologier efter browserversion. Hvis du f.eks. Indtaster 'servicemedarbejdere' i søgelinjen, finder du en tabel, der viser det versionsnummer, som hver browser implementerede PWA -servicearbejdere med.

Tabellen Can I Use Service Workers bekræfter, at de store browsere alle understøtter PWA'er. Det illustrerer også PWA -understøttelser til flere alternative desktopbrowsere og mobile browsere.

Bryder det lidt mere ned:

  • Desktop -browser (fuld support): Chrome, Firefox, Opera, Edge, Safari
  • Desktopbrowser (delvis support/forældet version): QQ Browser, Baidu Browser
  • Mobil browser (fuld support): Chrome, Firefox, Safari, UC Browser, Samsung internet, Mint Browser, Wechat
  • Mobil browser (delvis support/forældet version): QQ Browser, Android Browser, Opera Mobile

Så de store browsere understøtter alle PWA'er. Microsoft Edge og Safari er de seneste tilføjelser til den fulde supportliste. Omvendt bruger både QQ Browser og Baidu Browser nu forældede versioner og er som sådan faldet til det andet niveau.

Sådan finder og installerer du en progressiv webapp

Nu hvor du ved, hvilken browser du skal bruge, kan du overveje at søge efter og installere en PWA. I dette eksempel bruger jeg en Samsung Galaxy S8 med Google Chrome.

Progressive webapps er overalt. Mange virksomheder har tilpasset deres websteder og tjenester til at tilbyde en Progressive Web App -version. I mange tilfælde støder du først på en PWA, når du går til hjemmesiden eller mobilwebstedet, der udløser Føj til startskærm dialog boks.

Tjek videoen herunder for at se, hvad der sker, når du besøger Twitter mobilwebsted .

Selvfølgelig er det ikke nyttigt at besøge utallige websteder og håbe på at se startskærmudløseren. Faktisk er det direkte tidskrævende. Heldigvis behøver du ikke at gøre det, da der er et par websteder dedikeret til at katalogisere PWA'er.

Prøv først outweb . Det viser en temmelig anstændig række PWA'er, med nye muligheder, der ofte vises. Prøv derefter pwa.rocks. Det har et mindre udvalg, men nogle praktiske PWA'er, som du gerne vil tilføje til din enhed.

Desuden blev Chrome 72 til Android i januar 2019 sendt med Trusted Web Activity (TWA). TWA tillader, at Chrome -faner åbnes i en standalone -tilstand. Til gengæld giver dette PWA'er mulighed for at blive vist i appbutikken i Google Play. De første par PWA'er, der blev vist på Google Play, var Twitter Lite , Instagram Lite og Google Maps Go , med mere indstillet til at blive vist over tid.

Billedgalleri (2 billeder) Udvide Udvide Tæt

Vil progressive web -apps erstatte indfødte apps?

Progressive webapps er et glimrende hybrid -trin mellem din browser og en native mobilapp. Vil PWA'er erstatte native apps helt? Det er et hårdt nej fra mig. PWA'er er gode som lette tilbud, men da de i øjeblikket overvejende fokuserer på at replikere eksisterende websteder og tjenester, erstatter de ikke native apps.

I hvert fald ikke foreløbig.

gratis online filmsteder ingen tilmelding

PWA'er virker dog. De tilgængelige data på PWA Stats understøtter også dette. Her er et par interessante tal, der illustrerer, hvordan PWA'er ændrer vores interaktion med almindeligt anvendte websteder:

  • Trivago oplevede en stigning på 150 procent engagement for brugere, der tilføjede deres PWA til en startskærm.
  • Forbes 'PWA' -hjemmeside indlæses fuldstændigt på bare 0,8 sekunder,' mens visninger pr. Besøg stiger med 10 procent. Forbes 'PWA så også brugersessionlængder fordoblet.
  • Twitter Lite oplevede en stigning på 65 procent i sider pr. Session med en massiv stigning på 75 procent i tweets. Det er også interaktivt 'på mindre end 5 sekunder over 3G.'
  • Alibaba oplevede en stigning på 76 procent i mobilkonverteringer.

PWA'er er endnu ikke mainstream. Men med den enorme række fordele, de giver, såsom at spare plads på din enhed, hører du mere om dem i fremtiden.

Del Del Tweet E -mail En begyndervejledning til animering af tale

Animering af tale kan være en udfordring. Hvis du er klar til at begynde at tilføje dialog til dit projekt, nedbryder vi processen for dig.

Læs Næste Relaterede emner Om forfatteren Gavin Phillips(945 artikler udgivet)

Gavin er Junior Editor for Windows og Technology Explained, en regelmæssig bidragsyder til den virkelig nyttige podcast og en regelmæssig produktanmelder. Han har en BA (Hons) Contemporary Writing med digitale kunstpraksis pillet fra Devons bakker samt over et årti med professionel skriveerfaring. Han nyder rigelige mængder te, brætspil og fodbold.

Mere fra Gavin Phillips

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere