Vad är progressiva webbappar och hur installerar jag en?

Vad är progressiva webbappar och hur installerar jag en?

Appar dominerar din telefon. Under lång tid påverkade appar inte ditt skrivbord eller webbläsare på samma sätt. Det har förändrats de senaste åren. Progressiva webbappar (PWA) växer i statur och förändrar vår interaktion med alla möjliga webbplatser.





Men vad är egentligen en progressiv webbapp? Vad gör en PWA som en webbplats inte gör? Här är vad du behöver veta om Progressive Web Apps.



Vad är en progressiv webbapp?

Progressiva webbappar är webbapplikationer som erbjuder en vanlig webbplats för användare men som visas som en mobilapp. PWA: er försöker få användbarheten för en inbyggd mobilapp till den moderna webbläsarfunktionsuppsättningen och dra full nytta av framstegen inom båda utvecklingsområdena.





Vad definierar då en PWA?

  • Universell : en PWA måste fungera sömlöst (ja, nästan) för varje användare, oavsett webbläsare.
  • Mottaglig : PWA: er ska fungera med alla enheter, till exempel din bärbara dator, surfplatta, smartphone och så vidare.
  • Design : designen ska efterlikna inbyggda mobilappar, vilket innebär strömlinjeformade menyer som är lätta att hitta, med enkel interaktivitet för avancerade funktioner.
  • Säker : PWA: er bör använda HTTPS för att hålla användardata säkra.
  • Upptäckbar: användare kan hitta PWA, och de kan lätt identifieras som en applikation (snarare än en 'webbplats').
  • Engagemang: en PWA måste ha tillgång till inbyggda engagemangsfunktioner som push -aviseringar.
  • Uppdateringar: PWA: er förblir uppdaterade och visar de senaste versionerna av en tjänst eller webbplats.
  • Installation: tillåta användare att enkelt 'installera' PWA på sin startskärm utan att behöva en appbutik.
  • Delning: PWA kräver bara en enda URL för att dela, utan någon installation.

Som du kan se syftar PWA till att ge användarna en fullständig webbplatsupplevelse med de strömlinjeformade funktionerna och gränssnittsdesignen för en inbyggd app.



Hur fungerar en progressiv webbapp?

Nyckeln till Progressive Web Apps är arbetare i webbläsartjänster.

En servicearbetare är ett skript som körs i bakgrunden i din webbläsare, 'separat från en webbsida, öppnar dörren för funktioner som inte behöver en webbsida eller användarinteraktion.' Du kan använda servicearbetare som push -meddelanden och bakgrundssynkronisering för närvarande, men den omedelbara PWA -framtiden ger dessa skript större kraft.



Som sådan utgör servicearbetare grunden för PWA -standarden och använder webbcachen för nästan omedelbara resultat.

Innan servicearbetare var webbläsarens cache-skript Application Cache (eller App Cache). Appcacheminnet finns i ett brett utbud av tjänster som inte fungerar först men var något felaktigt. Dessutom har App Cache flera välkända begränsningar, som A List Apart förklarar.



Men huvudproblemet för utvecklare är bristen på direkt interaktion med exakt hur AppCache fungerar, vilket hindrar utvecklare att rätta till problem när de uppstår. I sin tur var webbplatser och tjänster med full offline -funktionalitet ett riskabelt val.

Servicearbetare varar dock bara så länge deras handling krävs. I en PWA, när du klickar på något eller använder en funktion, kommer en servicearbetare till handling. Servicearbetaren (kom ihåg, det är ett skript) behandlar händelsen och avgör om offline -cachen kan slutföra begäran. Tanken är att det finns flera offlinecacher för PWA att välja mellan, vilket ger ett mycket bredare utbud av offline -funktioner.

Dessutom är cachen inte bara för offlinehastighetsökningar. Till exempel går du till en PWA, men din anslutning är extremt ojämn. Servicearbetaren serverar en tidigare cache, fullt fungerande, utan att avbryta din upplevelse.

Progressiv webbläsarstöd för webbläsare

Det finns två krav för att använda en progressiv webbapp: en kompatibel webbläsare och en PWA-aktiverad tjänst.

Låt oss först titta på webbläsare. Du har två alternativ för att kontrollera PWA -webbläsarstöd. Den första är Jake Archibalds Är servicearbetaren redo ? som praktiskt visar PWA-redo status för de stora webbläsarna, plus Samsung internet.

För en mer detaljerad översikt över PWA -webbläsarstöd bör du kolla in Kan jag använda , en webbplats som specialiserat sig på att lista implementeringen av olika webb- och webbläsarteknik efter webbläsarversion. Om du till exempel anger 'servicearbetare' i sökfältet hittar du en tabell som visar det versionsnummer som varje webbläsare implementerade PWA -servicearbetare med.

