Progressive Web Apps

Met de opkomst van allerlei verschillende apparaten, is het voor aanbieders van applicaties best een uitdaging om te bepalen welke technologie het beste past bij hun applicatie. Sommige organisaties kiezen voor responsive webapplicaties, veelal gebruik makend van een single page framework, anderen kiezen voor native applicaties. Een webapplicatie biedt de mogelijkheid om met één code base te werken en is eenvoudig te onderhouden, maar draait in de sandbox van de browser en is dus gelimiteerd in de mogelijkheden tot wat een browser ondersteunt. Een native app heeft betere performance en kan alle mogelijkheden van het besturingssysteem benutten, maar is lastig te onderhouden en code hergebruiken is slechts gedeeltelijk mogelijk.

Voor organisaties die kiezen voor een webapplicatie, maar toch dichter tegen de beleving van een app willen kruipen, biedt de progressive web app mogelijkheden. Een progressive web app, draait in de browser, maar in de belevenis van de gebruiker wordt deze ‘geïnstalleerd’.

Wat kun je doen met een progressive web app
Een progressive web app biedt alle mogelijkheden van een moderne browser en dat is momenteel behoorlijk veel. Zo kun je gebruik maken van verschillende local storage mechanismes, diverse api’s voor bijvoorbeeld locatie bepaling en push notifications (op dit moment alleen in android en windows). Daarnaast worden de bestanden van een progressive web app lokaal in de browser opgeslagen waardoor de app offline kan draaien.

Wat is nodig voor een progressive web app

Het is belangrijk dat de webapplicatie als één applicatie kan draaien. In de meeste gevallen betekend dit dat het een single page application is die met een API backend communiceert. Daarnaast moet je de volgende zaken inregelen:

  • De webapplicatie moet draaien op een https-domein.
  • De applicatie moet een manifest.json bevatten
  • De applicatie heeft een serviceworker.js waarin het versiebeheer en de lokale opslag van bestanden en bijvoorbeeld push notifications geregeld zijn.

Het manifest is niet veel meer dan een metadatabestand dat de browser vertelt wat voor een applicatie geïnstalleerd wordt:

Om de service worker toe te voegen zijn voor de meeste frameworks packages beschikbaar die een service worker genereren:

Vervolgens stel je de configuratie in van de service worker:

In dit voorbeeld zie je dat de index.html en alle js en css bestanden lokaal opgeslagen worden.

Als laatste definieer je een build waarin de service worker gegenereerd wordt:

Wil je meer weten over service workers en progressive web apps? Google heeft een uitgebreide tutorial beschikbaar: https://developers.google.com/web/ilt/pwa/introduction-to-service-worker

Wanneer gebruik je een native app

  • Wanneer toegang nodig is tot hardware die alleen via native apps toegankelijk is (meer en meer hardware wordt overigens toegankelijk gemaakt voor webapplicaties)
  • Wanneer het voor de gebruikerservaring meerwaarde bied om de app in een store te publiceren (een progressive web app wordt geïnstalleerd via de browser en niet via de store)
  • Wanneer een applicatie een grafisch rijke interface heeft en performance en werking via web een probleem is.

Voor meer informatie en voorbeeldcode in angular kun je kijken op: https://scotch.io/tutorials/how-to-build-progressive-web-apps-with-angular

 

Deel deze pagina via:
berglerProgressive Web Apps