PWA Ecommerce-ontwikkeling: de do's en don'ts van investeren

Heb je moeite om je klanten op mobiel te laten converteren? Of wil je misschien dat je klanten je website als een app kunnen gebruiken? Ecommerce PWA is misschien de benodigde oplossing die je helpt de kloof tussen web en mobiel te overbruggen, de verkoop te stimuleren en de CX drastisch te verbeteren. 

Moderne PWA's stellen e-commercebedrijven in staat om eigentijdse ontwikkelingsmethodologieën te gebruiken door de beste eigenschappen van conventioneel webdesign te combineren met de eigenschappen van platformspecifieke applicaties.

Inhoud:
E-commerce PWA: waarom is het de moeite waard om te lanceren?
Hoe bouw je een goede e-commerce PWA?
PWA voor e-commerce: mogelijke gevaren en valkuilen
PWA-mogelijkheden
Op e-commerceplatforms gebaseerde PWA-oplossingen
Succesverhalen van e-commerce PWA
E-commerce PWA-ontwikkelingskosten

E-commerce PWA: waarom is het de moeite waard om te lanceren? 

Naarmate meer computertaken via webbrowsers worden uitgevoerd, wordt de grens tussen online apps en desktopprogramma's minder duidelijk. En PWA's proberen deze grens nog verder te vervagen.

PWA's zijn in principe een specifiek type web-app die zo gebouwd kan worden dat ze als zelfstandige desktopprogramma's functioneren. 

Het lanceren van een PWA betekent niet dat alle mooie dingen zoals schaalbaarheid en doorzoekbaarheid standaard automatisch beschikbaar zijn, dus u wilt er zeker van zijn dat uw ontwikkelteam dit goed doet. Als u klaar bent om een ​​PWA te lanceren, moet u voldoen aan de criteria die hieronder worden beschreven.    

Waarom moeten ontwikkelaars zo hard werken aan de implementatie van PWA?

Hoe bouw je een goede e-commerce PWA?

Snelheid

Superieure online prestaties, gekenmerkt door zowel snelheid als kwaliteit, boeien en behouden de betrokkenheid van gebruikers in grotere mate dan middelmatige prestaties (denk daar maar eens over na). Het prioriteren van gebruikersgerichte statistieken zou van het grootste belang moeten zijn vanwege de cruciale rol die snelheid speelt bij het bevorderen van de betrokkenheid van gebruikers. Waarom zou je je er druk om maken? De trage laadtijden van pagina's veroorzaken natuurlijk een stijging van 123% in bouncepercentages.   

Werkt in elke browser

PWA moet in alle webbrowsers werken. Zo wordt toegankelijkheid gewaarborgd en UX verfijnd. Op deze manier begint het ontwikkelingsproces doorgaans met HTML voor basisfunctionaliteit, gevolgd door CSS en JavaScript voor UX. HTML-formulieren kunnen gegevens verzenden met behulp van POST-aanvragen, met JavaScript voor validatie en AJAX-indiening. 

Elk schermformaat

Dankzij hun vermogen om zich aan te passen aan verschillende viewport-groottes, stellen PWA's uw klanten in staat om content naadloos te consumeren op verschillende apparaten, ongeacht het specifieke apparaat dat wordt gebruikt. Het belang hiervan ligt in het feit dat uw klanten dezelfde applicatie kunnen gebruiken op apparaten met verschillende afmetingen. De content moet consistent blijven, ongeacht de afmetingen van de viewport, hoewel de indeling ervan mogelijk moet worden aangepast.

Kan worden geïnstalleerd 

Wanneer een PWA op een apparaat wordt geïnstalleerd, vertoont het vergelijkbaar gedrag als andere geïnstalleerde applicaties, omdat het in een apart venster wordt geopend en in de taakbeheerder van het apparaat verschijnt. Het is waargenomen dat het downloaden van de applicatie van een bedrijf als zodanig de kans op terugkeer vergroot, vergeleken met gewoon browsen. Dit omvat een toename in conversiepercentages, gemiddelde sessieduur en herhaalbezoeken. 

Offline beschikbaar

PWA's moeten zo ontworpen zijn dat ze zonder internetverbinding werken. Uw klanten moeten toegang hebben tot verschillende content, zoals reisschema's, instapkaarten, mediabestanden, berichten op sociale media en nieuwsartikelen. Hoewel offline authenticatie cruciaal is voor de beveiliging, zijn toegankelijkheid en aanpasbaarheid van content essentieel voor bruikbaarheid in offline omgevingen. IndexedDB, een NoSQL-database, kan gegevens opslaan en synchroniseren op een browsergebaseerde manier, en ondersteunt asynchrone bewerkingen. Servicemedewerkers kunnen media-elementen opslaan in een cache, waardoor ophalen zelfs mogelijk is als het internet is uitgeschakeld. 