Tabellen Can I Use Service Workers bekräftar att de stora webbläsarna alla stöder PWA. Det illustrerar också PWA -stöd för flera alternativa stationära webbläsare och mobila webbläsare.

Bryter ner det lite mer:

  • Stationär webbläsare (Fullt stöd): Chrome, Firefox, Opera, Edge, Safari
  • Stationär webbläsare (delvis support/föråldrad version): QQ -webbläsare, Baidu -webbläsare
  • Mobil webbläsare (Fullt stöd): Chrome, Firefox, Safari, UC Browser, Samsung internet, Mint Browser, Wechat
  • Mobil webbläsare (delvis support/föråldrad version): QQ -webbläsare, Android -webbläsare, Opera Mobile

Så de stora webbläsarna stöder alla PWA: er. Microsoft Edge och Safari är de senaste tilläggen till hela supportlistan. Omvänt använder både QQ -webbläsaren och Baidu -webbläsaren nu föråldrade versioner och har som sådan hamnat i den andra nivån.

Hur man hittar och installerar en progressiv webbapp

Nu när du vet vilken webbläsare du ska använda kan du fundera på att söka efter och installera en PWA. I det här exemplet använder jag en Samsung Galaxy S8 med Google Chrome.

Progressiva webbappar finns överallt. Många företag har anpassat sina webbplatser och tjänster för att erbjuda en Progressive Web App -version. I många fall stöter du först på en PWA när du går till hemsidan eller mobilwebbplatsen, vilket utlöser Lägg till på hemskärmen dialog ruta.

Kolla in videon nedan för att se vad som händer när du besöker Twitter mobil webbplats .

Naturligtvis är det inte användbart att besöka otaliga webbplatser och hoppas att se startskärmen. Faktum är att det är tidskrävande. Tack och lov behöver du inte göra det eftersom det finns ett par webbplatser som är dedikerade till att katalogisera PWA.

Första försöket outweb . Det listar ett ganska anständigt utbud av PWA, med nya alternativ som ofta visas. Prova sedan med pwa.rocks. Den har ett mindre urval, men några praktiska PWA: er som du vill lägga till på din enhet.

I januari 2019 levererades Chrome 72 för Android med Trusted Web Activity (TWA). TWA gör att Chrome -flikar kan öppnas i ett fristående läge. I sin tur tillåter detta PWA: er i Google Play -appbutiken. De första PWA: erna som visades på Google Play var Twitter Lite , Instagram Lite och Google Maps Go , med fler inställningar att visas med tiden.

Bildgalleri (2 bilder) Bygga ut Bygga ut Stänga

Kommer progressiva webbappar att ersätta inbyggda appar?

Progressiva webbappar är ett utmärkt hybridsteg mellan din webbläsare och en mobilapp. Kommer PWA: er att ersätta inbyggda appar helt? Det är ett svårt nej från mig. PWA är bra som ett lättare erbjudande, men med tanke på att de för närvarande övervägande fokuserar på att replikera befintliga webbplatser och tjänster, kommer de inte att ersätta inbyggda appar.

Åtminstone inte för tillfället.

hur man lägger till ord på tiktok

PWA fungerar dock. Uppgifterna som finns tillgängliga hos PWA Stats stöder också detta. Här är några intressanta siffror som illustrerar hur PWA ändrar våra interaktioner med vanliga webbplatser:

  • Trivago ökade engagemanget med 150 procent för användare som lade till sin PWA på en startskärm.
  • Forbes PWA -hemsida laddas helt på bara 0,8 sekunder, medan visningarna per besök är uppe i 10 procent. Forbes PWA såg också användarsessionlängderna dubbla.
  • Twitter Lite såg en 65 -procentig ökning av sidor per session, med en enorm 75 -procentig ökning av tweets. Det är också interaktivt 'på mindre än 5 sekunder över 3G.'
  • Alibaba såg en ökning med 76 procent i mobilkonverteringar.

PWA är ännu inte mainstream. Men med det stora utbudet av fördelar som de ger, till exempel att spara utrymme på din enhet, kommer du att höra mer om dem i framtiden.

Dela med sig Dela med sig Tweet E-post En nybörjarguide för att animera tal

Att animera tal kan vara en utmaning. Om du är redo att börja lägga till dialog i ditt projekt bryter vi ner processen åt dig.

Läs Nästa Relaterade ämnen Om författaren Gavin Phillips(945 artiklar publicerade)

Gavin är Junior Editor för Windows och Technology Explained, en regelbunden bidragsgivare till den riktigt användbara podden och en vanlig produktgranskare. Han har en BA (Hons) samtidsskrivning med digitala konstpraxis från Devons kullar, liksom över ett decennium av professionell skrivarupplevelse. Han njuter av stora mängder te, brädspel och fotboll.

Mer från Gavin Phillips

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera