ArtikelVibe coding

Vad är en PWA? Gör AI-appen installerbar på mobilen

Vad är en PWA? Så gör du appen du byggt med AI installerbar på mobilen: manifest, ikoner, HTTPS, iPhone mot Android och ett prov på två telefoner.

Publicerad · Senast granskad

En upprättstående träskiva i telefonformat med ljusa och svarta rutor, en liten blågrön och vit kloss i rutnätet och en röd ribba lutad mot ena sidan.
En PWA är fortfarande en webbapp, men på hemskärmen ska den se ut och starta som en app.
Kort svar

En PWA är en vanlig webbapp som går att lägga på hemskärmen och öppna i ett eget fönster, utan att den laddas ned från App Store eller Google Play. Det som gör den installerbar är ett webbappmanifest med namn och ikoner, en publicerad adress med HTTPS och, om du vill att appen ska visa något utan nät, en service worker. Uppgifterna om webbläsarna är hämtade den 17 oktober 2026. Ingen app har provats för artikeln.

Vad en PWA är och vad den inte är

PWA står för progressiv webbapp. Det är samma app som du redan har publicerat, med en adress som börjar på https. Skillnaden är att telefonen kan behandla den som en app. Googles kurs på web.dev om installation beskriver tre följder när användaren har installerat den: en ikon i appstartaren eller på hemskärmen, ett eget fönster utanför webbläsaren och tillgång till vissa funktioner som kräver installation. Kursen påpekar också att du inte behöver bygga något paket eller någon installationsfil.

För dig som bygger med AI betyder det att användarna kan lägga appen på hemskärmen direkt från din publicerade adress. Du behöver inte först få in den i en appbutik. Appen är fortfarande en webbplats, så det som avgör om den går att installera är vad den publicerade versionen innehåller, inte vad som syns i byggverktygets förhandsvisning.

Det första steget är ändå att appen fungerar på en smal skärm. En installerbar app med en vy som spricker på mobilen är fortfarande trasig. Börja därför med Mobilanpassning när du vibe-kodar om du inte har gjort det.

När en PWA räcker och när butiken behövs

Ställ frågan så här: hur hittar användarna appen? Om de får en länk av dig, från ett nyhetsbrev, en förening eller en arbetsplats, räcker det ofta att de kan lägga appen på hemskärmen. De kommer redan via webben, och en PWA kan dessutom hittas via vanlig webbsökning. MDN:s guide om installerbara PWA:er nämner just den fördelen.

Om du vill att främlingar ska hitta appen genom att söka i App Store eller Google Play behöver den finnas där. MDN beskriver att en installerbar PWA kan paketeras och läggas ut i appbutiker och hänvisar till verktyget PWABuilder, som enligt MDN stöder bland annat Google Play Store och iOS App Store. Det är ett eget projekt med butikernas regler och konton, och det ingår inte i den här artikeln.

Redaktionens tumregel: välj PWA när användarna redan har din länk och appen främst visar och sparar uppgifter. Undersök en butiksapp när upptäckt i butiken är själva poängen, eller när du behöver en telefonfunktion som du inte hittar i webbläsarnas egen dokumentation. Det är en bedömning, inte en uppgift från källorna.

iPhone: ingen fråga om installation, användaren gör det själv

Den största skillnaden mot Android är att iPhone inte frågar. Enligt web.dev finns ingen installationsprompt i iOS och iPadOS, så appen läggs till manuellt via webbläsarens delningsmeny. Apples användarhandbok för iPhone beskriver stegen i Safari: tryck på Dela, rulla ned och välj Lägg till på hemskärmen, slå på Öppna som webbapp och tryck på Lägg till. Saknas valet kan det läggas till via Redigera åtgärder längst ned i listan. Enligt Apples handbok kan webbappen sedan skicka notiser och avslutas som andra appar.

Från iOS 16.4 går det enligt MDN att installera från delningsmenyn även i Chrome, Edge, Firefox och Orion. På iOS 16.3 och tidigare gick det bara i Safari. Eftersom användarna inte får någon automatisk fråga bör appen själv förklara stegen för den som använder iPhone, till exempel på en hjälpsida.

Pushnotiser kräver mer på iPhone. Enligt WebKits blogginlägg från 16 februari 2023 fick webbappar på hemskärmen webbpush i iOS och iPadOS 16.4. Bara en webbapp som har lagts till på hemskärmen kan be om lov att skicka notiser, och frågan måste komma efter en direkt handling från användaren, till exempel ett tryck på en knapp för prenumeration. En sida som bara är öppen i Safari kan alltså inte ta emot push. Inlägget säger också att sajten behöver ett manifest med visningsläget standalone eller fullscreen för att bli en webbapp på hemskärmen och inte ett bokmärke. Apples nyare val Öppna som webbapp ändrar inte din beställning: be om manifestet ändå.

Android: Chrome kan erbjuda installationen

På Android ser installationen olika ut beroende på telefon och webbläsare, skriver web.dev. Googles hjälp för Chrome på Android beskriver den manuella vägen: tryck på Mer till höger om adressfältet, välj Installera och skapa genväg och sedan Installera. En installerad webbapp tas bort via Inställningar, Appar och Se alla appar, enligt Chromes hjälpsida om webbappar.

