https://www.usmedia.nl/

4 minuten

Geschreven door: joel

Wat zijn Progressive Web Apps?

Progressive Web Apps (pwa) zijn de nieuwe standaard voor moderne web applicaties gericht op gebruikersgemak.

  • web
  • technology
  • pwa

Progressive Web Applications voegen het beste van mobiele sites en native applicaties samen met behulp nieuwe (web) technologieën om gebruikers de best mogelijke ervaring te geven - betrouwbaar, snel en engaging.

Belangrijk punt bij Progressive Web Apps is dat ze in essentie overal werken, maar in moderne browsers zijn ze supercharged. Deze gelaagdheid of ‘meegroeicapaciteit’ is de ruggengraat van een Progressive Web App.

De Belangrijkste Principes

“A Progressive Web App uses modern web capabilities to deliver an app-like user experience.” – Progressive Web Apps

De kenmerken van een Progressive Web App zijn:

  • Progressive

    Werken voor iedereen onafhankelijk van de browser keuze, de web app past zich aan aan de omgeving waarin hij draait. Niet elk device en elke browser ondersteunen alle features, kortom: maak gebruik van wat beschikbaar is.

  • Responsive

    Werken op desktop, mobile, tablet of… Inmiddels natuurlijk al de standaard maar desondanks wel een belangrijke eigenschap van PWA’s.

  • Work Offline

    Werken dankzij Service Workers, straks wat meer hierover, ook offline en op netwerken van belabberde kwaliteit (ook wel lie-fi). Wanneer we mobiel werken hebben we vaak te maken met slechte verbindingen (bijvoorbeeld in lift of parkeer-garage).

  • App-like

    Voelen als een native app door toepassing van moderne web technieken. Inmiddels zijn moderne browsers voorzien van vele WebAPI’s die het mogelijk maken om onderliggende hardware direct aan te spreken.

  • Fresh

    Iedereen altijd de laatste versie. Bij een native App zit je met het beheer van verschillende versies, mensen moeten handmatig updates doen! Bij PWA’s is dit niet het geval, net als bij een website weet je dat iedereen naar de laatste en meest up-to-date versie kijkt.

  • Secure

    Alles gaat via HTTPS om ‘afluisteren’ te voorkomen en ervoor te zorgen dat er niet met de inhoud is geknoeid. Omdat een PWA gebruik maakt van integraties met het onderliggende OS is veiligheid extra belangrijk.

  • Discoverable

    Hoezo instaleren? Gewoon zoeken naar de applicatie en direct gebruiken! PWA’s zijn kenbaar als applicaties dankzij het w3c manifest waardoor zoekmachines makkelijk in staat zijn om ze te vinden.

  • Re-engageable

    Maakt Engagement makkelijker door middel van functies, zoals push-notificaties.

  • Installable

    Gebruikers kunnen web apps toevoegen aan hun home-scherm zonder het gedoe van een app store. Als de applicatie veel gebruikt wordt stelt de browser vanzelf voor om deze direct te instaleren.

  • Linkable

    Geen installaties, gewoon delen via een simpele link, of zoeken via Google. Kortom geen drempels, direct starten.

Als je dit lijstje zo leest is er er eigenlijk geen rede om geen PWA te maken, toch? Uiteindelijk blijft het ‘het web’ en is er natuurlijk en verschil tussen wat we graag willen, en ‘what web can do today’.

Add to Homescreen

Wanneer een gebruiker een PWA’s vaak gebruikt (wat vaak is wordt bepaald door de brouwser) dan wordt de mogelijkheid gegeven om de applicatie toe te voegen aan je homescreen.

Service Workers

[https://caniuse.com/#feat=serviceworkers](zie ondersteuning)

Een belangrijke technologie voor PWA’s zijn de zogenaamde Service Workers. Dankzij service workers is het mogelijk om op de achtergrond een klein proces te draaien waardoor het mogelijk wordt om allerlei leuke nieuwe dingen te doen zoals:

  • Ontvangen van Push Notificaties
  • Controleren of er wel wifi is, oftewel Offline Support
  • Synchronisatie van data aka Background Sync

Service Workers kunnen heel complex worden, gelukkig komt er ook steeds meer tooling om de technologie toegankelijker te maken voor de meest voorkomende use cases. Mozilla heeft een mooi overzicht met verschillende toepassingen van service workers op het Service Workers Cookbook

Push Notifications

Op native apps wordt veel gebruik gemaakt van notificaties om de gebruiker te attenderen op binnenkomende mail of andere ‘belangrijke’ zaken. Met PWA’s kunnen er ook Push Notificaties gestuurd worden dankzij de service workers technologie.

Offline Support

De service worker is een soort proxy. Wanneer een PWA gestrat wordt kan daardoor gekeken worden of er een stabiele verbinding. Waneer de gebruiker offline is of last heeft van zogenoemde lie-fi kan een andere pagina getoond worden.

Dit kan een mooi opgemaakte offline pagina zijn maar ook een bijna volledige werkende applicatie op basis van content uit caches / local storage.

Wanneer PWA’s

Het zal altijd een afweging zijn. Soms is een PWA de juiste oplossing en soms een native mobile app. Voordeel van PWA’s is dat er een codebase is voor mobile en het web. Daarnaast is het zo dat bij business applicaties het een groot voordeel is dat je volledige controle hebt over de versie die gebruikt wordt en snel kan reageren op issues (uitrollen bug fixes).

Als snelheid en bepaalde hardware-features van de smartphone - die nog niet ontsloten worden via een WebAPI - je grootste prioriteit zijn, kan je niet anders dan een native app maken. Hoe dan ook zullen we zien dat het verschil tussen een native app en en een PWA steeds kleiner wordt - hetzelfde hebben we tenslotte zien gebeuren met desktop apps en web apps.

De PWA Rocks website heeft een mooi overzicht met voorbeelden van nuttige en minder nuttige PWA’s.

koffie?

Neem even contact op en we maken snel een afspraak.