Progressive Web Apps (PWA): wat ze zijn en hoe ze SEO beïnvloeden

Wat zijn Progressive Web Apps of PWAs?

Progressive Web Apps zijn de technologische combinatie van native applications en de op HTML5 gebaseerde webapplicaties die we kennen. PWAs zijn er gekomen om de technologische kloof tussen apps en webpagina's te overbruggen.

Google is een van de belangrijkste voorvechters geweest om de ontwikkeling van dit type technologie te stimuleren. Om de features ervan beter te begrijpen, moeten we praten over applicaties die betrouwbaar, snel en boeiend moeten zijn.

Features die Progressive Web Apps moeten hebben

Om het PWA-concept voldoende duidelijk en uitgelegd te maken, laten we duiken in de essentiële features die deze technologieën moeten hebben.

Natuurlijk spreken we in algemene termen. Vanaf daar zal elk bedrijfs-/dienstmodel zijn doelstellingen aanpassen aan de behoeften van zijn eigen doelgroep.

Snelheid

Tijd is geld, niet alleen voor Google maar voor al die bedrijven waar traag laden van hun producten ervoor kan zorgen dat gebruikers een potentiële aankoop afbreken.

Google legt deze premisse al lang de nadruk. De geboorte van het AMP-project had dit doel, en nu sluiten PWAs zich aan bij de behoefte aan snelle toegang tot informatie vanuit applicaties.

Gebruikers hebben tegenwoordig geen geduld; ze wachten niet tot een site volledig is geladen. 53% van de gebruikers wacht niet langer dan 3 seconden om een website te laten laden, volgens Think with Google

Betrouwbaar

Wanneer we het hebben over betrouwbaarheid, verwijzen we naar de werkingsgaranties van de site. Dankzij wat bekend staat als Service Workers zouden netwerkverbindingsproblemen niet mogen voorkomen dat de PWA laadt.

Installeerbaar

PWAs kunnen worden geïnstalleerd zonder naar de Chrome Store, Apple Store of een van de bestaande app stores te hoeven gaan. Onthoud dat het geen native applicaties zijn, dus we hebben er toegang toe zonder via deze stores te gaan.

De installatie gedraagt zich gewoon als een snelkoppeling; het heeft geen ruimte nodig om de verschillende bestanden op te slaan.

Verschillende apparaten: Mobile en Desktop

De codebase is verenigd tussen beide apparaten, wat betekent dat responsive design-technieken zowel op mobile als desktop van toepassing zijn.

Voordelen en nadelen van PWAs

Sommige voordelen zijn hierboven al genoemd bij het uitleggen van de features van progressive applications. Maar er zijn nog veel meer redenen om het gebruik van deze technologie in ons bedrijf te overwegen.

• ›Resourcebesparingen
• ›Geen installatie vereist
• ›Zeer hoge laadsnelheid
• ›Push-notificaties direct naar smartphones
• ›Werkt op alle besturingssystemen
• ›Verbeterde beveiliging
• ›Minder ontwikkel- en onderhoudswerk dan een native app.
• ›Voordeliger dan een native app.

Nadelen

• ›Vereist internetverbinding.
• ›Niet alle browsers ondersteunen PWAs.
• ›Hoog batterijverbruik

Wat is een Service Worker?

Even teruggaand naar de technische kant, moeten we praten over bepaalde aspecten waar progressive applications niet zonder zouden kunnen functioneren. Service workers zijn scripts die op de achtergrond draaien en requests doen aan webapplicaties, cache of het netwerk zelf.

Een belangrijk ding dat we moeten weten is dat Service Workers alleen kunnen functioneren als je een SSL-certificaat hebt en ze via https aanbiedt.

Laten we het nu allemaal zien met een voorbeeld: BMW's website en zijn PWA.

PWA-voorbeeld: BMW

Ik heb geprobeerd een artikel te schrijven zonder diep in te gaan op technische aspecten, en nu gaan we een voorbeeld zien van een applicatie die zal helpen het PWA-concept beter te begrijpen.

Als we de website van BMW betreden, kunnen we zien dat ze een zeer aantrekkelijk ontwerp hebben, met prioriteit voor het visuele, maar afgezien van praten over ontwerp, laten we eens zien met wat voor type website we te maken hebben.

Schijnbaar is het een "normale" website, maar als je in de code duikt, krijgen we onze eerste verrassing. Inderdaad, het is een website volledig ontwikkeld in AMP, niet alleen de mobiele versie.

Maar laten we komen tot het onderwerp van vandaag.

