Vad är en progressiv webbapp (och varför ska du bry dig)?

I 2016 överträffade mobila användare först de som kom till webben från stationära enheter. Sedan dess har mobil inte visat några tecken på att sakta ner.

Eftersom alla letar efter hur man gör webbplatser och webapps, mer mobilvänliga, börjar du alltmer komma över frasen? Progressive Web App ?. Idag tittar vi på vad det här är, hur det skiljer sig från andra teknologier som AMP, och hur du kan komma igång.

Mobilen går inte ner

En studie från Stone Temple visar hur denna delning fortsätter att växa med varje passande år. Så här har användartrenderna ändrats från 2016 till 2017 i USA ensam:

Och mobil verkar vara ännu mer populär bland globala användare:

Som sådan måste vi fråga oss själva: Hur förbättrar vi den mobila upplevelsen som den står? Har vi nått toppen av mobil-vänlighet?

Google tog det på sig att svara på den frågan med introduktionen av den progressiva webbapplikationen 2015. Låt oss undersöka hur mobilbanans framtid ser ut med progressiva webbapps och varför du bör bry dig.

Vad är en progressiv webbapp?

En progressiv webapp (PWA) är en som överbryggar klyftan mellan mobila webbplatser och mobilappar. Även om det skulle vara lätt att beskriva en PWA som en mobilwebbplats som är insvept i ett appskal, är det mycket mer än det.

I huvudsak tar det de mobila upplevelserna användare vill, och förstärker det med alla de bra sakerna som kommer från att ha din egen fullt mottagliga inbyggda app. Du kan förvänta dig följande från en progressiv webbapp:

  • Appliknande användargränssnitt och navigering
  • Page Speed
  • Pålitlighet
  • Hemskärm närvaro
  • Offlinefunktioner
  • Telefonfunktioner (som push-meddelanden och geolokalisering)

Det finns många typer av webbplatser som kan dra nytta av att ha en PWA. Sociala nätverk som Twitter har redan gjort skiftet.

Medieföretag som Forbes, fastighetssidor som Housing.com, och gästfrihetstjänster som Ele.me har framgångsrikt rullat ut PWAs också.

Var och en har upplevt olika resultat, även om resultatet alltid är samma snabbare laddningstider, förbättrat användargränssnitt och stor bekvämlighet och tillgång. Vilket som helst leder till mer engagerade användare.

Hur bygger du en progressiv webbapp?

Till skillnad från inbyggda appar som vanligtvis kräver att apputvecklare ansätts för att hantera processen och en stor investering av medel för att göra det, är progressiva webbapps mycket enklare och är ofta billigare att bygga.

En progressiv webapp består av två delar: en webapp manifest och servicearbetare. Låt mig förklara mer.

Web App Manifest

Det här är en JSON-fil som definierar de appliknande elementen i en PWA. Det innehåller saker som:

  • Namnet på appen
  • Appikonen
  • Navigationsdesign och element för rubrik och / eller sidfot
  • Design av stänkskärmen
  • Andra metadata

Servicearbetare

Det är tjänstearbetarna som verkligen ger progressiva webbapplikationer deras makt över den vanliga webbupplevelsen.

Servicearbetare konfigureras via en JavaScript-fil. Vad de gör är att din app går så effektivt och bli snabb som möjligt. Plus, om dina användare är online eller offline, har de alltid tillgång till ditt innehåll som tjänstemän fungerar som caching proxies gör.

När det gäller att bygga en progressiv webbapp har du ett par alternativ.

Det första alternativet är att använda Googles utvecklar dokumentation och skriva din egen PWA. Men det alternativet kräver fortfarande en investering av din tid och resurser.

Om du inte är beredd att hantera den här nivån på jobbet, eller hellre vill fokusera dina energier på annat håll, kan du använda ett verktyg som Duda webbdesignplattform för att enkelt konvertera din webbplats till en progressiv webbapp.

Allt som krävs är ett klick för att aktivera funktionen, och bara några få att konfigurera det till din smak!

Hur är en Progressiv Web App annorlunda från en webbplats?

Som du kan se från comScores 2017 Digital Mobile App Report, är det mesta av mobilanvändarna som spenderar på sina telefoner faktiskt med appar och inte med webbläsarbaserade webbplatser.

Det finns mycket bra (och giltiga) anledningar till varför mobila användare föredrar den appliknande upplevelsen över den grundläggande webbläsaren. Och eftersom PWA hjälper användarna att göra det språnget utan att behöva begå ytterligare en resurskrävande nedladdning från appbutiken, bör du noggrant uppmärksamma följande skillnader och fördelar.

