Als je je weg naar deze blogpost hebt gevonden, heb je waarschijnlijk ergens de term PWA gehoord. Goed voor jou – PWA’s zijn waar het jaar 2018 om herinnerd zal worden, dus je zit precies op het snijvlak. Hoe spannend! In deze blogpost leg ik uit wat de term eigenlijk betekent en waarom u zich erom zou moeten bekommeren.
(bron: Google Developer site)
Wat is een PWA?
PWA staat voor Progressive Web Application. Laten we het onderzoeken door het in twee delen op te splitsen. De laatste twee woorden (“Web Application”) spreken voor zich. PWA’s zijn webapplicaties. Hier betekent webapplicatie gewoon een app die draait als een website, zoals bijvoorbeeld Twitter. Het eerste deel van de term – Progressive – betekent dat de gebruikerservaring geleidelijk wordt verbeterd op basis van de mogelijkheden van de browser. In wezen betekent dit dat de webapplicatie goed werkt in oudere browsers, maar gebruik kan maken van nieuwere technologieën om de ervaring te verbeteren als de gebruiker een browser gebruikt die deze technologieën ondersteunt. Klinkt eenvoudig, toch? Dus waar komt de term vandaan?
Progressief betekent dat de gebruikerservaring geleidelijk wordt verbeterd op basis van de mogelijkheden van de browser
De term werd geïntroduceerd door Google Chrome-ingenieur Alex Russell in zijn blogpost in 2015. Sindsdien heeft Google het gebruik ervan actief gepromoot en veel bronnen over het onderwerp ter beschikking gesteld, zoals een site die ze in meer detail uitlegt.
Tijdens het geven van presentaties rond PWA’s stuit ik op dit punt altijd op dezelfde verwarring. “Dus… Is het een technologie? Is het een standaard? Is het iets dat eigendom is van/gepatenteerd is door Google?” Nee, geen van die. Het is gewoon een term om een specifieke manier te beschrijven om applicaties te ontwerpen en te bouwen. Laten we vervolgens proberen te begrijpen wat ze zijn door de kenmerken door te nemen.
Hier zijn de oorspronkelijke 9 kenmerken van PWA door Alex Russell met een uitleg over wat ze in deze context betekenen:
- Responsive: Pagina ziet er goed uit op verschillende schermgroottes (bijv. telefoon, tablet, desktop)
- Connectiviteitsonafhankelijk: Functioneren zonder internetverbinding
- App-achtige interacties: Look’n’feel van native applicatie
- Fresh: Altijd up-to-date
- Veilig: Maak gebruik van een beveiligde verbinding om meerdere soorten beveiligingsrisico’s te beperken
- Detecteerbaar: Browsers identificeren PWA’s automatisch
- Re-engageable: Kan gebruikers terugbrengen naar de app met behulp van bijvoorbeeld Push Notifications
- Installeerbaar: Kan worden opgeslagen op het startscherm net als native apps, maar zonder het extra gedoe van de App Store
- Linkable: Kan worden gedeeld rond als gewone URL’s
Voor de lezer van dit blogbericht zijn de belangrijkste functionaliteiten:
- Installeerbaar op het startscherm
- Toegang tot meerdere native API’s zoals camera, geolocatie, trillingen, betalingen enz.
- Support voor Push Notifications
- Offline gebruik
- Full screen en splash screen support
(bron: Alex Russell’s blog post)
Tot slot van al het bovenstaande, PWA’s kunnen het meeste van wat native apps kunnen en de kloof tussen wat native en web apps kunnen wordt steeds kleiner.
Waarom nu?
Nu denk je misschien dat dit allemaal zo goed klinkt dat er wel een addertje onder het gras moet zitten omdat PWAs niet de standaard manier zijn om applicaties te implementeren. Ja, je hebt gelijk. Er is een addertje onder het gras. Er is een gebrek aan ondersteuning voor de technologieën die PWAs mogelijk maken in sommige omgevingen. Android ondersteuning is er al een tijdje, vanaf Android 5, wat betekent dat meer dan 80% (bron: Google’s Android statistieken) van de Android toestellen wereldwijd de technologieën ondersteunen die nodig zijn om PWAs te implementeren. De adoptie is nog groter als je alleen kijkt naar Europa of Noord-Amerika. Dus de Android ondersteuning is al echt goed.
Helaas is de andere belangrijke speler die de markt deelt in mobiele telefoons niet al te happig geweest om de technologieën te implementeren (lees waarom). De iOS-ondersteuning ontbreekt, wat een bredere toepassing van PWA’s in de weg staat. Maar vanaf het binnenkort te verschijnen iOS 11.3, zal de ondersteuning ook beschikbaar zijn voor iOS. Gelukkig is de adoptie van nieuwe iOS-versies relatief snel, dus kan worden aangenomen dat een hoog niveau van ondersteuning later dit jaar beschikbaar zal zijn. Ter referentie, versies 10 en 11 vertegenwoordigen 93% van alle iOS versies die gebruikt worden volgens Apple.
Hoewel de focus bij het praten over PWAs vaak op de mobiele omgeving ligt, werken ze ook voor desktop. Eerder deze maand was er een belangrijke aankondiging van Microsoft waarin stond dat PWAs nu worden ondersteund door Edge en Windows 10. Chrome en Firefox ondersteunen al PWA’s en dat zal de volgende release van desktop Safari ook doen.
Voorbeeld: Twitter Lite
Het bekendste voorbeeld van PWA’s is de Twitter’s PWA versie genaamd Twitter Lite (probeer het met Android of desktop op mobile.twitter.com). Twitter heeft ook hun redenering achter het bouwen van de PWA versie gepubliceerd. Om enkele feiten uit de post te lichten: vergeleken met hun native app is de grootte van de PWA-versie slechts 1-3% en de gemiddelde laadtijd 30% korter.
Andere bekende voorbeelden van PWA’s zijn Forbes, Trivago, Washington Post, Telegram, Alibaba en recentelijk Google Maps Go. Er is ook een directory van PWA’s beschikbaar.
Conclusies
Het jaar 2018 wordt naar verwachting hét jaar voor PWA’s. De tooling is al op een geweldig niveau en er duiken steeds meer PWA’s op. Zodra de ondersteuning in iOS in hoge mate beschikbaar is, worden PWA’s een realistische optie voor native apps. Mocht je overwegen of PWAs de juiste keuze voor je zijn, kom dan snel terug want ik zal een gids schrijven over Should I do a PWA instead of a native app?
Gofore heeft al ervaring met PWAs en beschikt ook over ruime ervaring in het bouwen van responsive, great-looking, offline-first en efficiënte web apps. Of u nu hulp nodig heeft bij architecturale keuzes, ontwerp of implementatie van PWA’s, aarzel niet om contact met ons op te nemen.
VORDER LEES UIT HET GOFORE BLOG
Agile Transformatie in Actie – Deel 1
Agile Transformatie in Actie – Deel 2
Wat is het nut van het schalen van Agile