Progressive Web App

PROGRESSIVE WEB APP

 

Snelle installatie:

 

(momenteel enkel voor Android toestellen met Chrome, Firefox, Opera oF Samsung browser en beperkte ondersteuning vanaf IOS 11.3)

Open eboek.info op de normale manier op je telefoon.

Chrome: klik op het rijtje van 3 bolletjes rechts bovenaan je browser, en selecteer ‘toevoegen aan startscherm’

Firefox: klik op het huisje met een ‘+’ in je navigatie balk.

 

Progressive Web App

Opera: klik op het rijtje van 3 bolletjes rechts bovenaan, en selecteer ‘startscherm’

Vanaf IOS 11.3 is er beperkte ondersteuning voor Apple toestellen. Gebruikers kunnen proberen de app toe te voegen via ‘Add to home screen’.

______________________________________

 
Progressive Web App (PWA)

 

Vanaf nu hebben we onze eigen app voor mobiele toestellen (het werd tijd…).

We hebben hiervan gebruik gemaakt van het PWA (Progressive Web App) protocol.

Deze technologie is heel nieuw en momenteel nog redelijk onbekend, dus een enige uitleg is op zijn plaats.

Tot nu toe had je twee afzonderlijke zaken:

* apps (die je in de ‘store’ moet downloaden)
* webpages (zoals eboek.info)

Met een PWA kan je het beste van beiden kombineren. Een PWA gedraagt zich en ziet eruit als een app, maar is eigenlijk gebaseerd op een compatiblele web browser (momenteel Chrome, Firefox en Opera voor Android; IOS en Desktop toepassingen bevinden zijn nog in ontwikkeling)

Concreet wilt dit zeggen dat je op je home screen een ‘EBoek’ ikoontje hebt, zoals bij iedere andere app (je ziet eerst een ‘splash screen’ terwijl de app opent, eens dit gebeurd is ziet hij er uit als de normale site, maar dan zonder de browser navigatie-balk). Voor regelmatige bezoekers is dit handiger dan altijd de browser te moeten openen.

 

Progressive Web App

 

Iedere keer als je een pagina bezoekt, zal de app deze opslaan en bijhouden voor offline gebruik (dmv. een zgn. ‘service worker’). Na een tijdje zal je merken dat de site sneller en sneller begint te laden. (Progressive App). Uiteraard, indien we een pagina updaten, zal de app de nieuwe versie van deze pagina tonen.

Theoretisch zal je dus na een tijdje de app volledig zonder internet-verbinding kunnen gebruiken (dat zegt de reclame toch). In de praktijk echter is een site als EBoek veel te groot om volledig offline te hebben (je wilt echt niet de 40.000 foto’s die we hebben naar je telefoon downloaden…) Daarom zijn er limieten ingesteld hoeveel data de app offline kan hebben.

Momenteel werkt het enkel voor Android (Chrome, Firefox en Opera), IOS gebruikers kunnen desgewenst een experimentele versie van Safari proberen, en Microsoft is ermee bezig om het ook naar gewonde desktop computers te brengen.

Andoid gebruikers hebben mogelijk al eens een pop-up gezien die vraagt om onze site toe te voegen aan het startscherm. Dat is je browser die vraagt om de app te installeren. Helaas zie je die popup op de meest onverwachte momenten (vooral mensen die de site voor de eerste keer bezoeken en geen nood hebben aan een app).

 

Progressive Web App

 

We kunnen hem beter manueel installeren.

Chrome: open EBoek, klik op het rijtje bolletjes rechts bovenaan, en selecteer ‘toevoegen aan startscherm’

Firefox: open EBoek, en in de browser navigatie balk zie je een huisje met een ‘+’ in, Klik hierop en je krijgt een schermpje om de app te installeren.

 

Progressive Web App

Opera: Eboek openen, klik op het rijtje bolletjes rechts bovenaan, en selecteer ‘startscherm’

Deze werkwijze is overigens hetzelfde voor andere site’s die een PWA hebben (momenteel nog niet al te veel). Je kan desgewenst ook sites die geen PWA hebben op deze manier toevoegen aan je home screen, maar in dit geval krijg je geen app, enkel een bookmark met icoontje welke je browser opent.

Als je ooit de app wilt verwijderen, ‘swipe’ je hem naar boven tot je een melding krijgt om hem te verwijderen.

Zoals gezegd, deze techniek is splinternieuw en wordt nog niet door ieder OS ondersteund. Het valt te verwachten dat hij zich verder ontwikkeld en dat we snel nieuwe toepassingen/verbeteringen zullen zien. Iets wat nu reeds perfect mogelijk is zijn ‘push notifications’ – bv. we sturen een bericht naar iedere geinteresseerde telefoon wanneer er nieuwe strips beschikbaar zijn.

 

Voor hen die er meer over willen weten:

 

Progressive Web Apps: de toekomst van mobiele apps?

Google Developers

Wikipedia

Progressive web apps(PWAs) are coming to a Safari near you

Forbes