​Progressive Web Applications:  het beste van twee werelden

Mobiele bezoekers zien veel sites, maar besteden meer tijd in apps. PWA biedt ze een app-like ervaring.

Met Progressive Web Applications (PWA) heeft de webwereld een nieuw begrip omarmd. Het lijkt verder te gaan dan een nieuwe term in het rijtje adaptive en responsive: PWA kan online zakendoen ingrijpend veranderen.

Hechtere relatie met mobiele webbezoeker

Het aantal websites dat een mobiele gebruiker bezoekt is veelal hoger dan het aantal apps dat wordt gebruikt. In een app wordt echter meer tijd doorgebracht dan op een site. Met PWA is de kloof van site naar native app te overbruggen. Google omschrijft PWA als ˈeen app die moderne webmogelijkheden gebruikt om een app-achtige gebruikerservaring te leveren.ˈ

Meer snelheid en gemak

Om misverstanden te voorkomen: het gaat niet om zogenoemde hybride mobiele apps. Die worden ontwikkeld met web-based technologieën en via Cordova beschikbaar gesteld in de app stores van de verschillende platformen. Een PWA is een mobile-first application die het beste van het web en van native apps combineert voor een optimale gebruikerservaring. Een PWA gedraagt zich als een app voor mobiele gebruikers die direct beschikbaar is in de browser. Net als bij native apps krijgen gebruikers toegang door te klikken op het pictogram in het startscherm, waarna een custom splash screen volgt.

Kenmerken

Er bestaat geen nauwkeurig mechanisme om te bepalen of een web-app als een PWA is aan te merken, maar er zijn wel enkele algemeen aanvaarde criteria:

  • Progressive: de app werkt voor elke gebruiker, ongeacht de keuze van de browser.
  • Responsive: de app past op elk apparaat (desktop, smartphone, tablet en alles wat er nog bijkomt).
  • Veilig: de app draait via HTTPS om snooping en geknoei met content te voorkomen.
  • Linkable: de app is makkelijk te delen als URL.
  • "Installeerbaar": de gebruiker kan de app op het startscherm zetten zonder een app store.
  • Connectivity-independent: gebruikers of zogenoemde service workers (zie hierna) kunnen offline of op netwerken van lage kwaliteit werken.
  • App-achtig: de app gebruikt het app-shell model en biedt zo de navigatie en interacties die men verwacht van een native app, zoals instant loading en regular updates.
  • Fresh: de app is altijd up-to-date door middel van het service worker update-proces.
  • Detecteerbaar: de app is krachtens het W3C-manifest door het besturingssysteem te identificeren als ‘applicatie’.
  • Re-engageable: de app maakt re-engagement makkelijk door features als pushmeldingen.

  • Aan de eerste vier niet-vetgedrukte criteria is eenvoudig te voldoen met allerlei libraries en veel andere algemeen bekende en beschikbare webtechnologie. Interessanter, maar ook complexer zijn de vetgedrukte criteria. Voldoen aan díe criteria vereist veelal nieuwe technologie die pas net op de markt is of nog moet verschijnen. Hoe zit dat?

    “Installeerbare” web apps

    Hier begint alles: iedereen kan een PWA op een telefoon of tablet installeren, buiten de app stores om. Veel mensen weten niet dat er installeerbare web-apps bestaan, hoewel sommige gebruikers al wel bekend zijn met 'bookmarking' van websites op een smartphone of tablet door ze toe te voegen aan het startscherm.

    Hierboven zijn de opties voor hyperlinks te zien die iOS een iPhone-gebruiker biedt. Dit is precies hoe webapps worden geïnstalleerd: door ze als shortcuts/bookmarks toe te voegen aan het startscherm. Een PWA bevat code die het apparaat laat weten installeerbaar te zijn en die de ˈinstallatieˈ tot stand brengt als de app wordt toegevoegd aan het startscherm. PWA’s zijn full screen en zichtbaar als separate instanties in de app switcher (dat is de iOS-term voor de lijst geopende apps). Op Android-apparaten vraagt een PWA de gebruiker automatisch de applicatie toe te voegen aan het startscherm: Google heeft in Chrome special support ontwikkeld voor web app install-banners (ook bekend als Add to Homescreen of A2HS). Helaas ontbreekt deze belangrijke functie nog steeds in Safari voor iOS. Dit lijkt echter snel te veranderen. In de meest recente versies van iOS kunnen PWA's op het startscherm worden opgeslagen en als standalone app worden gestart. Dit betekent dat ze kunnen worden gestart zonder de onhandige Safari-gebruikersinterface, ook al gebruiken ze die wel in de backend. Een voorbeeld van een PWA die momenteel werkt op zowel Android als iOS is Telegram.

    Service workers

    Service workers werken in feite als een brug die het mogelijk maakt dat features als de offline werkmodus, achtergrondsynchronisatie en pushmeldingen werken, terwijl daar normaal gesproken een native applicatie of plugin voor nodig is. In essentie is een service worker een script dat de browser buiten de webpagina op de achtergrond draait. Dat is nuttig voor features zonder interactie met de gebruiker.


    Service worker capabilities

    Technisch gesproken heeft een service worker de volgende kenmerken:

  • Het is een JavaScript-worker, dus hij biedt ontwikkelaars niet rechtstreeks toegang tot het Document Object Model (DOM). In plaats daarvan kan de service worker communiceren met de pagina's die hij bestuurt door berichten via de postMessage interface te beantwoorden. In het voorkomende geval kunnen die pagina's ingrijpen in de DOM.
  • Een service worker is een programmeerbare netwerkproxy, waarmee is in te regelen hoe netwerkverzoeken van webpagina's worden afgehandeld.
  • Een service worker wordt gestopt als hij niet in gebruik is. Als er bij restarts informatie moet worden behouden en hergebruikt, heeft de service worker toegang tot de IndexedDB API.

  • Service worker life cycle

    Omdat een service worker buiten de context van de webpagina draait, staat zijn life cycle geheel los van de webpagina. Een service worker moet worden geregistreerd voordat deze voor een specifieke website kan worden geïnstalleerd. Het komt erop neer dat de registratie de browser triggert om de service worker op de achtergrond te installeren. Na installatie wordt de service worker geactiveerd en vervolgens bestuurt hij alle pagina's binnen zijn scope. In een simpel diagram ziet de service worker life cycle bij zijn eerste installatie er als volgt uit:


    Service worker browser support

    Steeds meer browsers bieden steeds meer ondersteuning van service workers. Op dit moment worden service workers ondersteund in Chrome, Firefox en Opera. Ook Microsoft Edge en Safari hebben een begin gemaakt. De ‘service workers progress’ voor alle browsers is hier te volgen.

    Perspectief

    Progressive Web Applications behoren zonder meer tot de meest innovatieve en high-potential verschijnselen in web development. In volledig web-based omgevingen bieden ze geweldige features als pushmeldingen en offline support, waarvoor normaal gesproken een native app is vereist. Google is de trendsetter en heeft Chrome voor Android al voorzien van volledige ondersteuning. Apple, zoals gebruikelijk aanvankelijk wat terughoudend, is begonnen met het toevoegen van support in Safari. Wereldwijd zijn PWA’s omarmd door grote bedrijven. Zij plukken er veel vruchten van.

    Overzicht Progressive Web Applications in gebruik

    Case study Progressive Web Application

    Wilt u weten wat PWA ú kan opleveren?

    Neem contact met me op