Progressiva webbapps är det optimala valet över mobilbanan eftersom:

  • En PWA är utformad för att vara mer engagerande eftersom den använder lätt att hitta verktygsfält och element.
  • Användare lägger till din ikon på sin startsida. Detta ökar synligheten, vilket gör att de är mer benägna att delta i din app.
  • Android-webbläsare uppmanar automatiskt användare att? Installera? PWA till deras hemskärmar, vilket ökar bekvämlighetsfaktorn.
  • PWAs resulterar i otroligt snabba laddningstider.
  • Servicearbetare ökar tillförlitligheten av tillgången till PWA, eftersom de är anslutningsoberoende.
  • PWAs integreras sömlöst med användarnas telefoni funktioner; Mest viktigt är att trycka på meddelanden, klicka för att ringa och geolokeringstjänster.
  • HTTPS är ett krav för alla PWA, vilket gör dem i sig säkrare än webben.
  • Mynet var ett sådant företag som noterade den drastiska skillnaden mellan mobilwebbplatsupplevelse och mobilapp.

    Medan 85% av trafiken Mynet mottogs kom från mobilbanan, spenderade användarna dubbelt så mycket tid i mobilapppartiet. När det turkiska mediemärket lanserade sin PWA (med hjälp av AMP-driven innehåll) såg Mynet sidvisningar och tid på plats kraftigt.

    Hur är en Progressiv Web App Annorlunda än Accelerated Mobile Pages?

    Vad vill mobila användare ha? Hastighet, bekvämlighet och användarvänlighet - saker som både PWA och AMP-artiklar gör exceptionellt bra. Det sägs att det finns en distinkt skillnad mellan de två mobilvänliga plattformar som skapats av Google.

    AMP eller Accelerated Mobile Pages, håller användarna inuti den mobila webbläsaren. Det minskar emellertid kraftigt belastningstiden genom att ta bort eller optimera element som tenderar att mäta hastigheten på webbläsaren, till exempel:

    • Render-blocking JavaScript
    • Viktiga filer
    • Externa skript
    • Bloated CSS
    • Resurs-dyra animationer

    I grund och botten tar det alla dessa element från backenden som väger ner frontendens upplevelse och gör dem till något mer lätta och hanterbara. På grund av detta finns det några delar av den mobila upplevelsen som äventyras. Därför är AMP idealisk för innehållsrika webbplatser som prioriterar läsbarhet över funktionalitet.

    PWA, å andra sidan, är lika snabba som AMP, men offrar inte funktioner för att göra det. Därför finns det ett större utbud av möjligheter till PWA.

    Vad många användare kanske inte inser är emellertid att detta inte behöver vara ett val mellan den ena eller den andra. Google har utvecklat dessa lösningar så att de kan arbeta i tandem. Case in point är Wego.

    AMP kombinerades med PWA-servicearbetare för superhastig lasthastighet (under 1 sekund). Detta resulterade i stora förbättringar av organiska besök (upp 12%) och omvandlingar (95% mer). Wego upptäckte också att snabbare laddningssidor innebar mer engagemang (tre gånger mer) med de monetära elementen i appen.

    Hur är en Progressiv Web App Annorlunda än en Native App?

    En Localytics-studie från 2016 visar hur svårt det kan vara för inhemska appar att göra anspråk på en dedikerad plats på användarnas mobila enheter:

    Naturligtvis, när en app har visat sig vara värd och fått användarna att logga in och engagera sig nästan ett dussin gånger, ser dessa retentionsnivåer ganska fast. Men vad händer här? Varför är det att användarna älskar mobilappar, men kan inte begå dem?

    Tja, när du jämför en inbyggd app till en progressiv webbapp, kan du se en tydlig skillnad i varför mobilbanan växlar mer och mer mot PWA:

    Kosta

    Det kostar betydligt mindre att bygga en PWA, vilket gör det tillgängligt för fler företag.

    sökbarhet

    PWAs kan rangordna precis som en vanlig mobilwebbplats skulle rankas i sökningen. Det betyder att det finns en större chans att användare stöter på dem än de som måste besöka deras enhetliga appbutik.

    Medel

    PWAs tenderar att springa lunt, tack vare servicearbetare. Inhemska appar, som är bandbredd och lagringsgravar som de är, kan inte tävla med det. Enligt comScores rapport är en av de främsta anledningarna att användarna raderar en app beroende på hur mycket utrymme det förbrukar:

    Flexibilitet

    I allmänhet är inbyggda appar byggda för en enhet över en annan: iOS eller Android. Så underhållande för en produkt kräver egentligen minst dubbelt så mycket arbete. Men med PWA som lever i webbläsaren och kan ändå existera utanför dem, är de kompatibla med alla webbläsare och enheter.

    Delbart innehåll

    PWA har webbadresser som enkelt kan delas med andra. Native apps gör det inte.

    Allt detta är självklart inte att du borde undvika att bygga en inbyggd app för ditt företag om det är vettigt. Native apps är bra för mycket specifika användningsfall. Till exempel:

    Sociala nätverk, chatt och underhållningsplattformar dominerar listan över populäraste mobilappar. Du hittar också många spel-, produktivitets- och belöningsdrivna koncept i appform.

    PWA har däremot inte typiska allvarliga begränsningar vad gäller vilka typer av företag som bäst utför dem.

    Sammanfattning

    Så, varför betyder något av detta ens även? Tja, om du har hoppat på att hitta ett bättre sätt att komma framför och engagera dig med dina mobila användare, kanske de andra alternativen som finns tillgängliga kanske inte har klippt den.

    • Mobilbanan är för begränsande och fungerar inte bortom gränserna för webbläsaren.
    • AMP är utmärkt för innehållsdrivna webbplatser, men inte mycket annat.
    • Native apps är en bra lösning för vissa affärsmodeller men kan vara dyra att bygga, svåra att hantera och svårt att hålla användarna nöjda.

    Den progressiva webbappen tar styrkan på vart och ett av dessa plattformar och meddelar dem till vad våra mobila användare vill ha och behöver. Det här är mobilbanans framtid.