doorzoekbaar 

Met de meerderheid van de bezoekers van een website, meer dan 50%, afkomstig van organische zoekopdrachten, kan de vindbaarheid van uw PWA drastisch worden verbeterd. Het vaststellen van canonieke URL's voor content en het indexeren van websites door zoekmachines zijn cruciaal om hun vindbaarheid te verbeteren. 

Elke invoer

PWA moet verschillende invoermethoden ondersteunen, zoals een muis of stylus, en moet zorgen voor wrijvingsloze overgangen voor gebruikers, ongeacht de schermgrootte. Zo moet bijvoorbeeld touchfunctionaliteit worden ondersteund op grote viewports, terwijl kleinere viewports prioriteit moeten geven aan toetsenborden en muisinvoer. De progressieve webapplicatie moet verschillende invoermethoden ondersteunen en gebruikersinteracties verbeteren met invoerspecifieke functionaliteiten zoals pull-to-refresh. 

PWA voor e-commerce: mogelijke gevaren en valkuilen

Wat zijn de zorgen bij het besluit om een ​​e-commerce PWA te lanceren? Wat zijn de valkuilen en hoe kun je deze vermijden?

Perceptie en vertrouwen

De perceptie en het vertrouwen die geassocieerd worden met PWA's worden nog steeds aangetast door de heersende opvatting dat het inferieure applicaties zijn of in de eerste plaats niet eens als applicaties worden herkend. Gebruikers zijn gewend geraakt aan de praktijk van het zoeken naar applicaties op digitale platforms zoals Google Play of de App Store, en ze zijn mogelijk niet bekend met het idee om applicaties rechtstreeks van websites te installeren. Vertrouwen is een belangrijke overweging, aangezien consumenten gewend zijn geraakt aan het vertrouwen op app stores om de veiligheid van gedownloade applicaties te verifiëren.

Installatie

Het proces van het installeren van een PWA op iOS vereist dat gebruikers het Share-paneel openen en vervolgens de optie "Toevoegen aan startscherm" kiezen. De procedure is complexer dan de installatie van een native iOS-applicatie. De gebruikerservaring kan worden verbeterd als Safari ondersteuning zou bieden voor de voorInstallPrompt gebeurtenis of wijzig de taal van de prompt naar "Installeer de app".

Manifeste wijziging

De essentiële elementen van een PWA-manifest, waaronder het pictogram, de naam en de splash-schermen, zijn niet direct aanpasbaar nadat de PWA is geïnstalleerd. Hoewel er recente ontwikkelingen zijn geweest in de desktopversie van Chrome die het mogelijk maken om applicatienamen aan te passen, zal het verbeteren van de flexibiliteit bij het aanpassen van manifestattributen de concurrentiekracht van PWA's vergroten.

Omvang management

Scopebeheer in PWA's kan soms uitdagingen opleveren vanwege de contra-intuïtieve aard ervan. Het probleem van afsluitende slashes kan leiden tot inconsistenties in de definitie van scopes, waardoor de mogelijkheid van fouten ontstaat. Bovendien is het standaardgedrag in de context van iOS, wanneer u probeert toegang te krijgen tot een hyperlink binnen de grenzen van een PWA vanuit een externe applicatie, om de Safari-browser te starten in plaats van de aangewezen PWA.

Toegang tot apparaat

De kwestie betreft de vraag of PWA's toegang moeten krijgen tot native services, zoals contacten, agenda, SMS/MMS en alarmen, ondanks hun inherente beveiligingsvoordelen die voortvloeien uit hun beperkte bereik. Het inschakelen van PWA's met toegang tot deze functionaliteiten kan potentieel beveiligingsmaatregelen ondermijnen en het onderscheid tussen PWA's en native applicaties vervagen.

Pushmeldingen op iOS 

Pushmeldingen op iOS waren tot voor kort niet toegankelijk voor PWA's. Als gevolg hiervan konden ontwikkelaars niet vertrouwen op pushmeldingen als middel om cruciale informatie over te brengen aan iOS-gebruikers. Apple heeft onlangs aangekondigd dat het vanaf 2023 ondersteuning wil bieden voor pushmeldingen op iOS-apparaten. Veel consumenten hebben echter hun ongenoegen geuit over pushmeldingen als gevolg van de exploitatie ervan door websites. Daarom hebben webbrowsers automatische blokkeringsmechanismen voor deze prompts opgenomen.

PWA-mogelijkheden

PWA's bieden een mobiele native-achtige gebruikerservaring, ondanks dat ze veel lichter zijn - bijvoorbeeld de grootte van de BookMyShow PWA is 54x kleiner dan de Android-app en 180x kleiner dan de iOS-app - dan native apps. Deze apps maken gebruik van responsief webdesign en progressieve verbetering om hun visuele stijl en functionaliteit aan te passen aan de mogelijkheden van het apparaat en de webbrowser van de gebruiker. 

