Progressiv webbapp

PWA logotyp

En progressiv webbapplikation ( PWA ), eller progressiv webbapp , är en typ av applikationsprogramvara som levereras via webben , byggd med vanliga webbteknologier inklusive HTML , CSS , JavaScript och WebAssembly . Den är avsedd att fungera på alla plattformar med en standardkompatibel webbläsare , inklusive stationära och mobila enheter .

Eftersom en progressiv webbapp är en typ av webbsida eller webbplats som kallas en webbapplikation kräver den inte separat buntning eller distribution. Utvecklare kan helt enkelt publicera webbapplikationen online, se till att den uppfyller standardinstallationskraven och att användare kommer att kunna lägga till applikationen på sin startskärm . Att publicera appen till digitala distributionssystem som Apple App Store eller Google Play är valfritt.

Från och med 2021 stöds PWA-funktioner i varierande grad av Google Chrome , Apple Safari , Firefox för Android och Microsoft Edge men inte av Firefox för stationära datorer.

Webbläsarstöd


Webbläsare	Stöd					Kommentar
Webbläsare	Windows	Mac OS	Linux	Android	iOS & iPadOS	Kommentar
Krombaserad _	Ja	Ja	Ja	Ja	—	Inkluderar Google Chrome , Microsoft Edge , Brave , Opera , Vivaldi och andra .
Firefox	Nej	Nej	Nej	Partiell	Nej
Safari	—	Ja	—	—	Ja (iOS 11.3+)

Historia

Föregångare

Vid lanseringen av iPhone 2007 meddelade Steve Jobs att webbappar (utvecklade i HTML5 med AJAX- arkitektur) skulle vara standardformatet för iPhone-appar. Inget mjukvaruutvecklingskit (SDK) krävdes, och apparna skulle vara helt integrerade i enheten via webbläsarmotorn Safari . Denna modell byttes senare till App Store, som ett sätt att förvirra jailbreakers och blidka frustrerade utvecklare. I oktober 2007 meddelade Jobs att ett SDK skulle lanseras året därpå. Som ett resultat, även om Apple fortsatte att stödja webbappar, flyttade de allra flesta iOS-applikationer till App Store.

Från början av 2010 - talet gjorde dynamiska webbsidor det möjligt att använda webbteknik för att skapa interaktiva webbapplikationer . Responsiv webbdesign och flexibiliteten i skärmstorleken gjorde PWA-utveckling mer tillgänglig. Fortsatta förbättringar av HTML, CSS och JavaScript gjorde det möjligt för webbapplikationer att införliva högre nivåer av interaktivitet, vilket gjorde inbyggda upplevelser möjliga på en webbplats.

2013 släppte Mozilla Firefox OS . Det var tänkt att vara ett operativsystem med öppen källkod för att köra webbappar som inbyggda appar på mobila enheter. Firefox OS var baserat på Gecko- renderingsmotorn med ett användargränssnitt som heter Gaia, skrivet i HTML5. Utvecklingen av Firefox OS avslutades 2016, och projektet avbröts helt 2017, även om en gaffel av Firefox OS användes som grunden för KaiOS , en funktionstelefonplattform.

Inledande introduktion

2015 myntade designern Frances Berriman och Google Chrome- ingenjören Alex Russell termen "progressiva webbappar" för att beskriva appar som utnyttjar nya funktioner som stöds av moderna webbläsare, inklusive servicearbetare och webbappsmanifest , som låter användare uppgradera webbappar till progressiv webb. applikationer i deras ursprungliga operativsystem (OS). Google gjorde sedan betydande ansträngningar för att främja PWA-utveckling för Android. Firefox introducerade stöd för servicearbetare 2016, och Microsoft Edge och Apple Safari följde 2018, vilket gjorde servicearbetare tillgängliga på alla större system.

År 2019 stöddes PWA:er av stationära versioner av de flesta webbläsare, inklusive Microsoft Edge (på Windows ) och Google Chrome (på Windows, macOS , ChromeOS och Linux ).

I december 2020 övergav Firefox för desktop implementeringen av PWA:er (specifikt tog bort prototypen av " webbplatsspecifik webbläsare "-konfiguration som hade varit tillgänglig som en experimentell funktion). En Firefox-arkitekt noterade: "Signalen jag hoppas att vi skickar är att PWA-stöd inte kommer till skrivbordet Firefox när som helst snart." Mozilla planerar fortfarande att stödja PWA på Android.

