Wat is een Progressive Web App (PWA)?
Misschien heb je al eens van de term PWA gehoord. Maar wat is het eigenlijk? En moet ik er iets mee als ik een website, webshop of andere webomgeving heb? Het antwoord is: misschien wel! Lees snel verder om te ontdekken wat het is en wat je ermee kan doen!
Wat is een PWA?
De term PWA staat voor ‘Progressive Web App’. Dit is een techniek waarmee je een webomgeving (bijvoorbeeld een website of webshop) ‘omtovert’ in een soort app. Tenminste, het lijkt heel erg op een app.
Het werkt namelijk grotendeels hetzelfde als een normale app op je telefoon of tablet. Je krijgt een icoon op je beginscherm van je apparaat. Als je daarop drukt, ga je naar de website, webshop of andere webomgeving. Het lijkt erop dat je een app opent, maar in werkelijkheid is het gewoon een website of webshop.
Je download de ‘app’ dan ook niet via de App Store of Google Play Store, maar vanuit de desbetreffende website of webshop. Door middel van een pushnotificatie kan je ervoor kiezen om de site of shop op je beginscherm te plaatsen. Naast een website of webshop, kan je het ook gebruiken bij onder meer:
- Intranet
- Extranet
- ‘Mijn’-omgevingen
- Losstaande webtools
- Etcetera
De voordelen van een Progressive Web App
- Goedkoper. De techniek is een stuk eenvoudiger dan bij een normale app. Heb je al een site of shop? Dan kost het veel minder ontwikkelingstijd om een PWA te laten maken, dan wanneer je een echte app laat maken.
- Drempelverlagend. Wanneer jouw potentiële klant het icoontje op zijn beginscherm heeft, zal hij/zij sneller naar jouw site of shop gaan. Dit is immers een stuk gemakkelijker dan een URL intypen. Daarnaast: terugkerende bezoekers converteren normaliter een stuk beter dan nieuwe bezoekers. Win win dus!
- Snellere laadtijd. Omdat jouw device (bijv. smartphone) al een gedeelte opslaat van de website of webshop, zal deze sneller geladen worden. En een snellere laadtijd zorgt voor een betere gebruikerservaring en dus een verhoogde kans op conversie!
- Pushnotificaties. Stuur pushnotificaties naar jouw doelgroep. Denk bijvoorbeeld aan het delen van een nieuwsbericht, aanbieding of actie. Zorg voor interactie met jouw publiek!
- Offline beschikbaar. Zoals hierboven genoemd, slaat jouw device al een gedeelte op van de site/shop. Daarom is het ook mogelijk om offline de website/webshop te bezoeken.
Is het handig voor mij?
Heb je vanuit de webomgeving veel interactie met klanten, relaties, leads, interne medewerkers? En gaat dit veel via telefoon en/of tablet? En wil je dit laagdrempeliger maken? Grote kans dat een PWA geschikt is voor jouw organisatie. Of het nu om een intranet, extranet, ‘mijn’-omgeving of een losse tool is.
Voor webshops is het ook heel interessant! Je maakt het jouw (potentiële) klant namelijk heel gemakkelijk om terug te keren naar jouw shop. Dat verhoogt de kans op conversie natuurlijk. Daarnaast zijn pushnotificaties erg handig voor deze doelgroep.
Voorbeelden:
Wat heb ik nodig qua techniek?
Om van je website of webshop een PWA te maken, zijn er een aantal technische zaken nodig.
- HTTPS. De webomgeving moet beschikken over een HTTPS-verbinding. Dit betekent dat er een SSL-certificaat aanwezig moet zijn. Met een HTTPS-verbinding zorg je ervoor dat data versleuteld wordt verstuurd.
- Responsive. Je webomgeving moet volledig responsive zijn. Dit betekent: hij moet schaalbaar zijn op alle schermgroottes. Bij Nordique doen we dat uiteraard standaard, maar wellicht is jouw webomgeving nog niet responsive.
- Manifest. Met een manifest omschrijf je de eigenschappen van de web app. Dit is een musthave voor je PWA. In dit bestand (een JSON-bestand) benoem je bijvoorbeeld het beginscherm-icoon.
- Service workers. Met de service workers kan je bepaalde elementen opslaan op je device. Denk aan elementen als een menu of een logo. Dit gebeurt door middel van JavaScript. Service workers zijn erg belangrijk voor de PWA.
- Splash screen. Bepaal hoe het introscherm eruit komt te zien, wanneer je de PWA opstart. Vaak (en hopelijk) is dit maar kort in beeld, maar is wel goed voor de gebruikerservaring.
- Iconen. Creëer de iconen voor je beginscherm. Je maakt verschillende groottes, voor bijvoorbeeld Android en Apple (iOS).
Wat nog belangrijk is om te vermelden: Apple ondersteunt binnen iOS PWA’s niet volledig. Zo zijn pushnotificaties niet mogelijk. Een notificatie tonen met de vraag of iemand de site/shop wilt toevoegen aan zijn beginscherm kan helaas niet. Echter, hebben we daar een workaround voor gemaakt. Zo krijg je toch een melding te zien, met daarin een stappenplannetje. Je kunt hem alleen niet rechtstreeks aan je beginscherm toevoegen, zoals dat bij Android wel kan.
Nieuwsgierig geworden?
Ben je nieuwsgierig of een PWA iets voor jouw organisatie is? Of heb je hulp nodig bij het implementeren? Neem dan gerust vrijblijvend contact met ons op. We staan graag voor je klaar!
