Magento Progressive Web App’s (PWA)

Een progressive web app (PWA) is een website die zich voor eindgebruikers gedraagt als mobiele app. PWA’s zijn sterk in opkomst. Organisaties kunnen met deze techniek relatief eenvoudig een app-ervaring creëren met behulp van hun website. Gebruikers hoeven de app niet meer te downloaden in de App- of Playstore, maar kunnen de applicatie als snelkoppeling opslaan op de homescreen van hun smartphone. Tom Langeslag, Software Architect & Webdeveloper, beantwoordt in dit blog al je vragen over progressive web apps.

De voordelen van PWA’s

PWA’s laten zich vanuit een browser opslaan op een apparaat. Belangrijk is dat een PWA, net als een reguliere app, beschikt over offline functionaliteiten. Dit mogen beperkte functionaliteiten zijn, zolang er maar iets beschikbaar is als je niet over een verbinding met het internet beschikt. Een PWA zal hiervoor informatie opslaan op je smartphone. Ideaal hieraan is dat een PWA vaak sneller is dan bestaande website- of shop.

Een ander voordeel van PWA’s is dat ze losstaan van de back-end. Veel back-end systemen (zoals Magento) kennen standaarden waar niet of moeilijk van kan worden afgeweken. Met een PWA kun je restricties van het back-end systeem omzeilen. Dit maakt het mogelijk de laatste front-end technieken toe te passen en het front-end systeem in zijn volledigheid af te stemmen op behoeftes van bezoekers.

Tom: “Bij traditionele systemen zitten zowel back-end als front-end in hetzelfde systeem. Gebruikers van de front-end en gebruikers van de back-end hebben andere wensen en behoeften. Doordat dit in één systeem moet worden afgevangen kunnen we niet altijd een oplossing aanbieden die voor beide gebruikersgroepen optimaal functioneert.”

Let op: IE11 ondersteund geen progressive web apps. Deze laatste versie van Internet Explorer wordt niet meer geüpdatet.

Headless software

Als de front-end losgetrokken wordt van de back-end, wordt het back-end systeem ook wel ‘headless software’ genoemd. Tom: “Dit houdt in dat een systeem kan draaien zonder dat een gebruiksinterface in dezelfde applicatie zit. In Magento 2 zit standaard een front-end ‘ingebakken’, maar met behulp van een API is het wel mogelijk er een losse PWA ‘voor’ te zetten. React en Vue zijn bekende front-end frameworks die voor het creëren van een PWA kunnen worden ingezet.”

Door te werken met een los back-end en los front-end systeem die afzonderlijk van elkaar kunnen draaien, kun je er niet alleen voor zorgen dat functionaliteiten voor de bezoeker offline nog werken, maar ook dat de front-end blijft werken terwijl de back-end (tijdelijk) offline is, bijvoorbeeld voor het live zetten van wijzigingen. Dit betekent dat de bezoeker de progessive web app altijd kan blijven gebruiken. Calls worden door de front-end opgespaard en doorgezet zodra de back-end weer beschikbaar is.

Voorbeelden van PWA’s:

Klik op onderstaande links en ervaar de voordelen van een PWA:

• Een notitieblok
• Een QR-code scanner
• Een PWA met alles over bier

Meer PWA’s ontdek je hier.

Aan de slag met PWA

Kun je gemakkelijk starten met een PWA? Het antwoord is: ja! Heb je nu een Magento 2 webshop (versie 2.3 of hoger) dan hoef je hier niets in aan te passen. Je bestaande webshop kan blijven werken met een losse front-end (PWA) waarmee je middels een API communiceert. De ingebouwde Magento front-end kun je simpelweg negeren. Vanzelfsprekend zal je wel een heel front-end systeem moeten bouwen. Desalniettemin is dit volgens onze technisch specialist Tom een investering voor de toekomst. “Naar mijn idee zal het steeds lastiger worden om één systeem optimaal in te richten voor zowel front-end als back-end.”