Butiker

Eftersom en progressiv webbapp är en typ av webbsida eller webbplats som kallas en webbapplikation kräver de inte separat buntning eller distribution. I synnerhet finns det inget krav för utvecklare eller användare att installera webbappar via digitala distributionssystem som Apple App Store , Google Play , Microsoft Store eller Samsung Galaxy Store . I varierande grad stödjer de stora appbutikerna publicering av PWA. Google Play, Microsoft Store och Samsung Galaxy Store stöder PWA, men Apple App Store gör det inte. Microsoft Store publicerar vissa kvalificerande PWA automatiskt (även utan appförfattares begäran) efter att ha upptäckt dem via Bing- indexering.

Egenskaper

Progressiva webbappar är alla utformade för att fungera på alla webbläsare som är kompatibla med lämpliga webbstandarder . Precis som med andra plattformsoberoende lösningar är målet att hjälpa utvecklare att bygga plattformsoberoende appar lättare än de skulle göra med inbyggda appar. Progressiva webbappar använder den progressiva förbättringsstrategin för webbutveckling.

Vissa progressiva webbappar använder ett arkitektoniskt tillvägagångssätt som kallas App Shell Model. I den här modellen lagrar servicearbetare det grundläggande användargränssnittet eller " skalet " för den responsiva webbdesignwebbapplikationen i webbläsarens offlinecache . Denna modell gör det möjligt för PWA:er att upprätthålla native-liknande användning med eller utan webbanslutning. Detta kan förbättra laddningstiden genom att tillhandahålla en initial statisk ram , en layout eller arkitektur där innehåll kan laddas progressivt såväl som dynamiskt.

Installationskriterier

De tekniska grundkriterierna för att en webbplats ska anses vara en progressiv webbapp och därför kan installeras av webbläsare beskrevs av Russell i ett uppföljande inlägg och uppdaterades sedan:

Kommer från ett säkert ursprung. Serveras över TLS och har inget aktivt blandat innehåll. Progressiva webbappar måste serveras via HTTPS för att säkerställa användarnas integritet, säkerhet och innehållsäkthet.
Registrera en servicearbetare med en hämtningshanterare. Progressiva webbappar måste använda tjänstearbetare för att skapa programmerbara innehållscachar. Till skillnad från vanlig HTTP- webbcache , som cachar innehåll efter den första användningen och sedan förlitar sig på olika heuristik för att gissa när innehåll inte längre behövs, kan programmerbara cachar explicit förhämta innehåll i förväg innan det används för första gången och explicit kassera det när det är behövs inte längre. Detta krav hjälper sidor att vara tillgängliga offline eller på nätverk av låg kvalitet.
Referera till ett webbappmanifest . Manifestet måste innehålla minst de fem nyckelegenskaperna: name eller short_name , start_url och display (med värdet fristående , fullscreen eller minimal-ui ) och ikoner (med 192px och en 512px version). Informationen i manifestet gör att PWA:er lätt kan delas via en URL, kan upptäckas av en sökmotor och underlättar komplexa installationsprocedurer (men PWA:er kan fortfarande listas i en appbutik från tredje part ) . Dessutom stöder PWA:er inbyggd appliknande interaktion och navigering, inklusive att läggas till på startskärmen , visa startskärmar , etc.

Jämförelse med inbyggda appar

Under 2017 släppte Twitter Twitter Lite, ett PWA-alternativ till de officiella inbyggda Android- och iOS -apparna. Enligt Twitter konsumerade Twitter Lite bara 1-3% av storleken på de inbyggda apparna. Starbucks tillhandahåller en PWA som är 99,84 % mindre än motsvarande iOS-app. Efter att ha distribuerat sin PWA fördubblade Starbucks antalet onlinebeställningar, med datoranvändare som beställde i ungefär samma takt som mobilappanvändare.

En recension från 2018 publicerad av Forbes visade att användare av Pinterests PWA spenderade 40 % mer tid på sajten jämfört med den tidigare mobilwebbplatsen. Annonsintäkterna ökade också med 44 % och kärnengagemang med 60 %. Flipkart såg 60 % av kunderna som hade avinstallerat sin ursprungliga app återvände för att använda Flipkart PWA. Lancôme såg en 84% minskning i tiden tills sidan är interaktiv, vilket ledde till en 17% ökning av konverteringar och en 53% ökning av mobilsessioner på iOS med deras PWA.

