Progressive Web App

Progressive Web App – dit kun je er stiekem allemaal (wél) mee

24 oktober 2018 Development

De Progressive Web App (PWA) is ‘the new kid on the block’ te noemen in de development wereld. Toch bestaat hij al even. En zijn we er - ongemerkt - al een tijd mee bezig. De PWA wordt nog vaak weggezet als ‘onvoldoende’. Terwijl hij tegenwoordig stiekem bijna alles kan wat een Native App ook kan. (Ja, ook hardware koppelingen.)

De Progressive Web App. Misschien heb je er kort geleden van gehoord. Misschien werk je er al jaren mee. Misschien klinkt het als een compleet nieuwe term in je oren. Hoe dan ook: het is goed om eerst even helder te hebben waar we het precies over hebben, als we het over de PWA hebben.

Daarna een blik op de verrassende functionaliteiten die de PWA – tegen alle vooroordelen in – stiekem al blijkt te hebben. En een voorzichtige blik op de levensvatbaarheid van de PWA. Is dit hét antwoord op het groeiende mobiele online verkeer?

Maar eerst:

Wat is een Progressive Web App?

“Is het een app? Is het een website? Nee dat is het niet, het is een Progressive Web App.”

De Progressive Web App is min of meer de volgende ontwikkeling tussen de traditionele website en de Native App (bekend als de traditionele “mobiele app”). Er zitten namelijk veel tinten grijs tussen die twee.

Zo is er de reguliere Web App, die al een tijd ergens tussen hen in zweeft, maar zich nog behoorlijk dichtbij de originele website begeeft. Later kwam de Hybride App daar nog tussen, maar die zat weer ver richting de Native App qua bouwwerk en features – met bijbehorende restricties.

Deze daaropvolgende ‘newest kid on the block’ heet niet voor niks “Progressive” Web App. Het lijkt de volgende nuance op het developers spectrum; een weer iets verder ontwikkelde oplossing tussen website en mobiele app in.

Een PWA is namelijk webbased, en aan de voorkant lijkt het een Native App. Er hoeft dus niks gedownload te worden vanuit een app store - makkelijker voor de gebruiker - en er hoeft niks gebouwd te worden voor een app store - makkelijker voor de developer - en toch lijkt het een app die zo uit de store komt, in je browser.

De PWA lijkt daarmee het antwoord op het almaar groeiende mobiele verkeer:

Percentage van alle websites wereldwijd getoond op mobiele telefoons
Percentage van alle websites wereldwijd getoond op mobiele telefoons

Een duidelijke ontwikkeling, die vraagt om een online oplossing die werkt voor alles: van desktop tot elk soort mobiele telefoon en tablet. Eentje met een breder bereik dan een Native App – terwijl die laatste vaak meer werk is om te bouwen, in zowel iOs als Android – en die mobiel beter werkt dan de gemiddelde (zelfs responsive) website.

Het grootste vooroordeel over deze oplossing is echter dat hij nog steeds ver onder doet voor de meest mobielvriendelijke variant: de Native App. En dat blijkt behoorlijk onjuist.

Het grootste vooroordeel over de PWA (is fout)

Hij zou niet te koppelen zijn met de hardware van (mobiele) gebruikers-apparaten. Hij zou daarmee niet veel meer voorstellen dan een goede responsive site, met de looks van een Native App, maar zonder de functionaliteiten van een Native App.

Fout.

We hebben wat onderzoek gedaan naar de hardware functionaliteiten van de PWA, en werden (positief) verrast. Wat blijkt namelijk? Er kan veel meer dan je denkt. Eigenlijk is praktisch alles al mogelijk.

Hardware PWA functionaliteiten op een rij

Welke hardware functionaliteiten er precies te koppelen zijn, per browser? Je vindt het via ‘What Web Can Do Today’. Open het in de browser die je wil testen, en je krijgt een complete lijst van hardware, en of ze te koppelen zijn met een PWA:

Vooral onverwacht vette features die de webbased PWA richting Native App functionaliteiten brengen zijn (in Chrome, in dit geval):

  • Native Behaviors - de PWA kan een telefoon of tablet bijvoorbeeld notifications en push messages laten sturen.
  • Offline Storage is en die data lokaal weer bereiken is mogelijk.
  • Bluetooth verbinding is geen probleem meer.
  • Via Device Position (kantelen) en zelfs 3D Device Motion kun je de PWA laten meebewegen met het gebruikers apparaat.

Er ontbreken nog een paar koppelingen, dat klopt. Zo kan de PWA via Chrome nog geen toegang krijgen tot Contacten of Berichten. Maar deze features zullen de meeste gebruikers niet missen, omdat ze vaak als privacygevoelig worden gezien. Nogal een relevant en actueel thema. Iets als de Proximity Sensor mist ook, en is natuurlijk ook tof, maar wordt in de praktijk niet veel gebruikt, en dus ook geen groot gemis.

Conclusie:

Praktisch alles wat je nodig hebt kan met een PWA, om hem aan hardware device functionaliteiten te koppelen. Wat hem het goede van een Native App oplevert, terwijl hij web based blijft.

Het lijkt er zelfs op dat PWA’s in de nabije toekomst zelfs beschikbaar gaan worden in alle app stores. De Windows app store is al zover. Een kleine speler, maar hij zet de toon. Android kondigde met z’n Play Store al aan PWA’s toe te gaan laten, en Apple lijkt daarin op termijn ook niet achter te kunnen blijven.

Twitter en AliBaba zijn om

Grote spelers zijn al om, en helemaal voor de PWA-vorm gegaan, als algehele vervanging voor website en (native) app. Twitter en AliBaba bijvoorbeeld, deden de upgrade van hun traditionele site. Twitter zag er een verhoging van 75% in verzonden Tweets mee. Alibaba verhoogde er z’n mobiele conversies zelfs met 76% mee.

 

Exitable bestaat 10 jaar!

Van een geeky zolderkamer en zware weekenden, naar een volwaardige studio en de nodige papa-dagen. Er is veel veranderd in 10 jaar Exitable. Check alle highlights op onze jubileumpagina!

Check de jubileumpagina