PWA’s in de App Store: hoe en waarom wel / niet?

Moderne en snelle websites worden steeds vaker omgetoverd tot een PWA: Progressive Web Apps. Deze pseudo-apps worden via bijvoorbeeld de Chrome-browser geïnstalleerd op het home scherm van je gebruiker, en zij ervaren een betere performance ten opzichte van een reguliere mobiele site. Bovendien kunnen je bezoekers wanneer ze offline zijn gebruik maken van je site, en jij kunt ze pushnotificaties sturen over bijvoorbeeld een limited edition of hun bestelstatus. Daarom kiezen steeds meer organisaties voor een PWA.

Wil je de ervaring van je PWA nog meer richting een ‘normale’ native app trekken, dan kun je deze downloadbaar maken in app stores als Google Play of de iOS App Store.

Voordat we je laten zien hoe je jouw website toevoegt aan de app stores, ben je vast benieuwd waarom dit een slimme keuze is. Zet je jouw PWA in de app store, dan geniet je van een aantal mooie voordelen:

• Je krijgt toegang tot een nieuwe doelgroep
  Sommige gebruikers zoeken liever jouw app in de store omdat ze hier al mee bekend zijn. Anderen zijn huiverig op het installeren van externe apps via de webbrowser. Bovendien betekent een nieuw platform meer zichtbaarheid en dus een groter bereik;

• Je hoeft je app niet te updaten dankzij de gedeelde codebase
  Je PWA is eigenlijk jouw webpagina in vermomming, waardoor updates aan je site ook meteen doorgevoerd worden in de app. Zo hoef je dus nooit nieuwe releases van je app in te dienen bij de app stores en heb je geen dedicated app developers hiervoor nodig;

• Je krijgt gratis review functionaliteit
  Gebruikers kunnen reviews achterlaten in de app stores. Zo verzamel je waardevolle feedback op je platform zonder dat je zelf een review feature moet ontwikkelen en stimuleer je het gebruik van de app;

• Je kan betalingen regelen via de store
  Hoewel het wel wat werk kost om dit volledig functioneel te krijgen binnen je PWA, is het zeker mogelijk om betalingen af te handelen binnen de app store, zonder dat je zelf een payment module moet ontwikkelen. Hoewel deze betalingen enkel voor digitale services en producten gedaan mogen worden, kan dit wel een ideale optie zijn voor bijvoorbeeld subscription services.

• Je PWA voldoet aan moderne specs
  PWA’s moeten voldoen aan bepaalde performance eisen, hierover later meer. Apps die specifiek als app zijn ontwikkeld, ook wel native apps genoemd, hoeven hier niet aan te voldoen. Daarom zijn PWA’s vaak sneller, wat in sommige gevallen kan leiden tot wel 60 procent meer conversies (bron).

• Je PWA is toekomstbestendig
  Er komen steeds meer nieuwe platformen bij die PWA ondersteunen, waaronder sinds 2022 Meta Quest VR headsets. Op dit platform worden PWA’s al volop ingezet omdat deze meer features hebben, zoals makkelijk resizen van je venster. Sterker nog, de officiële Facebook en Instagram apps op de Quest zijn zelf ook Progressive Web Apps. Wie weet welke platforms in de toekomst nog meer PWA’s ondersteunen?

Het daadwerkelijk indienen van je PWA bij een van de App Stores is relatief eenvoudig. Maar je webpagina moet wel eerst aan de vereiste criteria voldoen, voordat je deze om kunt zetten tot een Progressive Web App.

Deze criteria zijn onder andere in te zien met Google’s Lighthouse, een open-source tool te vinden in de browserextensie voor Google Chrome of binnen de DevTools van deze browser. Lighthouse beoordeelt je pagina en geeft deze een procentuele score. Wil jij je webshop als PWA aanbieden, zorg dan dat de Lighthouse performance score in ieder geval groen is: tussen de 90 en 100 procent.

Daarnaast toont Lighthouse je ook welke acties je uit moet voeren om je site helemaal PWA-ready te maken, en welke je al gedaan hebt. Denk hierbij aan: rekening houden met iconen en het juist invullen van de manifest.json.

Heb je de Lighthouse checklist afgewerkt en haalt je site de vereiste performance score, dan is het tijd om je webpagina om te zetten tot een PWA. Hiervoor gebruik je de website PWABuilder.com. Deze site toont je, net als Lighthouse, op welke gebieden je je pagina nog kan verbeteren om er een PWA van te kunnen maken. Sterker nog, als je aan te weinig van de vereiste criteria voldoet, laat PWABuilder je niet eens verder gaan. Voldoet je site helemaal, dan is je PWA slechts een druk op de knop van je verwijderd. PWAStudio exporteert jouw pagina namelijk als een app ‘package’, die je vervolgens in kunt dienen bij de verschillende app stores.

Samengevat hoef je dus niets meer te doen dan je performance op en top krijgen, de checklist van Lighthouse afgaan en daarna een package exporteren met PWABuilder. Klinkt simpel! Toch zitten er een paar haken en ogen aan.

Dien je een PWA in bij de iOS App Store, weet dan wel dat je een klein risico loopt. Apple is namelijk altijd huiverig geweest op web apps en hebben zelfs een policy dat ze geen websites toestaan in hun store. Tegenwoordig zijn ze daar iets minder streng in dan voorheen, maar de kans bestaat dat PWA’s die identiek zijn aan mobiele websites door Apple worden geblokkeerd of verwijderd.

Mede hierom adviseren wij om je PWA zijn eigen waarde te geven ten opzichte van je webpagina. Zorg bijvoorbeeld voor een aantal extra features zoals pushnotificaties, die op de mobiele site niet mogelijk zijn. Dit verkleint de kans dat Apple je PWA van hun store verwijdert en spoort de gebruikers aan tot meer aankopen.

Ten slotte zijn er ook een aantal technische uitdagingen om rekening mee te houden wanneer je gebruikt maakt van PWA ter vervanging van een native app. Met een PWA ben je namelijk gelimiteerd tot Web API’s. Deze zijn tegenwoordig al erg uitgebreid en vooral bij Android kun je hiermee al veel van de native features van je device aanroepen. Ook hier werkt Apple echter wat tegen. Zij laten een stuk minder toe en maken het voor PWA’s moeilijk om tot hetzelfde niveau als native apps te komen wat betreft functionaliteiten.

Een omweg zou zijn om te werken met Capacitor, wat je wel in staat stelt de native API’s te gebruiken met een PWA. Zo kun je stiekem toch een app bouwen die gebouwd is in webtaal maar voelt als native.

Er zijn dus zeker goede redenen om jouw platform PWA-ready te maken en in te dienen bij een van de app stores. De lijst met features die met Web API aangeroepen kunnen worden, blijft elk jaar groeien.