PWA voor Magento: de voordelen en vereisten voor hosting

Progressive web apps, beter bekend als PWA, zijn hot & happening in developmentland. Het is een nieuwe techniek, die potentieel veel nieuwe kansen biedt voor e-commerce, en veel developers praten erover. Echt goede Nederlandse showcases zijn er -voor zover ik weet- nog niet. Des te interessanter om er eens dieper in te duiken: wat is een PWA? En welke kansen en extra functionaliteit biedt deze technologie voor Magento webshops? En waar moet de hostingomgeving voor PWA’s eigenlijk aan voldoen?Veel tech experts zien veel potentieel in de techniek van PWA. Het zou het mobiele web een flinke boost geven, en het zou developers meer mogelijkheden bieden dan de traditionele mobiele apps. Wat is een PWA? Laten we daar eens mee beginnen.
“PWAs are mobile-centered apps that use state of the art web capabilities to deliver an app-like user experience.” is de definitie die Google het nieuwe fenomeen geeft. Een ‘native’ app, zoals de mobiele app die we kennen ook wordt genoemd, is enorm veelzijdig. Het verstuurt bijvoorbeeld push notificaties, kan offline werken en is vanaf je home-scherm met een icoontje te openen. Mobiele websites die je via je browser opent hebben veel van deze functionaliteiten niet.
Precies daar zit het voordeel van PWA. Het brengt de voordelen van een native app samen met de voordelen van een mobiele website. Een PWA wordt geopend vanuit de webbrowser, en kan vervolgens met een icon opgeslagen worden op het scherm van een smartphone. Hiermee biedt het dezelfde gebruikerservaring als een native app. Een PWA is offline benaderbaar, kan push notifications sturen, etc. Maar omdat een PWA niet daadwerkelijk gedownload wordt is de applicatie altijd up-to-date.

Hoe werkt een PWA?

Een PWA functioneert eigenlijk hetzelfde als een traditionele webapplicatie, maar dan uitgerust met moderne features en technologieën. Vandaar de toevoeging ‘Progressive‘. De techniek achter PWA is gebaseerd op open source standaarden en draaien op HTML, CSS en JavaScript (vandaar de term ‘Web‘). Wanneer je de PWA ‘installeert’, krijgt de applicatie een eigen plekje/shortcut binnen je taakbalk of verschijnt er een icon op het hoofdscherm van je smartphone. De PWA draait hiermee vanaf het apparaat van de gebruiker (vandaar de term ‘Application‘).

PWA en Magento shops

PWA brengt nieuwe technologie met zich mee die potentieel van grote waarde kan zijn voor een Magento webshop. Magento zelf onderkent het potentieel van PWA. In april dit jaar kondigden zij PWA Studio aan. Een set van tools waarmee Magento developers zo snel en gemakkelijk mogelijk een Magento PWA kunnen bouwen.
‘Zo snel en gemakkelijk mogelijk’, want het is niet een kleine opdracht om een traditionele Magento shop om te bouwen naar een PWA. Het is vergelijkbaar als een transitie van Magento 1 naar Magento 2, een flinke investering op het gebied van tijd en geld. Dat gezegd hebbende, biedt de PWA een paar fikse voordelen.

Voordelen van PWA

In het enthousiasme dat je online kunt lezen over PWA nemen een aantal voordelen de overhand:

• PWA’s zijn uitgerust met service workers. Hiermee kun je JavaScript op de achtergrond laten draaien. Deze innovatie is erg handig wanneer je functionaliteiten wil gebruiken als het vooraf inladen van content, het synchroniseren en ontvangen van data, en het sturen van push notificaties.
• PWA’s kun je direct downloaden vanuit de browser. Je hoeft er niet voor naar een Google Play of App Store en het downloaden gaat veel sneller dan een native app. Je zou de aanname kunnen maken dat gebruikers sneller een PWA zouden gebruiken dan een native app.
• PWA’s zijn, in verhouding tot native apps, makkelijker en goedkoper om te ontwikkelen. Bij een native app moet je namelijk verschillende versies maken voor Android en iOS. Een PWA werkt altijd, op elk device. Ook op een desktop dus.
• PWA’s hebben een betere performance. Zowel ten opzichte van een native app als een traditionele Magento shop. Het gaat om milliseconden, maar ook dat is belangrijk in e-commerce land.
• PWA’s zijn SEO-vriendelijk. Google zal PWA’s hoogstwaarschijnlijk in de toekomst hoger gaan ranken.

PWA hosting en Hypernode

Gelukkig heb je voor een PWA niet heel bijzondere hosting nodig. De hostingomgeving moet aan de volgende eisen voldoen:

• De PWA moet via HTTPS geserveerd worden.
• Er moeten kleine aanpassingen gedaan worden aan de serverconfiguratie. Dat is weinig werk, en dat kan een developer op een unmanaged VPS zelf. Wil je echter liever gebruik maken van een managed hostingomgeving, dan is het aan de hostingprovider of zij dat kunnen/willen aanpassen voor je. Hypernode is hier overigens een uitzondering. De hostingomgeving is managed, maar je kunt toch zelf de benodigde NGINX config aanpassen om je Magento PWA te laten draaien.
• Niet een hostingvereiste, maar wel belangrijk: de browser van de gebruiker moet service workers ondersteunen. Inmiddels doen de meestgebruikte browsers zoals Chrome en Safari dat.

Ga je aan de slag met een PWA op Hypernode? Laat het ons dan graag weten! Hypernode is heel gemakkelijk PWA-compatible te maken, maar we kunnen ons voorstellen dat we het nóg makkelijker voor je kunnen maken. We zouden extra tools of software voor je kunnen toevoegen aan de Hypernode setup, of we zouden bijvoorbeeld specifieke PWA processen kunnen automatiseren. Houd ons dus graag op de hoogte en laat ons weten waarmee we voor jou leven nog makkelijker kunnen maken.

[widget id=”magereport_widget-4″ /]