det har varit år sedan början av smarttelefonens ålder. Med det kom eran med inhemska appar. Appar fortsätter att spela en enorm roll i vårt dagliga liv, och många företagare har frågat sig flera gånger: ska vi ha en app? Naturligtvis är det enda svaret på det-det beror på. Att bygga och underhålla en inbyggd app är besvärlig och ofta ganska dyr. Lyckligtvis finns det ett annat alternativ. Det här alternativet kombinerar glädjen i en inbyggd app med den teknik vi använder på webben: progressive web app, aka PWA.

Vad är en PWA?

PWA står för progressiv webbapp. Detta är en app byggd från webbteknologier som vi alla känner och älskar, som HTML, CSS och JavaScript, men med en känsla och funktionalitet som konkurrerar med en verklig inbyggd app. Tack vare ett par smarta tillägg kan du göra nästan vilken webbplats som helst till en progressiv webbapp. Det betyder att du kan bygga en PWA ganska snabbt, när det gäller en inbyggd app som är ganska svår att utveckla. Dessutom kan du erbjuda alla funktioner i inbyggda appar, som push-meddelanden, offline-support och mycket mer.

många webbplatser du hittar online är faktiskt en progressiv webbapp. Ta twitter.com, till exempel. Om du besöker den webbplatsen på din smartphone kan du installera den på din hemskärm. Nu när du öppnar den sparade Twitter-webbplatsen märker du att den ser ut och fungerar precis som en inbyggd app. Det finns inget webbläsarfönster eller ingenting. Det finns ingen skillnad i att köra den från en iPhone eller en Android-smartphone. Logga bara in och du är bra att gå. Det är en stor fördel med att bygga din webbapp med en PWA i åtanke.

PWAs blir allt populärare. Många stora webbplatser är PWAs, tycka om Starbucks.com, Pinterest.com, Washingtonpost.com och Uber.com är faktiskt installerbara på din hemskärm och erbjuder en jämförbar upplevelse med sina inbyggda appar.

vad är skillnaden mellan en inbyggd app och en PWA?

en inbyggd app, som de du laddar ner från Apples App Store eller Googles Play Store, är ofta byggd på ett programmeringsspråk som är specifikt för den plattformen. Så för iOS-appar skulle det vara snabbt och för Android-appar, Java. Om du vill bygga en app för dessa plattformar måste du känna till tekniken. Ja, det finns genvägar, men dessa har sina egna begränsningar. Om du vill ha en app på alla mobila plattformar måste du känna till alla olika tekniker. Det finns inget enkelt sätt att bygga en och publicera den till alla butiker där ute.

naturligtvis finns det sätt att få det bästa av båda världarna. En progressiv webbapp, till exempel. Detta körs i webbläsaren och — en gång sparad på startskärmen — fungerar som en inbyggd app. Det får till och med tillgång till den underliggande hårdvaran och programvaran som webbläsaren inte kan komma åt av säkerhetsskäl. Om PWA presterar bra kommer användarna aldrig att veta att de använder en webbaserad app istället för en infödd.

det finns naturligtvis några varningar. Medan webbläsare har varit snabba att anta tekniken för detta finns det fortfarande vissa begränsningar. På iOS fungerar den teknik som behövs spottig i Safari. Apple stöder inte (vill) allt ännu, vilket gör det lite jobbigt att få samma exakta upplevelse överallt.

vilka är fördelarna med en PWA?

den främsta anledningen till att alla jagar efter appar är att de erbjuder större engagemang. Användare som installerar din app är dina största fans och de är mer benägna att göra användningen till försäljning eller registreringar. Tack vare push-meddelanden är det mycket lättare att engagera sig igen med användarna. Appar kan erbjuda en utmärkt upplevelse som kan göra bra för ett varumärke.

vi pratade om några av plusserna av PWAs i den här artikeln, men här är en kort översikt:

• du behöver inte gå igenom processen för att komma in i olika appbutiker
• Du kan bygga PWAs med vanliga webbteknologier
• de är ofta billigare att bygga
• eftersom du gör din webbplats till en app har du färre kodbaser för att behålla
• PWAs är lyhörda och arbetar med många olika skärmstorlekar
• PWAs är smidiga, snabba och lätta
• inget behov av att lämna ut stora bitar av pengar till Google och Apple
• de arbetar offline, till skillnad från din vanliga webbplats
• pwas är upptäckbara via sökmotorer (som har mycket större publik än appbutiker. Plus, om du vill kan du fortfarande få din PWAs distribueras via App butiker)
• Du kan använda push-meddelanden för att åter engagera användare
• installera en PWA kan leda till högre engagemang

