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.