Från sajt till app: Din kompletta guide till Progressive Web Apps
Varför Progressive Web Apps är ett smart val för ditt projekt
Native appar tar tid och resurser. Du kodar separat för iOS och Android, väntar på godkännande i appbutikerna och hanterar dubbla deployments. Progressive Web Apps löser det här. De ger appkänsla med en enda kodbas.
Användare kan lägga till din PWA på hemskärmen, starta den i fullskärm och jobba offline. Du slipper appbutikerna helt. Allt körs från din webbplats – men med extra kraft.
Service workers är nyckeln. De är små JavaScript-processer som hanterar nätverksförfrågningar, cachar innehåll och fixar offline-läge. Rent och snyggt.
Vad PWAs fixar – och inte
PWAs har gränser, men de är dit för säkerhet. De körs inom din domän, kräver HTTPS och i en sandbox. Inga problem, bara smart design.
Fördelarna? Tillgång till native-funktioner som geolocation, kamera och sensorer. Uppdateringar går live direkt – ingen appbutiksväntan. Ny kod når användarna nästa gång de besöker sidan.
Så bygger du en PWA: Steg för steg
Att uppgradera din sajt till PWA handlar om fem delar. Här är guiden:
1. App Manifest: PWA:ns ID-kort
Manifest är en JSON-fil som beskriver din app för operativsystemet. Den anger namn, färger, scope, start-URL, ikoner och mer.
Exempel på en fungerande manifest:
{
"name": "Din Grymma App",
"short_name": "GrymmaApp",
"theme_color": "#2196F3",
"background_color": "#FFFFFF",
"display": "standalone",
"scope": "/",
"start_url": "/",
"description": "Beskrivning av din app",
"orientation": "any",
"icons": [
{
"src": "/assets/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Sätt orientation till "any" om du inte har starka skäl att låsa det. Mobilanvändare vill ha valfrihet.
2. Koppla manifest i HTML
Lägg till den här raden i <head> på din huvudsida eller mall:
<link rel="manifest" href="/assets/manifest.json">
Browsers hittar då din konfig.
3. Fixa offline-läget
Service workers cachar sidor medan användaren surfar. För os cachade grejer, visa en snygg fallback. Skapa offline.html med ett meddelande.
För single-page apps: Symlinka till index.html så de kan navigera vidare.
ln -s index.html offline.html
Ingen fastnar på en död sida.
4. Registrera service worker
Lägg scriptet sist i <body>:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker registrerad'))
.catch(err => console.log('Service Worker misslyckades'));
}
</script>
5. Skriv service workern
Här cachas filer och fixas offline. Enkel version:
const CACHE_NAME = 'v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js',
'/offline.html'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
.catch(() => caches.match('/offline.html'))
);
});
Den cachar vid install, serverar från cache och visar offline-sidan vid fel.
HTTPS är ett måste
Service workers kräver HTTPS. Det handlar om säkerhet. Inte på plats? Fixa det nu. Hos NameOcean ingår SSL-certifikat och auto-HTTPS i vår hosting.
Publicera och testa
Ladda upp manifest, service worker och HTML. Testa så här:
- Öppna DevTools (F12) → Application-fliken
- Kolla manifest utan fel
- Bekräfta service worker i Service Workers-sektionen
- Testa offline (DevTools → Network → Offline)
- Prova install (browsers visar ofta prompt eller meny)
Den stora vinsten
Användare får app-upplevelse utan att du kodar för iOS och Android. Uppdateringar sker direkt. Du styr hela processen.
Värt det lilla extra.
Snabbtips: Automatisera
Känns det mycket? Kolla PWABuilder.com. De genererar det mesta automatiskt. Verktyg sparar tid.
Sammanfattning: PWAs är mogna. Ge användarna appkvalitet medan du fokuserar på kärnan.