Les 11 van 12

Zet je webapp als app op je telefoon

Geef je live onderwijswebapp een eigen icoon en laat hem openen als een gewone app, zonder App Store.

Dezelfde app, nieuwe ingang

Je deelt nog steeds gewoon een link

Je bouwt geen tweede versie en hoeft niets naar een App Store te sturen. Leerlingen of collega's openen de live link en kunnen die webapp daarna op hun beginscherm zetten.

De webapp krijgt een herkenbaar appicoon.
Hij kan zonder de normale browserbalk openen.
Nieuwe GitHub-publicaties verschijnen via dezelfde app.
Supabase- en AI-functies kunnen internet nodig blijven hebben.

Live link

Dezelfde URL uit les 10

Beginscherm

Een eigen icoon op de telefoon

Opent als app

Dezelfde online onderwijswebapp

Maak hem herkenbaar

Kies hoe jouw app op een telefoon verschijnt

Je hoeft geen icoonbestanden of manifest zelf te maken. Kies de uitstraling en laat je vibe-code tool ook een vriendelijke installatiemelding voor mobiele bezoekers inbouwen.

Live voorvertoning

Naam onder het appicoonHoud hem kort genoeg voor een telefoonscherm.

Welk soort icoon wil je?

Kies een hoofdkleur

09:41

MMijn onderwijsapp

Klaar om te bouwenJouw PWA-prompt

Maak van deze bestaande gepubliceerde webapp een installeerbare PWA.

Gebruik deze keuzes:
- appnaam: Mijn onderwijsapp
- icoon: Gebruik het logo dat al in mijn app staat.
- hoofdkleur: #5F3792

Behoud de bestaande vormgeving en alle werkende functies.

Voeg de benodigde PWA-instellingen toe, waaronder:
- een geldig web app manifest
- een passende korte appnaam
- start_url op de startpagina
- display: standalone
- passende theme_color en background_color
- appiconen van 192x192 en 512x512
- een apple touch icon voor iPhone en iPad
- de juiste koppeling tussen de app en het manifest

Voeg ook een rustige installatiemelding toe voor bezoekers die de webapp op een telefoon openen:
- vertel kort dat zij de webapp als app op hun beginscherm kunnen zetten
- toon de melding niet als de webapp al als app vanaf het beginscherm is geopend
- maak de melding wegklikbaar en onthoud lokaal dat iemand hem heeft gesloten, zodat hij niet bij ieder bezoek terugkomt
- toon op iPhone en iPad de stappen: open in Safari, tik op Delen en kies Zet op beginscherm
- gebruik op Android de browserinstallatie via beforeinstallprompt als die beschikbaar is; toon anders de stappen via het Chrome-menu en App installeren of Toevoegen aan startscherm
- houd de melding compact, toegankelijk en niet blokkerend

Voeg geen offline modus, pushmeldingen of App Store-functionaliteit toe. Controleer de mobiele weergave en vertel mij daarna wat je hebt aangepast.

Publiceer of push nog niets zonder mijn toestemming.

Op je eigen telefoon

Installeer de live webapp

Je deelt nog steeds dezelfde link. De ontvanger kan die link zelf als app op het beginscherm zetten.

0van 3 bewijzen

Open de live link in Safari

Gebruik de vaste link uit de vorige les.

Tik op Delen

Kies daarna Zet op beginscherm.

Voeg de webapp toe

Laat Open als webapp aanstaan en bevestig de naam.

Controleer of het echt werkt

Het appicoon staat op mijn beginschermIk kan de webapp vanaf het icoon openen.De belangrijkste flow werkt op mijn telefoonTekst, knoppen en invoervelden zijn prettig te gebruiken.Dezelfde app toont een nieuwe publicatieNa een kleine push zie ik de wijziging via hetzelfde appicoon.

Nu doen

Actie van deze les

Zet jouw live webapp op een telefoon

Laat eerst de PWA-instellingen toevoegen en controleer de preview. Push daarna de goede versie via GitHub, wacht op de automatische publicatie en installeer de live link op je telefoon.

0van 4 stappen gedaan

Checklist

0 van 4 gedaan

Bezig

Maak hierboven de prompt met jouw appnaam, icoonrichting en kleur.

Laat je vibe-code tool de PWA-instellingen en mobiele installatiemelding toevoegen.

Push de goedgekeurde versie naar GitHub en wacht tot dezelfde live link is bijgewerkt.

Open de live link op een telefoon, controleer de installatiemelding en test daarna de app vanaf het beginscherm.

Klaar als:

Je onderwijswebapp staat met een eigen icoon op een telefoon en opent via dezelfde live link.

Vragen en opmerkingen

Praat verder over deze les

Stel een vraag, lees mee of help een andere cursist op weg.

0 vragenAlles is beantwoord

Vragen laden...

Voortgang bewaren

Markeer deze les als afgerond

Zo weet je straks precies waar je bent gebleven.

Voortgang laden...

Volgende stap

Klaar om de hele route af te ronden?

Je webapp is gebouwd, getest, bewaard, gepubliceerd en als app geïnstalleerd. In les 12 verzamel je de laatste bewijzen en deel je het resultaat.

Door naar les 12: volledig voorbeeld en eindopdracht