Fra hjemmeside til app: Din komplette guide til Progressive Web Apps
Hvorfor Progressive Web Apps er et must til dit projekt
Native apps kræver masser af arbejde. Du skal vedligeholde to separate kodebaser, vente på godkendelse i app-butikkerne og håndtere forskellige udrulninger til iOS og Android. Progressive Web Apps vender det hele om.
Med PWAs får brugerne en ægte app-følelse – ikoner på startskærmen, fuldskærmsstart og offline-adgang – mens du kun arbejder med én kodebase. Ingen app store-kaos. Bare din hjemmeside på steroider.
Det hele kører via service workers: Smarte JavaScript-processer i baggrunden, der fanger netværksanmodninger, cacher indhold og sikrer offline-funktion. Rent og simpelt.
De hårde fakta: Hvad PWAs kan – og ikke kan
Før du går i gang, så vær klar over begrænsningerne. PWAs kører inden for dit domæne, kræver HTTPS og sidder i en sikker sandbox. Det er ikke en fejl – det er ren sikkerhed.
Men gevinsten er stor: Adgang til native API'er som placering, kamera og sensorer. Og opdateringer sker øjeblikkeligt uden app store-ventetid. Næste gang brugeren loader siden, får de den nye version.
Sådan bygger du din PWA: Den praktiske vejledning
At gøre din eksisterende site til en PWA handler om fem nøgledele. Her er præcis, hvad du skal lave:
1. App Manifest: PWAs pas på identiteten
Manifest-filen er som PWAs personkort til operativsystemet. En simpel JSON-fil med al grundinfo:
- Appens fulde navn og kortversion
- Farver til tema og baggrund
- Scope for domænet
- Start-URL ved lancering
- En kort beskrivelse
- Ikoner til startskærmen
- Foretrukne orienteringer
Et konkret eksempel:
{
"name": "Dit fede app",
"short_name": "FedeApp",
"theme_color": "#2196F3",
"background_color": "#FFFFFF",
"display": "standalone",
"scope": "/",
"start_url": "/",
"description": "Beskrivelse af 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æt orientation til "any", medmindre du har et stærkt argument for at låse det. Brugere elsker frihed på mobilen.
2. Tilføj manifest i HTML
Indsæt dette i <head>-sektionen på din hovedside (eller template):
<link rel="manifest" href="/assets/manifest.json">
Nu ved browseren, hvor den skal lede efter opsætningen.
3. Offline-strategien på plads
Service workers cacher sider, mens brugeren surfer. Hvis noget mangler offline, skal du have en fallback. Lav en offline.html med en venlig besked.
På single-page apps: Link den til index.html for at lade brugere komme videre til cachet indhold:
ln -s index.html offline.html
Så sidder de ikke fast på en død side.
4. Registrér service worker
Tilføj dette script lige før </body>:
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker klar'))
.catch(err => console.log('Service Worker fejlede'));
}
</script>
5. Byg service worker-filen
Her sker offline-magi. Den fanger anmodninger, cacher svar og server fra cache ved netværksproblemer:
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'))
);
});
Ved installation cacher den essentials. Den server cachet indhold først og falder tilbage til offline-siden ved fejl.
HTTPS er et must – ingen undskyldninger
Service workers virker kun over HTTPS. Det handler om sikkerhed, ikke bureaukrati. Mangler du HTTPS? Gå ikke videre. Hos NameOcean gør vi det nemt med SSL-certifikater og hosting, der slår HTTPS til automatisk.
Udrul og test
Upload manifest, service worker og opdateret HTML. Test så sådan her:
- Åbn DevTools (F12) → Application-fane
- Tjek manifest uden fejl
- Bekræft service worker i Service Workers-sektionen
- Simuler offline (DevTools → Network → Offline)
- Prøv at installere PWA'en (browseren viser ofte en prompt)
Den ægte gevinst
Brugerne får app-følelse uden, at du jagter to platforme. Opdateringer rammer straks. Du styrer hele pipelinen selv.
Det er værd hver minut i opsætning.
Hurtig genvej
Føles det tungt? Prøv PWABuilder.com. De genererer det meste automatisk. Lad værktøjer tage boilerplatet – det er smart.
Kort sagt: PWAs er ikke længere beta. De giver app-kvalitet, så du kan fokusere på kernefunktionerne.