fortfarande, native apps vinna ut ibland. PWAs får djupare och djupare tillgång till operativsystemet på en smartphone, men en inbyggd app kan gå djupare fortfarande. Dessutom finns det gränser för vad en PWA kan göra. Till exempel är PWAs inte det bästa valet när du vill bygga högpresterande spel.

Sammantaget är det mycket meningsfullt att tänka på att ha en PWA i din mobilstrategi. Men den viktigaste frågan du bör ställa dig själv är: vill min publik ha det här?

Vem är det här för?

ska alla helt enkelt bygga en PWA och göras med den? Nej, tänk på ditt företag och — ännu viktigare-din målgrupp. Använder de till och med appar? Är inte detta ett alltför komplicerat sätt att komma till det du vill uppnå? Återigen, som allt, måste du undersöka publikens behov. Fråga dig själv, Vad vill du att den här tekniken ska göra? Var är dina användare? Har de en bra dataanslutning och solid hårdvara? Hur och var använder de ditt innehåll? Och tror du att en app kan hjälpa dem att göra sitt jobb bättre?

PWAs är fantastiska och implementerar dem behöver inte vara så svårt. Men bara för att det är enkelt betyder det inte att du ska göra det. Om din publik inte behöver det, varför skulle du bygga en?

vad är SEO-problem med en PWA?

PWA är i sig webbcentrerad. Det föddes från webben och utvecklades med sökmotorer i åtanke för att göra upptäckten enkel. Naturligtvis kan du göra en progressiv webbapp från någon gammal webbplats och det tar inte mycket att göra det. Men många PWAs använder JavaScript för att bygga mer komplex funktionalitet och medan sökmotorer har blivit lämpliga för att göra JavaScript, kan det fortfarande vara en anledning till oro.

När du ställer in en PWA måste du se till att JavaScript är tillgängligt. Blockera inte filer för bots och se till att länkar är tillgängliga. För att förbättra renderingsprocessen kan du göra din JavaScript ram använder serversidan rendering.att göra din webbplats till en PWA betyder inte att du direkt förbättrar SEO på den webbplatsen. Om det är vettigt att göra din webbplats till en PWA, gör det, men gör det inte för några upplevda SEO-fördelar. Om du har en stor PWA, du erbjuder dina användare en fantastisk användarupplevelse, vilket kan göra dig one-up din konkurrens. I detta avseende är det bra att ta en titt på dem för din mobila SEO-strategi.

vilka är de tre viktigaste byggstenarna?

det tar inte mycket att ställa in en PWA. Det finns tre saker du behöver ge innan din webbplats förvandlas till en giltig PWA.

• en säker anslutning (HTTPS): PWAs fungerar bara på betrodda anslutningar, du måste betjäna dem via en säker anslutning. Detta är inte bara av säkerhetsskäl, men det är också en mycket viktig förtroendefaktor för användarna.
• en servicearbetare: en servicearbetare är ett skript som körs i bakgrunden. Detta hjälper dig att bestämma hur du hanterar nätverksförfrågningar för din PWA, vilket gör det möjligt att göra mer komplext arbete.
• manifest-filen: den här JSON-filen innehåller information om hur din PWA ska visas och fungera. Här bestämmer du Namn, Beskrivning, ikoner, färger etc.

Här är ett exempel manifest från Google:

det ser inte för hårt, eller hur? Ett par intressanta saker i den här listan:

• start-url: detta avgör var din app ska starta. Det är bättre att låta användare landa på en specifik sida för dig PWA.
• display: detta hjälper dig att avgöra vilken typ av webbläsare UI du vill visa. Alternativen ärfullscreenstandaloneminimal-ui och standardenbrowser gränssnitt.

dessa tre saker som anges ovan är minimikraven för att köra en PWA. Du kan utöka funktionaliteten via JavaScript (ramverk).

hur man ställer in en PWA?

det finns gott om resurser att prova på att bygga en enkel PWA. Detta gör att du kan få en känsla för processen. Google har en utmärkt, lätt att följa handledning om PWAS på webben.dev webbplats. Mozilla har massor av dokumentation om att bygga progressiva webbappar. Microsoft har också rika utvecklardokument om att bygga PWAs. Microsoft byggde till och med ett verktyg som heter PWABuilder som hjälper dig att göra din webbplats till en PWA. Naturligtvis finns det WordPress-plugins som hjälper dig att göra en PWA på din webbplats. Dessutom arbetar Google med att föra basstöd för PWAs till WordPress Core.

engagera dina användare med en progressiv webbapp

progressiva webbappar kan vara ett bra komplement till din mobila verktygslåda. Gjort bra, de är snabba, arbetar offline och fungerar som en inbyggd app. Sammantaget kan de erbjuda dina användare en fantastisk användarupplevelse. Engagerade användare är nöjda användare, eller hur?