Så gör du en AI-byggd app till en installerbar PWA med egen ikon

En installerbar app kräver tre saker, inte en kryssruta

En Progressive Web App är ingen inställning du slår på. Webbläsaren erbjuder bara installation när tre saker stämmer för adressen: ett webbmanifest anger namn, visningsläge och minst en ikon, en service worker är registrerad, och sidan levereras över HTTPS. Saknas något av det visas installationsvalet helt enkelt aldrig — inget fel, ingen varning, ingenting i konsolen.

I NorthernGo bygger du inte de filerna själv. När du publicerar ett projekt på en PWA-subdomän serverar backend manifestet, ikonen och service workern för det värdnamnet, och injicerar manifestlänken och Apple-metataggarna i appens HTML på vägen ut. Vad du bidrar med är ett namn och, om du vill, en kvadratisk bild.

Funktionen ligger på Premium och Pro. På gratisplanen öppnar menyvalet uppgraderingsdialogen i stället, och ett gratisprojekts subdomän serveras aldrig — anropen omdirigeras till reservlänken https://northerngo.com/?app=<projektId>. Den skillnaden visar sig spela stor roll, så den återkommer sist.

Steg 1: Reservera en subdomän

Gå till Mina projekt, klicka på Mer på projektkortet och välj Skapa PWA. Panelen heter Välj PWA-länk: du skriver ett namn i fältet och ändelsen .northerngo.com ligger fast till höger om det.

Namnet saneras innan det reserveras. Bara små bokstäver a–z, siffror och bindestreck överlever, resultatet måste vara 2–63 tecken och får inte börja eller sluta med bindestreck. Allt annat tas bort i stället för att skrivas om, och just det brukar överraska: mellanslag försvinner helt i stället för att bli bindestreck, och å, ä och ö plockas bort utan att ersättas med a och o. "Åsas Bageri" blir alltså sasbageri. Skriv namnet precis som du vill ha det, med bindestrecken på plats — asas-bageri — och läs bekräftelserutan, som visar vilken adress som faktiskt blev reserverad.

Ett trettiotal namn är reserverade av plattformen (www, api, app, admin, shop, store, blog, docs, support, demo, northerngo och liknande). Om ett annat projekt redan har namnet du vill ha får du ett tydligt meddelande plus ett ledigt förslag, i stället för att skriva över någon annans app — reservationen sker i en transaktion, så två personer kan inte ta samma namn samtidigt.

Tryck Spara och appen svarar på https://ditt-namn.northerngo.com direkt, med certifikat på plats. Vill du hellre använda en domän du äger själv är det en Pro-funktion och ett annat flöde — se koppla egen domän.

Steg 2: Ladda upp ikonen

Samma panel, under App-ikon (valfritt): klicka på Välj logga och peka ut en fil. Förhandsvisningen intill knappen uppdateras direkt, innan något har sparats.

Två saker är värda att veta om vad som händer med filen.

Den skalas inte om och komprimeras inte. Webbläsaren läser den med en FileReader och sparar den base64-kodade data-URL:en i projektets fält iconUrl, exakt som du valde den. Ett foto på 3 MB förblir ett foto på 3 MB. Eftersom hela värdet måste rymmas i ett enda databasdokument finns ett hårt tak på ungefär 700 kB för den kodade strängen, och en större fil nekas med ett meddelande som ber om en mindre bild. Exportera 512×512 som PNG eller WebP och du hamnar långt under gränsen.

Samma bild används för alla storlekar. Manifestet anger din ikon både som 192×192 och som 512×512, och märker båda med purpose: "any maskable". Det är den detaljen som brukar bli fel. Android beskär ikonen till den form som telefonens skrivbord använder — cirkel, mjuk kvadrat, rundad kvadrat — och beskärningen är generös: ungefär de yttersta tio procenten på varje sida kan försvinna. Håll loggan inom de mittersta åtta tiondelarna av ytan och låt bakgrundsfärgen gå ända ut i kanterna. En logga som ritats kant i kant kommer ut med hörnen avskurna.

Hoppar du över ikonen får du ingen trasig bild. Backend genererar en vid förfrågan: en SVG på 512×512, bärnstensfärgad #d97706, med rundade hörn och appnamnets första bokstav i vitt. Den ser medveten ut och fungerar gott som platshållare, men det är en bokstav och inte ditt varumärke.

Tryck sedan Spara. Ikonen och subdomänen sparas av samma anrop, så att välja en logga och stänga panelen utan att spara lämnar den tidigare ikonen kvar.

Steg 3: Installera på telefonen

Öppna https://ditt-namn.northerngo.com i telefonen.

I Android visar Chrome en installationsfråga, eller valet Installera app i webbläsarmenyn, så fort service workern har registrerats. Vid första besöket kan det dröja ett par sekunder.

