Op deze pagina
Geen winkel, wel een icoon op je beginscherm
Een PWA, voluit progressive web app, zet je website als app op de telefoon, zonder App Store of Google Play. Je opent een link, tikt op "Zet op beginscherm", en vanaf dan start hij zoals elke andere app.
Het woord progressive zegt hoe het werkt: de site werkt in elke browser, en waar de browser meer kan, krijg je meer. Op een oude computer is het een gewone website, op een recente telefoon een app met een icoon. Onder de motorkap blijft het een webapplicatie: dezelfde code voor iPhone, Android en computer.
Alex Russell en Frances Berriman, juni 2015
Op 15 juni 2015 schreef Alex Russell op zijn blog Infrequently Noted het stuk Progressive Web Apps: Escaping Tabs Without Losing Our Soul. De naam kwam van Frances Berriman. Russell beschreef een soort site die al bestond maar nog geen naam had: hij past zich aan elk scherm aan, werkt zonder verbinding dankzij een service worker, draait altijd veilig over TLS, staat met een icoon op je beginscherm zonder winkel, en blijft deelbaar met een gewone link.
Apple bleef lang achter. Pas met iOS en iPadOS 16.4, aangekondigd door WebKit op 16 februari 2023, kunnen webapps op het beginscherm van een iPhone pushmeldingen sturen, en sinds die versie kan je ze ook vanuit Chrome, Edge en Firefox op het beginscherm zetten, niet alleen vanuit Safari.
Webapp of winkel-app, voor dezelfde taak
- Bouw
- PWAEen code voor iPhone, Android en computer
- Native appEen app voor iOS en een voor Android, of een gedeelde code met twee versies
- Bij je gebruiker
- PWAEen link openen en op het beginscherm zetten
- Native appZoeken en installeren in de winkel
- Updates
- PWABij iedereen, de volgende keer dat de app opent
- Native appLangs de keuring van de winkel, en de gebruiker moet bijwerken
- Meldingen op iPhone
- PWASinds iOS 16.4, als de app op het beginscherm staat
- Native appAltijd, na toestemming
- Diep in de telefoon
- PWACamera, locatie en bestanden via de browser, met verschillen per toestel
- Native appVolledige toegang, ook tot Bluetooth en sensoren
- Vaste kosten
- PWAHosting, geen winkelaccount
- Native appApple 99 dollar per jaar, Google 25 dollar eenmalig, plus hosting
Voor een app die je team of je klanten iets laat doorgeven en opvolgen, volstaat een PWA bijna altijd. Native loont als de app diep in de telefoon moet werken of in de winkel gevonden moet worden.
Het manifest in vier onderdelen
manifest.json, gelinkt vanuit elke pagina, geserveerd via https
{
"name": "Werfplanning Lokeren",
"short_name": "Werven",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192" },
{ "src": "/icon-512.png", "sizes": "512x512" } ],
"start_url": "/vandaag",
"display": "standalone"
}
- De naamWat onder het icoon op het beginscherm staat; short_name als de volledige naam te lang is.
- Twee iconenChrome, Edge en Samsung Internet vragen er een van 192 en een van 512 pixels.
- Waar de app opentDe eerste pagina na een tik op het icoon, hier meteen de planning van vandaag.
- Zonder adresbalkStandalone opent de site in een eigen venster, zoals een app. Daarna kan hij op iPhone ook meldingen sturen.
De weg naar de telefoon
Native app
- Zoeken en installeren in de winkel
- Een app voor iOS en een voor Android
- Elke update langs de keuring van de winkel
- Apple 99 dollar per jaar, Google 25 dollar eenmalig
Een service worker maakt er een app van die ook zonder bereik werkt. Hij is geen eis om te installeren, wel de reden dat een PWA aanvoelt als een app.
Twaalf ploegbazen, een app zonder winkel
Stel: een aannemer wil dat zijn twaalf ploegbazen elke ochtend hun werf, hun ploeg en hun materiaal op de telefoon zien, en 's avonds hun uren invullen. De helft heeft een iPhone, de andere helft een Android-toestel, twee hebben een tablet in de bestelwagen.
Als native app zijn dat twee apps, een ontwikkelaarsaccount bij Apple van 99 dollar per jaar en een bij Google van 25 dollar eenmalig, en elke update langs de keuring van twee winkels. Als PWA is het een webadres, bijvoorbeeld werven.aannemer.be. De aannemer stuurt de link per sms, elke ploegbaas zet hem in drie tikken op zijn beginscherm, en een aanpassing staat de volgende ochtend bij iedereen. De bouw zelf, de schermen voor planning en tijdsregistratie, kost bij beide routes ongeveer evenveel per scherm; bij native doe je ze twee keer, of in een gedeelde code met twee versies om te testen en in te dienen. Hoe dat in een offerte doorweegt, lees je in wat een app laten maken kost.
Wat werkt op iPhone, Android en computer
| Toestel en browser | Installeren | Hoe |
|---|---|---|
| Android, Chrome met Google-diensten | Ja, als echte app | Installatievraag van Chrome, na een tik en 30 seconden op de pagina |
| Android, Samsung Internet op een Samsung | Ja, als echte app | Net als Chrome, als WebAPK |
| iPhone en iPad, iOS 16.4 of later | Ja, op het beginscherm | Deelmenu in Safari, Chrome, Edge, Firefox of Orion |
| Windows, Mac en Linux, Chrome of Edge | Ja, als eigen venster | Elke PWA met een manifest |
| Mac, Safari 17 of later | Ja, in het Dock | Voeg toe aan Dock, ook zonder manifest |
| Computer, Firefox | Nee | Werkt als gewone website |
| Android, Firefox of Edge | Snelkoppeling | Een icoon dat de site in de browser opent |
Op een iPhone kan een PWA pas meldingen sturen nadat hij op het beginscherm staat, en de vraag om toestemming moet volgen op een tik van de gebruiker. Leg je gebruikers dus bij de start uit hoe ze hem installeren; dat ene scherm uitleg beslist of je app gebruikt wordt. Een goede UX begint daar.
Klaar om te installeren: wat moet kloppen
- De hele app draait over https, met een geldig SSL-certificaat.
- Elke pagina linkt naar het manifest, met name of short_name, start_url en display standalone.
- Er zijn twee iconen, van 192 en van 512 pixels, plus een apple-touch-icon voor iPhone.
- Een service worker bewaart wat nodig is om zonder bereik te openen, en toont een duidelijke melding als iets niet lukt.
- De vraag om meldingen komt pas na een tik op een knop, nooit bij het openen.
- Er is een korte uitleg per toestel: zo zet je de app op je beginscherm.
- Getest op een echte iPhone en een echt Android-toestel, niet alleen in de browser op een computer.
Een codebasis in plaats van drie
Een PWA kost wat een goede webapplicatie kost, plus een beperkt stuk werk voor het manifest, de iconen en de service worker. Wat je uitspaart: een tweede app, de jaarlijkse 99 dollar bij Apple, de keuring bij elke update en de dag dat de helft van je team nog op een oude versie zit. Wat je erbij krijgt: een adres dat je deelt met een link, en pagina's die Google kan lezen als je dat wil, wat een app in de winkel niet heeft. Snelheid telt dubbel bij een PWA; meet je huidige site met de snelheidstest.
Een PWA is ook een goede eerste versie. Wil je weten of je team of je klanten een app echt gebruiken, bouw dan eerst een MVP als PWA. Blijkt later dat je Bluetooth, de NFC-chip of een plaats in de winkel nodig hebt, dan bouw je de native app op hetzelfde platform erachter. Wordt je app een product dat je aan andere bedrijven verkoopt, dan is de PWA de voorkant van je SaaS.
Over installeren, meldingen en offline
Wat is het verschil tussen een PWA en een gewone app?
Een gewone, native app installeer je uit de App Store of Google Play, en hij is per besturingssysteem apart gebouwd. Een PWA zet je vanuit de browser op je beginscherm, en een code werkt op elk toestel. Native kan dieper in de telefoon, een PWA is goedkoper te bouwen en meteen bij te werken.
Werkt een PWA op een iPhone?
Ja. Je zet hem op het beginscherm via het deelmenu in Safari, en sinds iOS 16.4 ook vanuit Chrome, Edge, Firefox en Orion. Meldingen kan hij sturen zodra hij op het beginscherm staat en de gebruiker toestemming gaf na een tik.
Heeft een PWA https nodig?
Ja. Een browser installeert een PWA alleen als hij over https komt, of tijdens het bouwen vanaf je eigen computer. Ook de service worker, die de app zonder bereik laat openen, werkt alleen over een beveiligde verbinding. Een geldig SSL-certificaat is dus de eerste stap.
Kan een PWA in de App Store of Google Play?
Niet als PWA. Je kan hem verpakken in een native schil en zo indienen, maar dan gelden de regels en kosten van de winkel weer. Voor een app voor je eigen team of klanten heb je de winkel meestal niet nodig.