Teknologier

Det finns många tekniker som ofta används för att skapa progressiva webbappar. En webbapplikation anses vara en PWA om den uppfyller installationskriterierna och därmed kan fungera offline och kan läggas till på enhetens startskärm. För att uppfylla denna definition kräver alla PWA:er minst en servicearbetare och ett manifest.

Manifestera

Webappmanifestet är en W3C- specifikation som definierar ett JSON -baserat manifest (vanligtvis märkt manifest.json) för att ge utvecklare en centraliserad plats för att lägga metadata som är associerade med en webbapplikation, inklusive:

Namnet på webbapplikationen
Länkar till webbappsikoner eller bildobjekt
Den föredragna webbadressen för att starta eller öppna webbappen
Webbappens konfigurationsdata
Standardorientering för webbappen
Möjlighet att ställa in visningsläge, t.ex. helskärm

Denna metadata är avgörande för att en app ska läggas till på en startskärm eller på annat sätt listas tillsammans med inbyggda appar.

iOS-stöd

iOS Safari implementerar delvis manifest, medan de flesta PWA-metadata kan definieras via Apple-specifika tillägg till metataggarna. Dessa taggar tillåter utvecklare att aktivera helskärmsvisning, definiera ikoner och startskärmar och ange ett namn för applikationen.

WebAssembly

WebAssembly tillåter förkompilerad kod att köras i en webbläsare, med nästan normal hastighet. Således kan bibliotek skrivna på språk som C läggas till i webbappar. På grund av kostnaden för att överföra data från JavaScript till WebAssembly kommer användningen på kort sikt huvudsakligen att vara siffror (som röstigenkänning och datorseende), snarare än hela applikationer. ^{[ tveksamt – diskutera ]}^{[ citat behövs ]}

Datalagring

Kontexter för körning av progressiva webbappar laddas ur när det är möjligt, så progressiva webbappar måste lagra majoriteten av det långsiktiga interna tillståndet (användardata, dynamiskt laddade programresurser) på något av följande sätt

Webblager

Web Storage är ett W3C-standard-API som möjliggör nyckel-värdelagring i moderna webbläsare. API:t består av två objekt, sessionStorage (som möjliggör endast sessionslagring som raderas när webbläsarsessionen avslutas) och localStorage (som möjliggör lagring som kvarstår över sessioner).

Indexerad databas API

Indexed Database API är ett W3C-standarddatabas-API tillgängligt i alla större webbläsare. API:et stöds av moderna webbläsare och möjliggör lagring av JSON- objekt och alla strukturer som kan representeras som en sträng. Indexed Database API kan användas med ett omslagsbibliotek som tillhandahåller ytterligare konstruktioner runt det.

Servicearbetare

En tjänstearbetare är en webbarbetare som implementerar en programmerbar nätverksproxy som kan svara på webb-/HTTP-förfrågningar i huvuddokumentet. Den kan kontrollera tillgängligheten för en fjärrserver och cachelagra innehåll när den servern är tillgänglig och skicka innehållet senare till dokumentet. Servicearbetare, som alla andra webbarbetare, arbetar separat från huvuddokumentkontexten. Servicearbetare kan hantera push-meddelanden och synkronisera data i bakgrunden, cache eller hämta resursbegäranden, avlyssna nätverksbegäranden och ta emot centraliserade uppdateringar oberoende av dokumentet som registrerade dem, även när det dokumentet inte är laddat.

Servicearbetare går igenom en livscykel i tre steg med registrering, installation och aktivering. Registrering innebär att du berättar för webbläsaren var servicearbetaren befinner sig som förberedelse för installationen. Installationen sker när det inte finns någon serviceworker installerad i webbläsaren för webbappen, eller om det finns en uppdatering av service workern. Aktivering sker när alla PWA:s sidor är stängda, så att det inte finns någon konflikt mellan den tidigare versionen och den uppdaterade. Livscykeln hjälper också till att upprätthålla konsistens vid växling mellan versioner av service worker eftersom endast en service worker kan vara aktiv för en domän.

Se även

Google Lighthouse , ett granskningsverktyg med öppen källkod för PWA:er utvecklat av Google

externa länkar

Web Applications Working Group Index över standarder