Net als native apps kunnen PWA's worden geïnstalleerd via de webbrowser en worden weergegeven op het mobiele startscherm. Pushmeldingen, automatische contentvernieuwing en app-achtige navigatie en interactie zijn allemaal beschikbaar met PWA's.

Voor e-commerce betekent dit dat PWA's de creatie van naadloze digitale winkelervaringen op verschillende apparaten en browsers mogelijk maken. Ze bieden daarbij het gemak en de prestaties van native mobiele apps, maar dan zonder de beperkingen van afzonderlijke ontwikkeling en distributie. 

Met PWA's kunnen e-commercebedrijven aantrekkelijkere webwinkels bouwen die voor klanten op elk apparaat aanvoelen als echte apps.

Waar een PWA op gebaseerd is

1. Service werknemers technologie is cruciaal voor de uitrol van PWA. Met pushmeldingen, caching en offline functionaliteit lijkt de gebruikersinterface op die van een mobiele app.
2. De webapp-manifest is een JSON-bestand dat de naam, pictogrammen en het kleurenschema van de app specificeert. Met deze functie kunnen gebruikers de PWA bookmarken.
3. Om privacy- en veiligheidsredenen is HTTPS verplicht.
4. De benodigde HTML, CSS en JavaScript zijn opgenomen in de shell van de app. Het framework en de gebruikersinterface van de app worden hier ingesteld.
5. Het spreekt voor zich dat responsieve websites een perfecte basis voor PWA's kunnen zijn, vanwege hun veelzijdigheid wat betreft het reageren op verschillende schermformaten.

PWA: hoe het verschilt van een native mobiele app

Google Play en App Store bieden toegang tot native apps die speciaal voor hun platformen zijn ontwikkeld. Deze applicaties hebben geen tussenliggende software nodig om toegang te krijgen tot de functies en API's van het apparaat.

Daarom werken native applicaties soepeler en is er meer interactie met het besturingssysteem.

PWA's worden geprezen om hun platformonafhankelijke karakter, hun werking op verschillende platforms en webbrowsers en hun automatische updates. 

E-commerce PWA: hoe het verschilt van een responsieve website

Hoewel het primaire doel van zowel PWA's als responsieve websites is om de gebruikerservaring te verbeteren, bootsen PWA's de functies van native mobiele apps na, zoals UI en pushmeldingen. En responsieve websites zijn erop gericht om een ​​naadloze kijkervaring te bieden op meerdere apparaten zonder dat er extra software nodig is.

PWA versus native apps versus responsieve websites 

E-commerce PWA vanaf nul ontwikkelen of converteren vanuit een verouderde versie?

Als u momenteel een e-commercewebsite of een native app heeft en overweegt om een ​​e-commerce PWA te lanceren, vraagt ​​u zich misschien af ​​of het beter is om helemaal opnieuw te beginnen of om uw bestaande assets te converteren.

Over het algemeen is het converteren van een responsieve website de gemakkelijkste aanpak. De code is al webgebaseerd en geoptimaliseerd voor verschillende schermformaten. Het converteren van een native app vereist het updaten van bestaande code om op het web te werken. Het ontwikkelen van een e-commerce PWA vanaf nul biedt de beste ervaring, maar vereist het meeste werk.

Converteren van een responsieve website

Voordelen: Hergebruik bestaande webinhoud/ontwerp, bekend met webstandaarden

Nadelen: Niet geoptimaliseerd voor PWA-functies, vereist mogelijk extra inspanning om te implementeren

Converteren vanuit de native app

Voordelen: hergebruik van app-logica, frontend

Nadelen: Heeft updates nodig om te voldoen aan de PWA-normen, extra werk om web te ondersteunen

PWA vanaf nul ontwikkelen

Voordelen: Vanaf het begin volledig aangepast aan PWA-normen

Nadelen: Meer tijd/kosten betrokken 

PWA: hoe het verschilt van andere hybride frameworks 

PWA biedt doorgaans een naadlozere gebruikerservaring vergeleken met andere hybride frameworks. PWA biedt bijvoorbeeld offline functionaliteit en kan worden geopend via een webbrowser, terwijl sommige hybride apps moeten worden gedownload en geïnstalleerd.

PWA versus Ionisch 

Ionic is een framework voor het bouwen van hybride mobiele apps. Terwijl PWA op elk apparaat met een compatibele browser kan draaien, biedt Ionic een meer native-achtige ervaring met toegang tot apparaatfuncties.

PWA versus Flutter

Flutter is in principe een framework voor het bouwen van native mobiele apps. Flutter gebruikt de programmeertaal Dart. En hoewel PWA geschikter is voor apps die gericht zijn op content, is Flutter beter voor complexe en visueel rijke applicaties.