I iOS finns ingen fråga alls, och har aldrig funnits — Apple stödjer inte installationshändelsen. Öppna sidan i Safari, tryck på Dela-knappen och välj Lägg till på hemskärmen. Eftersom den injicerade <head> innehåller apple-mobile-web-app-capable, apple-mobile-web-app-status-bar-style och apple-mobile-web-app-title startar appen därefter utan Safaris gränssnitt, med genomskinlig statusrad och med projektnamnet under ikonen.

Oavsett plattform sätter manifestet display: "standalone", så den installerade appen har varken adressfält eller webbläsarflikar.

Vad manifestet faktiskt säger

Värt att läsa en gång, eftersom några värden är låsta och inte dina att bestämma:

{
  "name": "Ditt projektnamn",
  "short_name": "Ditt projektnamn",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#050810",
  "theme_color": "#d97706",
  "icons": [
    { "src": "<din ikon>", "sizes": "192x192", "purpose": "any maskable" },
    { "src": "<din ikon>", "sizes": "512x512", "purpose": "any maskable" }
  ]
}

Både name och short_name hämtas från projektnamnet under Mina projekt, så byter du namn på projektet byter den installerade appen namn. Bakgrunds- och temafärgen är plattformsvärden — nästan svart #050810 och NorthernGos bärnsten #d97706 — och det finns i dag ingen möjlighet att sätta egna per projekt, vilket betyder att en ljus grafisk profil ändå blinkar mörk startskärm vid uppstart.

Samma värdnamn levererar också en service worker på /sw.js, som registreras automatiskt av ett injicerat skript. Den förcachar CDN-filerna för Tailwind och Font Awesome så att appen renderas stylad i stället för naken utan uppkoppling, servar sidnavigering från cachen först så att du aldrig får vit skärm, faller tillbaka på en grå platshållare för bilder den inte har, och cachar aldrig anrop mot backend. Den sista regeln är avsiktlig: ett cachat databassvar skulle visa gammal data utan att användaren kunde märka det. Ska din app bete sig vettigt utan uppkoppling betyder mönstren för offline först mycket mer än service workern gör, eftersom den inbyggda databasen hellre misslyckas rent än ljuger för dig.

Vad det här inte ger dig

• Ingen plats i app-butikerna. En PWA installeras från webbläsaren. Den listas inte i App Store eller Google Play, går inte att hitta genom att söka där, och kan inte använda köp i appen. För att lämna in till en butik behöver du i stället den nativa Capacitor-exporten.
• Inga push-notiser. Service workern som levereras har ingen push-hanterare, så det finns ingenting att prenumerera på.
• Ingen egen startskärm eller temafärg per projekt.
• Ingen separat apple-touch-icon-tagg. Nyare iOS-versioner läser manifestets ikon, men på äldre versioner som saknar det stödet kan genvägen på hemskärmen falla tillbaka på en skärmbild av sidan.
• Gratisprojekt serveras inte på sin subdomän. Vakten kontrollerar ägarens plan vid varje enskilt anrop och omdirigerar till northerngo.com/?app=<id>. Att lägga den länken på hemskärmen installerar inte din app — det installerar NorthernGos egen PWA, med NorthernGos namn och ikon, eftersom appen på den adressen körs inuti en visare på vår domän i stället för att vara sidan själv. Det är den absolut vanligaste orsaken till att någon rapporterar att ikonen inte syns. De flesta appbyggare drar aldrig den gränsen alls, vilket är en del av vad jämförelsen med Lovable handlar om.

Felsökning

"Namnet är redan upptaget av en annan app." Någon hann före, och meddelandet innehåller ett ledigt alternativ. Namnen är gemensamma för alla projekt i NorthernGo, inte per konto.

Sparningen nekas för att ikonen är för stor. Din bild överskrider base64-kodad ungefär 700 kB. Exportera om den i 512×512 som PNG eller WebP.

Ikonen är en bokstav på en bärnstensfärgad ruta. Ingen iconUrl sparades, vilket betyder att antingen valdes ingen fil, eller så trycktes aldrig Spara efteråt.

Ikonen är beskuren, eller hörnen är avklippta. Det är den maskerade beskärningen som gör sitt jobb. Lägg till marginal: loggan inom de mittersta åtta tiondelarna, bakgrundsfärgen ända ut.

Den gamla ikonen kommer tillbaka fast jag bytte. Manifest cachas både av webbläsaren och av den installerade appen. Ta bort appen från hemskärmen, rensa webbplatsdatan för subdomänen, ladda om sidan och installera på nytt.

Chrome erbjuder inget installationsval. Kontrollera att du är på https://ditt-namn.northerngo.com och inte på ?app=-länken, och öppna sedan Verktyg för utvecklare → Application → Service Workers och se att en worker är registrerad och aktiv. Ingen worker, ingen installationsfråga.

Den installeras men öppnas i en vanlig webbläsarflik. Genvägen skapades från ?app=-reservlänken eller från en omdirigerad adress, så start_url matchar inte längre manifestets omfång. Ta bort den och installera om från subdomänens rot.