Chrome kan också visa en egen uppmaning att installera. Googles lista över Chromes krav innehåller att appen inte redan är installerad, att användaren har tryckt på sidan minst en gång och tittat på den i minst 30 sekunder, HTTPS och ett manifest med vissa fält. Uppmaningen kommer alltså inte vid första ögonkastet. Det är inget fel i appen.

En fallgrop att känna till är att en installation kan bli olika slags app. Enligt MDN är det bara Chrome på telefoner med Googles tjänster och Samsung Internet på Samsungtelefoner som installerar PWA:er som riktiga appar, så kallade WebAPK. Firefox, Edge, Opera och andra lägger i stället en genväg på hemskärmen som öppnar sidan i webbläsaren. MDN skriver också att Chrome låter användare installera vilken webbplats som helst som app, med eller utan manifest. Att valet Installera syns visar alltså inte att din beställning är gjord.

Det här ska du beställa av byggverktyget

Lovable, Bolt, Replit och andra verktyg dokumenterar sina förval på olika sätt. Den här artikeln påstår inte att något av dem bygger en PWA av sig självt. Be verktyget göra jobbet och redovisa vad det har lagt till. Kraven nedan kommer från MDN:s lista för Chrome, Samsung Internet och Edge: name eller short_name, ikoner i storlekarna 192 och 512 pixlar, start_url, display och att prefer_related_applications saknas eller är false. Varje sida måste dessutom länka till manifestet. Appen ska levereras via HTTPS. En service worker krävs inte för att appen ska gå att installera, skriver MDN, men den används ofta för att appen ska fungera utan nät.

Kopiera: gör appen installerbar som PWA

Gör appen installerbar som progressiv webbapp utan att ändra någon befintlig funktion. Lägg till ett webbappmanifest med name "[Appens fulla namn]", short_name "[Kort namn, högst ett par ord]", start_url till appens startsida, display "standalone", theme_color och background_color i appens färger. prefer_related_applications ska saknas. Lägg till ikoner i PNG i storlekarna 192 × 192 och 512 × 512 pixlar, med appens logotyp på en bakgrund som syns på både ljus och mörk hemskärm.

Länka manifestet från varje sida med link rel="manifest". Kontrollera att den publicerade adressen använder HTTPS. Lägg till en enkel service worker som visar en sida med texten "Du är offline, försök igen när du har nät" när nätet saknas. Den ska inte spara inloggade uppgifter eller visa gammal data som om den vore aktuell. Lägg till en hjälpsida som förklarar hur appen läggs till på hemskärmen på iPhone (Dela, Lägg till på hemskärmen) och på Android (Chrome-menyn, Installera). Lägg inte till pushnotiser. Redovisa till sist vilka filer du har skapat eller ändrat och var manifestet och ikonerna ligger.

Välj bort offlinesidan om appen bara är meningsfull med nät, och säg det i beställningen. Lägg till pushnotiser i en egen, senare beställning med en knapp som användaren trycker på. På iPhone gäller sådana notiser bara för den som redan har lagt appen på hemskärmen. Publicera ändringen enligt Publicera appen och hålla den vid liv innan du provar, eftersom provet måste göras på den riktiga HTTPS-adressen och inte i verktygets förhandsvisning.

Prova på två telefoner

Provet nedan är ditt eget. Inga resultat redovisas här. Använd en Android-telefon med Chrome och en iPhone med Safari, och anteckna telefonmodell, systemversion och appens adress.

På Android öppnar du den publicerade adressen i Chrome, trycker på sidan och väntar en halv minut. Kontrollera om Chrome visar en egen uppmaning. Installera sedan via Mer och Installera och skapa genväg. Facit: ikonen på hemskärmen har din logotyp och appens korta namn, och appen öppnas utan adressfält. Om det i stället syns en liten webbläsarsymbol på ikonen eller om appen öppnas i en flik har du troligen fått en genväg. Kontrollera då manifestet och vilken webbläsare som användes.

På iPhone öppnar du adressen i Safari och följer stegen Dela och Lägg till på hemskärmen med Öppna som webbapp påslaget. Facit: namnet i dialogen är det du beställde, ikonen är din logotyp och appen öppnas utan Safaris adressfält. Slå därefter på flygplansläget på båda telefonerna och öppna appen. Har du beställt offlinesidan ska den visas i stället för ett felmeddelande från webbläsaren.

Spara utfallet som handling, förväntat och faktiskt resultat, till exempel: ”iPhone, Safari: ikonen på hemskärmen visar inte vår logotyp.” Be verktyget rätta just det och prova igen på samma telefon.

Källor och kontrolltid

Alla källor lästes den 17 oktober 2026. De belägger hur installation, installationskrav och push fungerar i webbläsarna. Tumregeln för när en PWA räcker, beställningen och provet är artikelns egna.

Nästa kontroll senast den 17 januari 2027, eller tidigare om Apple eller Google ändrar menyvalen eller kraven för installation.