PWA versus React Native

React Native is een open-source framework voor het bouwen van mobiele apps met React. React kan ook worden gebruikt om de front-end van een PWA te ontwikkelen, wat een responsieve en interactieve gebruikersinterface biedt.

Op e-commerceplatforms gebaseerde PWA-oplossingen

Magento PWA-studio

PWA's kunnen worden gebouwd met behulp van Magento PWA Studio, een suite van tools en bibliotheken die voor dit doel zijn gemaakt. Het platform maakt gebruik van geavanceerde tools zoals React, Redux en GraphQL om responsieve en krachtige online winkels te bouwen.

Salesforce Commerce Cloud PWA-kit

Als u een e-commerce PWA wilt bouwen op het Salesforce Commerce Cloud-platform, dan heeft de Commerce Cloud PWA Kit alles wat u nodig hebt om te beginnen. Om het doel te bereiken van het bieden van een responsieve en boeiende winkelervaring, maakt deze oplossing gebruik van JavaScript-frameworks zoals React en Vue.js.

Salesforce Commerce Cloud Storefront Referentiearchitectuur (SFRA)

De Storefront Reference Architecture (SFRA) van Commerce Cloud is een ander handig framework voor het maken van PWA's. Bij het bouwen van PWA's voor de Commerce Cloud kan het SFRA-framework een solide basis bieden. Verhoogde aanpasbaarheid en een schat aan personalisatieopties zijn slechts twee van de vele voordelen die het biedt.

SAP Commerce Spartacus

Op de SAP Commerce Cloud kunnen PWA's worden ontwikkeld met behulp van het robuuste SAP Commerce Spartacus-framework. De frontend van de applicatie is gebouwd op Angular en communiceert zonder merkbare haperingen met de backendservices van SAP Commerce Cloud.

Vue Storefront

Vue Storefront is een geavanceerd open-source framework dat is gemaakt voor het bouwen van schaalbare en betrouwbare online winkels. Het Vue.js framework wordt gebruikt om snel PWA's te maken die zich kunnen aanpassen aan de behoeften van hun gebruikers en een vloeiende en responsieve ervaring bieden. Pushmeldingen en de mogelijkheid om op het web te surfen terwijl u niet verbonden bent, zijn twee opvallende kenmerken.

Meer e-commerce PWA-tools om te overwegen

• ScandiPWA: open-source PWA-oplossing die speciaal is ontworpen voor het Magento 2-platform.
• Gatsby: statische sitegenerator waarmee u PWA's kunt maken met React.‍
• GoPWA: PWA-ontwikkelingsframework voor het bouwen van schaalbare en prestatiegerichte PWA's.

Succesverhalen van e-commerce PWA

Veel bedrijven, waaronder enkele van de grootste in de e-commercesector, hebben al ontdekt dat PWA behoorlijk effectief is. 

De twee belangrijkste statistieken, conversie (meerdere voorbeelden lieten een stijging van het conversiepercentage zien van 27% naar meer dan 80%) en betrokkenheid (voorbeelden waren onder meer 3x meer tijd op de site, meer paginaweergaven, meer bekeken producten), laten een opmerkelijke verbetering zien.

Maar de voordelen van PWA zijn nog niet voorbij:

• Verbeterde prestaties – Velen meldden veel snellere laadtijden, lager dataverbruik en minder bouncen.
• Meer verkeer/nieuwe klanten – Sommigen zagen 2x dagelijkse gebruikers, 50% nieuwe klanten van PWA.
• Hogere inkomsten – Cases met een hogere omzet per bezoek, inkomsten uit verkeer omhoog met 79%.
• Lagere kosten – Lagere kosten voor klantenwerving, veel kleinere app-formaten dan native.
• Offline toegang – Hiermee kunt u doorgaan met winkelen zonder internetverbinding.
• Pushmeldingen – Verhoog de herbetrokkenheid, klikfrequenties en herstelde winkelwagentjes.
• Toegang op alle platforms – Uniforme ervaring op elk apparaat via webtechnologieën.
• Native-achtige functies – Maakt gebruik van hardware-/OS-mogelijkheden die normaal gesproken alleen in native apps voorkomen.

E-commerce PWA-ontwikkelingskosten

Ecommerce PWA-ontwikkeling heeft vergelijkbare ontwikkelings- en onderhoudskosten als ecommerce website-ontwikkeling. Toch kunnen PWA's op een breder scala aan apparaten draaien dan native applicaties, en er zijn geen extra kosten voor toegang tot hardware of plaatsing in app-stores. 

Bron van Grinteq

Disclaimer: De hierboven vermelde informatie wordt door grinteq.com onafhankelijk van Chovm.com verstrekt. Chovm.com geeft geen verklaringen en garanties met betrekking tot de kwaliteit en betrouwbaarheid van de verkoper en producten.