PWA: en webbplats som fungerar som en app, och när det passar företag

En PWA (Progressive Web App) är en vanlig webbplats med extra förmågor. Besökare kan lägga den på hemskärmen, öppna den som en app, använda delar av den utan internet och i många webbläsare få notiser. Du bygger en sajt som fungerar på mobil, surfplatta och dator.

För ett litet eller medelstort företag är det ofta det mest rimliga första steget mot "vår egen app": mycket billigare än att bygga separata appar för iPhone och Android, och klart snabbare.

Så fungerar det

• Web app manifest: en liten fil med namn, ikon och färger så att webbläsaren kan erbjuda "Lägg till på hemskärmen".
• Service worker: ett skript som sparar viktiga filer på enheten. Det gör att sajten laddas snabbt och kan fungera offline eller med dålig uppkoppling.
• HTTPS: krävs av säkerhetsskäl. Utan det fungerar inte funktionerna ovan.

Besökaren går inte till någon appbutik. De öppnar din sajt, trycker på "Installera" och ikonen dyker upp bland de andra apparna.

Fördelar för företag

• En produkt för alla enheter i stället för separata iOS-, Android- och webbversioner att bygga och underhålla.
• Lägre kostnad och snabbare lansering än native-appar.
• Inget beroende av appbutiker: kunder installerar direkt från din sajt, du väntar inte på granskning och uppdateringar syns omedelbart för alla.
• Snabb laddning och bra upplevelse på dålig uppkoppling, vilket hjälper konverteringen.
• Synlighet i sök: en PWA är fortfarande en webbplats, så Google kan hitta och indexera sidorna.
• Återengagemang: en ikon på hemskärmen och (där det stöds) notiser får kunder att komma tillbaka.

Begränsningar att känna till

• Mindre åtkomst till telefonens funktioner än en native-app. Viss Bluetooth, bakgrunds- och systemfunktionalitet saknas.
• Stödet på iPhone är bra men smalare än på Android, och vissa funktioner kommer senare.
• Ingen automatisk närvaro i appbutikerna om du inte även publicerar en inpackad version.
• Mycket tung grafik och spel fungerar fortfarande bättre som native-appar.

PWA eller native-app?

Exempel där en PWA fungerar bra

• En restaurang eller ett café: meny, bordsbokning och stamkundskort som fungerar även när gästen saknar täckning.
• Ett servicebolag: tekniker öppnar arbetsordrar och formulär på plats, även i en källare utan täckning, och data synkas senare.
• En webbutik: snabb katalog och kassa, med notis när en vara är åter i lager.
• Event: program och biljetter tillgängliga offline.

Så byggs en PWA

1. Gör sajten snabb och mobilanpassad. En PWA kan inte rädda en långsam sajt.
2. Servera allt över HTTPS.
3. Lägg till manifest och ikoner i flera storlekar.
4. Lägg till en service worker med en genomtänkt cache-plan: vad som sparas och hur länge.
5. Utforma en offline-sida så att besökare ser något användbart utan internet.
6. Testa installation, offline-läge och hastighet, till exempel med Lighthouse i Chrome.

Vanliga misstag

• För mycket cache, så att besökare fortsätter se gammalt innehåll efter en uppdatering.
• Ingen offline-sida, så appen visar en tom skärm utan internet.
• Att be om tillstånd för notiser direkt i stället för vid ett lämpligt tillfälle.
• Att glömma att den också behöver sökoptimering som vilken annan sajt som helst.

Kostnad och tid

Att göra en befintlig modern webbplats till en PWA handlar ofta om dagar snarare än månader. En ny PWA med egna funktioner tar längre tid men kostar ändå en bråkdel av två native-appar. Börja med de sidor som ger mest värde, som bokning eller katalogen, och bygg vidare därifrån.