Door Arnoud Wokke

Redacteur Tweakers

Tussen web en app

Pwa's moeten veel apps overbodig maken

30-05-2018 • 06:00

192

Singlepage-opmaak

Wat een pwa is

Als een site zich een progressive web app wil noemen, zijn er drie vereisten: de site moet ssl ondersteunen, hij moet service workers hebben en hij moet een manifest hebben dat de eigenschappen van de webapp omschrijft.

Progressive Web Apps: manifest
Voorbeeld van een manifest. Bron: Microsoft Build 2018

Dat manifest is een json-bestand en daarin moeten diverse zaken staan. Zo regelt het zaken als welk icoon op het homescreen staat als gebruikers de site aan hun homescreen toevoegen. Ook wijst het manifest naar het splashscreen en regelt het bestand zaken als kleuren en de url van het beginscherm. Niet onbelangrijk: het manifest wijst gebruikers er bij het eerste bezoek op dat ze de webapp aan hun homescreen kunnen toevoegen.

Progressive Web Apps: service worker
Service worker. Bron: SessionStack

De magie van webapps zit in de service workers. Dat is het belangrijkste element dat pwa's onderscheidt van bijvoorbeeld responsive websites. Service workers zijn stukjes Javascript die onafhankelijk van de site op een apparaat kunnen werken.

Een van de service workers moet ervoor zorgen dat de browser vaste elementen in de site, bijvoorbeeld het menu, logo's en andere vaste elementen, opslaat in de cache. Daardoor hoeft de browser die bij een volgend bezoek niet op te halen, maar staan ze meteen klaar. Dat klinkt als een hele stap vooruit, totdat je bedenkt dat veel mobiele browsers al veel elementen van websites uitstekend cachen. Zo komen onder meer headers uit de cache, maar veel browsers zetten daar ook css neer.

Er is ook een service worker mogelijk die op de achtergrond info laadt. Als de pwa bijvoorbeeld een mailclient is, kan de service worker op de achtergrond alvast de mails ophalen. Zo krijgt de gebruiker zonder online te hoeven, gelijk al zijn recente mails voor zijn neus. Als de gebruiker de site opent, kan de browser kijken of er nieuwe mails zijn en die vervolgens bovenaan zetten.

Daar houdt het niet op met service workers. Ze kunnen, als de browser dat toestaat, de site toegang geven tot de locatievoorzieningen van het apparaat en pushnotificaties geven. Dat zijn twee verschillende acties: de server laat via een pushbericht aan een service worker weten dat er iets belangwekkends is gebeurd en de service worker geeft dat door aan het apparaat.

De derde vereiste is https en dat is er niet voor niets. Door die eis te stellen, kunnen site-eigenaren uitsluiten dat er een man-in-the-middleaanval komt. Een pwa heeft in theorie toegang tot onder meer de locatie van een apparaat en de mogelijkheid om pushnotificaties te sturen. Daarom moet de verbinding zo veilig mogelijk zijn, zodat gebruikers op de webapp kunnen vertrouwen.

Een pwa kan ook samenwerken met andere nieuwe webtechnieken, zoals WebAssembly. Dat is een manier om native code, zoals C, C++ of Rust, te laten draaien in de browser met prestaties die dicht moeten liggen bij die van native software.