Eenmaal binnen de website, laten we naar de "customize and control"-balk van Chrome gaan.

Zoals je kon zien, is er een venster geopend met de content van de BMW-website. Door beide contenten te vergelijken, zien we dat ze praktisch identiek zijn.

Afbeelding van de website in de browser (Chrome)

Afbeelding van de website in PWA desktop

De ontwikkelaars van BMW hebben een identieke visuele uitstraling weten te behouden. Wanneer we de "installatie" van de PWA in onze Chrome-applicatiemap of zelfs op de desktop accepteren (afhankelijk van het OS, ik gebruik momenteel MacOS), is een snelkoppeling naar de PWA gedownload.

Als we overweldigd zijn door het installeren van apps en willen deïnstalleren, hoeven we alleen maar naar onze PWA-versie-venster te gaan, op de rechterkant te klikken net zoals in Chrome, en uninstall te selecteren.

In de mobiele versie is het praktisch vergelijkbaar. Wanneer we de website betreden met PWA-versie, ontvangen we een notificatie om "een snelkoppeling te maken".

Bij het binnengaan van een website met PWA; zien we een optie om een snelkoppeling te maken.

Als we accepteren, zien we een PWA-icoon op onze mobiele desktop.

DevTools om meer te leren over PWAs

Op dit punt wil ik in voorbeelden duiken om concepten en features van dit type applicatie uit te leggen.

Hiervoor gaan we de developer tool gebruiken die Chrome biedt (DevTools). We openen de inspector met de rechtermuisknop en gaan naar Application.

Chrome Devtools

App Manifest (Web Application Manifest)

Het manifest is een klein JSON-bestand met basisstijlaspecten dat het aan de browser biedt om abrupte veranderingen te vermijden.

Voorbeeld van Manifest (JSON)

Service Workers

Zoals we eerder uitlegden, kunnen we nu zien waar het over gaat. We zien het JS-bestand en daarin de scripts die het gebruikt. De Service Worker wordt geïnstalleerd in de browser. We zullen er meerdere hebben van andere webapplicaties.

Een van de hoofdfuncties van dit type code is om ervoor te zorgen dat altijd dezelfde versie wordt geleverd (het bestuurt de cache), zelfs als we een ander tabblad openen.

Hoe PWA implementeren in WordPress?

Terwijl we, als we onze website met onze eigen code hebben ontwikkeld, behoorlijk wat handmatig werk zullen moeten doen, zal de situatie heel anders zijn als we onze website in WordPress hebben ontwikkeld. Als dit het geval is, hebben we verschillende plugins tot onze beschikking waarmee we PWA-technologie in een paar clicks kunnen inschakelen. De PWA-versie van SEO Alive is in feite het resultaat van deze plugin die we aanbevelen.

Populairste plugins om PWA te implementeren in WordPress.

PWAs in marketing

Voor degenen onder ons die in marketing werken, kunnen Progressive Web Apps ons helpen doelstellingen te bereiken die elke marketingafdeling in gedachten heeft om een merk te laten groeien.

Loyaliteit en verkoop

Een van de slechtst bewerkte doelstellingen door sommige merken. We kennen allemaal de lage betrokkenheid die mobiele telefoonmerken hebben bij het behandelen van hun klanten, om een voorbeeld te geven.

Push-notificaties in PWAs zijn een van de acties die het beste werken en bijdragen aan het genereren van verkoop.

Een studie uitgevoerd door Gartner over PWAs geeft ons een reeks zeer interessante statistieken over Lancome en Alibaba; Lancome rapporteert een toename van 17% in conversies, 51% in sessies vanaf mobiele apparaten en 52% op iOS. Alibaba (de groep waartoe Aliexpress behoort) heeft zijn conversiepercentage met 76% verbeterd.

Hoewel we het hebben gehad over 2 wereldwijde reuzen, is aangetoond dat het hebben van een app op je mobiel waar laden en uitvoertijd geen rem zijn, plus het respecteren van goed ontwerp, het conversiepercentage verhoogt.

Concluderend kunnen we zeggen dat PWAs zich steeds meer verspreiden, voornamelijk onder grote merken. In Spanje zullen we waarschijnlijk een tijdje nodig hebben om het enorme potentieel van deze technologie te beseffen, maar vroeg of laat zal het worden geïmplementeerd.

Elke technologie die mobiele navigatie vergemakkelijkt heeft groot belang; we brengen veel uren door met onze smartphones, en uiteindelijk is toegang tot zowel content als producten business.

Referenties

• ›Google-documentatie over PWAs