Een Progressive Enhancement is het toevoegen van functionaliteiten. Een website is met basis functionaliteiten nog steeds bruikbaar, maar door meer toe te voegen zoals het gebruik van javascript en API's kan de gebruikerservaring verbeteren

Ik ben gaan kijken hoe andere websites werken met progressive enhancement. Omdat ik ook een kaartje wil toevoegen met een locatie ben ik eerst naar google maps gaan kijken. Als je daar de Javascript uit zet krijg je niks te zien. Hun hebben dus geen progressive enhancement.

Daarna ben ik gaan kijken naar https://www.kentekencheck.nl/. Als ik daar de javascript uit zet kan ik nog steeds alles opzoeken. De website verliest bijna niets. Het enige wat gebeurd is dat de achtergrond verdwijnt. Dit is dus een goeie manier om je applicatie te laten werken.

Ik wil mij volledig gaan focussen op het form waar de gebruiker zijn auto moet invullen. Ik wil ervoor zorgen dat de gebruiker zo min mogelijk hoeft in te vullen. Mijn input velden zijn nu de volgende:

Ik kan data ophalen uit een API zodat de gebruiker alleen maar zijn kenteken hoeft in te vullen. Ik kan er dan voor zorgen met Javascript dat de rest vanzelf gaat.

De gebruiker moet een locatie invoeren, er kan dan gekeken worden hoe ver een match van jou vandaan is. Dit kan gedaan worden met Geolocation. De browser vraagt of jij je locatie wilt delen. Als je daar toestemming voor geeft zal het automatisch ingevuld worden.

Als Javascript niet beschikbaar is is de website nog steeds prima bruikbaar. Het form moet dan wel handmatig ingevuld worden. De locatie word nu opgehaald doormiddel van Geolocation. Dit zijn dan coördinaten. Deze coördinaten gebruik ik om een kaartje te laten zien van google maps met de locatie erbij. Doormiddel van Geolocation zijn deze precies. Als je dit zelf moet invullen word het dat niet meer.

Omdat ik gebruik maak van google maps werkt het kaartje niet meer als je javascript uit zet. Ik heb hier nu een simpele "oplossing" voor bedacht met de <noscript> tag in HTML. Als er geen script is krijg je een bericht dat je javascript moet aanzetten om het kaartje te zien. Natuurlijk is dit geen fallback, want eigenlijk laat je op dit moment niks zien.

De volgende stap was om ervoor te zorgen dat niet meer de longitude en latitude getoond word op de detail pagina. Dit is natuurlijk niet heel erg leesbaar. Ik ben gaan zoeken naar een manier om dit op te lossen. Ik kwam erachter dat dit het best gedaan kon worden met een API. De fallback zonder javascript is nog steeds dat het de longitude en latitude laat zien, maar zodra javascript aan staat laat ik het land zien.