Offline

(C) Als gebruiker wil ik ook gebruik kunnen maken van de spellen als ik geen internetverbinding heb

Uit de debriefing van de opdrachtgever kwam naar voren dat er niet altijd een internetverbinding die goed is. Hierdoor is het belangrijk dat de applicatie ook offline werkt en dat spellen offline beschikbaar zijn.

Interface en UX offline opslaan

Belangrijk is dat de gebruiker snapt dat er offline mogelijkheden zijn. Daarom hebben we in de eerste een download button gemaakt bij elke spel.

Als een gebruiker hierop klikt, wordt het spel opgeslagen en veranderd de button

Er zijn daarna meerdere feedback momenten voor de gebruiker waarin wordt aangegeven dat het spel offline beschikbaar is. Zoals bijvoorbeeld onder de titel van het spel.

Als de gebruiker nu offline zou zijn. Krijgt deze het volgende te zien

Offline pagina, met de opgeslagen spellen

Mocht de gebruiker geen opgeslagen spellen hebben, dan wordt het volgende getoond:

Problemen

Technisch gezien is de gebruiker nu in staat, om zonder internet verbinding de website te gebruiken. Er zijn echter een aantal problemen voor de gebruikerservaring. Deze kwamen naar vooren tijdens de ontwikkeling, maar ook tijdens de design review

• Veel technische termen:

  • Worden als offline, gedownload, opgeslagen, kunnen allemaal niet begrepen worden, het zijn technische termen die weinig kunnen zeggen bij iemand zonder technische kennis.

• Geen onboarding

  • Het is voor de gebruiker niet duidelijk wat de mogelijkheden zijn. (ook icm het gebruik van de technische termen)

  • De gebruiker wordt niet uitgelegd hoe een spel offline beschikbaar wordt.

• Het is niet de gebruikers fout.

  • Overal staat dat de gebruiker offline is, maar de app werkt gewoon. Dat kan lijken alsof de gebruiker iets fout doet en de gebruikservaring verminderen. Ook teksten als 'Oeps, je bent offline helpen hier niet bij'

Deze vragen hebben wij meegenomen in de volgende iteratie, waarin offline veel meer vanuit de gebruiker wordt bekeken. Deze iteratie heeft Mijn Gymles opgeleverd. Op de pagina van Mijn Gymles wordt dit uitgelegd

Techniek Offline opslaan

Progressive Web App (PWA)

Om (onder andere) offline mogelijk te maken, wordt de website een Progressive Web App. Een PWA is een website die installeerbaar, betrouwbaar en meer mogelijkheden heeft dan een website. Het is soort mix tussen een website en een app.

Service Worker en Caches

Alles begint bij de service worker, deze maakt het mogelijk voor een website om een PWA te worden. Een service-worker werkt op de achtergrond en kan een request/fetch opvangen. Hierdoor kan je de fetch aanpassen of iets anders terug sturen op basis van verschillende condities. Daarnaast kan een PWA toegang krijgen tot CacheStorage hierin kun je requests opslaan, die terug gestuurd kunnen worden bij bijvoorbeeld een fetch .

Een service-worker moet door middel van een aantal regels javascript geinstalleerd worden. Hierna is deze in de browser beschikbaar, ook als deze offline is. Hierdoor kunnen nog steeds fetch events opgevangen worden.

De combinatie van de service-worker , het opvangen van fetch en CacheStorage maakt het mogelijk om de website offline beschikbaar te maken.

Op het moment dat de service-worker geinstalleerd wordt, voegen we een aantal pagina's toe aan de CacheStorage . Als er een fetch request komt, kunnen we uit de CacheStorage een response teruggeven. Dit kan zelfs offline, waardoor een website offline kan zijn.

SvelteKit, offline en caches

Voor onze applicatie gebruiken we Svelte/Sveltekit. SvelteKit is heel erg gebaseeerd op het principe van Progressive Enhancement en heeft dus ook nagedacht over PWA.

Echter tijdens de ontwikkeling kwamen een aantal problemen voor vanwege de nieuwheid van SvelteKit.

Single Page App

Sveltekit, gebruikt Svelte, wat een Single Page Application is. Dit betekent dat er 1 pagina wordt geladen en dat er met JavaScript andere views worden geladen.

Omdat Svelte (in tegenstelling tot andere SPA frameworks) een build step heeft die alles naar JS compiled, weten we niet welke bestanden offline bescikbaar moeten zijn.

Gelukkig heeft SvelteKit hierover nagedacht. Door een service-worker.js (of.ts) bestand te maken in de src zorgt Svelte ervoor dat deze mee gaat in de build en dat deze automatisch geinstalleerd wordt.

SvelteKit maakt hierdoor ook een aantal belangrijke verwijzingen mogelijk binnen de service-worker. Door module $service-worker te importeren, krijg je toegang tot build , files en timestamps .

build is een array met alle files die gebuild worden. Deze direct doorgegeven worden aan CacheStorage waardoor alle .js en .css bestanden worden gedownload in de CacheStorage . files doet hetzelfde maar dan voor alle assets (afbeeldingen, fonts, icons etc.)

De applicatie zelf is nu beschikbaar offline, maar de data van de spellen niet.

Spellen.json

Omdat we niet alle spellen tegelijk op de telefoon willen downloaden moeten we de data die komt uit de [game].json endpoints selectief gaan cachen. Dus, op het moment dat iemand op de download knop klikt, moet aan de CacheStorage de data uit het endpoint worden toegevoegd.

Server Side Rendered