Tegenwoordig zijn er apps voor alles, van studeren tot shoppen. Samen met het tijdperk van de smartphone, kwam ook het tijdperk van de native apps. Maar een native app ontwikkelen en onderhouden is vaak omslachtig en vaak duur. Bij bedrijven neemt de vraag naar makkelijk te gebruiken applicaties toe. Meer en meer consumenten kopen via hun smartphone. Kinsta voorspelt dat 95% van de aankopen in 2040 via het internet zullen verlopen. Een vooruitdenkende bedrijfsleider houdt hier best rekening mee. Een responsive website was al essentieel in dit digitaal tijdperk. Nu is er ook de mogelijkheid om je webshop nog gebruiksvriendelijker te maken met de progressive web app. Maar wat is een PWA nu juist?

Dit is een combinatie van het plezier van een native app met de technologie die we op het web gebruiken. Met de PWA is het mogelijk geworden om functionaliteiten van een native app te gebruiken in webapplicaties.

Het is geen geheim dat prestatie vitaal is voor het succes en het rendement van elke online onderneming. Hierdoor gebruiken veel bedrijven een nieuwe standaard, de PWA, om hun prestatie te verbeteren. Door PWA’s te verbeteren met native app kwaliteiten die snel en betrouwbaar zijn, kan een prestatie van hoog niveau geleverd worden. Deze front-end technologie wordt ondersteund door Google en werkt goed onafhankelijk van de conditie van het toestel of het netwerk. Ondanks dat PWA’s veel aandacht krijgen, is het concept van PWA’s nog relatief nieuw. PWA’s hebben veel voordelen. Ze zien er ingewikkelder uit dan een mobiele app of een website, maar niks is minder waar.

Wat is een progressive web app?

PWA staat voor Progressive Web App. Het is een app die gebouwd is met web technologie die we allemaal kennen, zoals HTML, CSS en JavaScript. De PWA heeft het gevoel en de functionaliteit van een native app. Dankzij enkele slimme toevoegingen kan je bijna elke website in een progressive web app veranderen. Dit betekent dat je een PWA redelijk snel kan ontwikkelen, in tegenstelling tot een native app. Ook kunnen verschillende elementen van native apps toegevoegd worden, zoals push notificaties, offline support en veel meer.

Veel online sites zijn eigenlijk een progressive web app. Een voorbeeld van een progressive apps is Twitter.com. Je kan deze site installeren op je home screen. Het ziet er net zo uit als een native app en dus helemaal anders dan het uiterlijk van een website. Er is ook geen verschil tussen iPhone en Android. Je kan gewoon inloggen en starten. Dit is een groot voordeel van PWA’s.

De PWA werd bedacht door Frances Berriman en Alex Russell omdat ze ontevreden waren over de verschillende producten dier op op de markt waren om gebruikers de native-ervaring te bezorgen.

Mogelijke elementen van de PWA

Progressief

Dankzij progressieve technieken wordt de functionaliteit na de kern in lagen ingeladen. Dit zorgt ervoor dat er met de laatste technologieën kan gewerkt worden zonder dat het apparaat deze moet ondersteunen. De PWA voor iedereen, het laadt snel en neemt niet veel plaats in.

Een voorbeeld hiervan is de payment API. Door in lagen te werken met de code die de PWA op dat moment kan gebruiken, zorg je ervoor dat de PWA voor meerdere devices kan werken.

Responsief

Met responsief bedoelen we dat de PWA werkt op elk apparaat met een ondersteunde browser. Dit betekent dat het goed schaalt op ieder apparaat dat toegang heeft tot de applicatie. De website moet dus even goed leesbaar zijn op een klein smartphone scherm als op een groot desktop scherm. Het hoeft ook niet persé per platform ontwikkeld worden. De PWA is zeer gebruiksvriendelijk.

Losstaand van hoe de PWA eruit ziet, kan deze ook andere functionaliteiten hebben van device naar device. Een voorbeeld hiervan is een presentatie app. Hierbij kan de computer weergave de editor zijn, de tv weergave de presentatie zelf en een smartwatch de controls.

Offline te gebruiken

Voor de gebruiksvriendelijkheid van de PWA is het van groot belang dat de applicatie ook werkt als er even geen internetverbinding ter beschikking is of als de verbinding slecht is. Dit kan met een offline pagina of een gecachte versie van de applicatie. Een browser error wil je zoveel mogelijk voorkomen.

App-achtige interacties

De PWA voelt aan als een native app voor iPhone of android en niet als een website. Het heeft vergelijkbare interacties en navigatie. Dit kan bestaan uit swipe-bewegingen om een side-bar in of uit te klappen, geanimeerde paginaovergangen, laad-icoontjes of skeleton-views.

Up-to-date

De applicatie moet altijd up-to-date gehouden worden. Het moet beschikken over de laatste informatie. Ondanks het cache-first pattern, moet deze informatie geüpdate worden zodra deze beschikbaar is.

Veilig

De PWA moet via een beveiligde HTTPS-verbinding werken, net zoals een website. De data die ontvangen en verstuurd wordt in de applicatie, moet worden versleuteld. Het moet ook voldoen aan het Transport Layer Security (TLS) protocol. Zo kan de data niet door derden gelezen worden. Als een PWA niet over een HTTPS-verbinding beschikt, zal een groot deel van de functionaliteiten weigeren om te werken.

Interactief

De PWA is interactief dankzij de “engagement”-functies van het apparaat. Hierdoor kunnen push notificaties verstuurd worden om zo gebruikers de PWA opnieuw te doen openen.

Vindbaar

De applicatie is eenvoudig te indexeren voor zoekmachines door gebruik te maken van een webmanifest. In het webmanifest staan de belangrijke kenmerken van de applicatie, zoals de naam, korte naam, omschrijving en iconen. Ook staan er nog een aantal variabelen in die nodig zijn om de applicatie op een apparaat te installeren.

Installeerbaar

De PWA is gemakkelijk installeerbaar door een snelkoppeling op het homescreen te plaatsen. Vaak wordt de snelkoppeling automatisch geïnstalleerd via een pop-up als de PWA aan de juiste eisen voldoet.

Deelbaar

De PWA is makkelijk te delen via een URL zonder verdere installatie. Het ook gemakkelijk te gebruiken op een desktop, wat het bereik vergroot.

Wat zijn de voordelen van een PWA?

Voordeel 1: Minder kosten

Een PWA is goedkoper om te ontwikkelen omdat er een universele applicatie ontwikkelt wordt voor ieder platform. Bij een PWA zijn er geen dubbele kosten doordat applicaties compatibel moeten gemaakt worden met andere besturingssystemen en apparaten. Het bouwen van een PWA vereist slechts één systeem, terwijl je voor een native app drie verschillende systemen nodig hebt. Je bespaart ook tijd omdat je niet door het hele proces moet gaan om in verschillende app stores terecht te komen. Met PWA’s hoef je geen grote delen geld af te geven aan Google en Apple.

PWA’s zijn gemakkelijk, snel en licht. Ze worden gebouwd met de vaakst voorkomende webtechnologieën. Hierdoor zijn PWA’s minder duur om te bouwen. Omdat je een site in een app verandert, zijn er ook minder code-bases om te onderhouden.

Voordeel 2: Marketing mogelijkheden

Een PWA heeft ook veel voordelen op het gebied van marketing. Aangezien PWA’s in basis normale websites zijn, kan je gebruik maken van SEO & SEA strategieën.

PWA’s zijn vindbaar en indexeerbaar via zoekmachines. Zoekmachines hebben een groter publiek dan app stores, ze hebben ook meer marketingmogelijkheden. Hierdoor is het voor PWA’s gemakkelijker om te concurreren met andere apps.

Je kan ook je PWA optimaliseren om hoger in de zoekresultaten te komen, net zoals bij een gewone website. De PWA biedt dus ook voordelen qua ranking. PWA’s hebben meestal ook meer gebruikers dan een mobiele site.

Bovendien kunnen klanten opnieuw geëngageerd worden met push notificaties. En voor webshops is de PWA ook zeer handig. De PWA is snel en stabiel, waardoor de conversie in je webshop verhoogt. PWA’s zijn eenvoudig en de installatie is frictieloos, hierdoor krijg je meer installaties en terugkerende gebruikers.

Voordeel 3: Makkelijk op te pakken voor web developers

PWA’s zijn makkelijker op te pakken voor web developers, omdat de bijscholing voor het ontwikkelen van PWA’s goed aansluit op de skills die ze al bezitten. Ze hoeven ook geen nieuwe talen te leren. Er is maar één programmeertaal nodig voor PWA’s, terwijl er voor een native app minimaal drie nodig zijn. Doordat PWA’s maar één systeem vereisen, betekent het dat developers alle aanpassingen maar in één systeem hoeven door te voeren. Dit maakt het gemakkelijker voor hun en ze besparen tijd.

Wat zijn de nadelen van een PWA?

Nadeel 1: Overwegen of een PWA de juiste keuze is

Het is belangrijk om de afweging te maken tussen de voordelen en de nadelen. Als je website geen realtime-data toont aan de gebruiker is het niet persé nodig om de website om te bouwen naar een PWA. Er zijn daarbij namelijk niet veel voordelen. Als je platform interactief is of regelmatig updates ontvangt, dan is je project wel geschikt voor PWA technologie. We denken hierbij aan sociale netwerken, nieuwssites, webapplicaties, enzovoort).

Onderzoek eerst de behoeften van je doelgroep. Niet elk bedrijf heeft een PWA nodig. Gebruiken je klanten zelf PWA’s? Of is het te complex? Het is belangrijk om je af te vragen wat je de technologie wilt laten doen, waar de gebruikers zich bevinden, hebben ze een goede verbinding, hoe en waar gebruiken ze jouw content en denk je dat een app hun kan helpen?

Nadeel 2: Problemen tussen platformen

De PWA is nog een relatief nieuwe technologie, waardoor de ondersteuning bij de verschillende besturingssystemen anders is. Google en Microsoft pushen PWA’s omdat dit enkele voordelen heeft voor hun businessmodel. Ze krijgen zo meer apps in hun app store.

Apple ondersteunt PWA’s dan niet omdat hun app store al zeer succesvol is en ze willen dat graag zo houden. Apple heeft nu ook al veel van de PWA functionaliteiten toegevoegd aan iOS. Maar sommige functionaliteiten concurreren nog steeds met het App Store verdienmodel. Dit gaat bijvoorbeeld over geen push notificaties. Het zal niet meer zolang duren tot er op iOS ook een volwaardige PWA-ervaring beschikbaar is.

Doordat de PWA is gemaakt door Google en Apple hun apparaten pas laat heeft aangepast om PWA’s te ondersteunen, duurt het toch langer dan verwacht voordat bedrijven ze ontwikkelen en inzetten.

PWA’s zelf ontwikkelen is ook nog altijd redelijk duur. Sommige bedrijven wachten op providers van e-commerce platformen om PWA’s aan te bieden.

Nadeel 3: Mogelijke negatieve impact op SEO

PWA’s kunnen ook nadelig zijn voor je vindbaarheid. Veel PWA’s gebruiken JavaScript om meer complexe functionaliteiten te bouwen en zoekmachines zoals Google gaan niet altijd even goed samen met JavaScript.

Het probleem met JavaScript is dat websites gebaseerd op JavaScript gebruik maken van client-side rendering (CSR). Terwijl gewone websites gebruik maken van server-side rendering (SSR). Dit wordt al snel redelijk ingewikkeld.

Voor design krijgt CSR de voorkeur, maar voor SEO is het niet zo simpel. De oplossing die Google hiervoor voorstelt is Dynamic Rendering. Hierdoor krijgen bots van zoekmachines de SSR-versie te zien, terwijl websitebezoekers de CSR-versie te zien krijgen. Een andere optie is om server-side rendering te gebruiken voor je JavaScript framework. Zo blokkeer je geen bots.

Dit kan dus je SEO wat ingewikkelder maken of zelfs negatief beïnvloeden als je niet weet wat je doet.

Verschil tussen de PWA en de native app

Progressive Web Apps zijn goedkoper

PWA’s zijn goedkoper om te ontwikkelen dan native apps. Wanneer je een native app ontwikkelt leer je een bepaalde programmeertaal en dan bouw je een versie van de app voor elk soort toestel, Android en iOS. Je kan hiervoor ook een professional inhuren, wat nog meer zal kosten.

Je hebt ook middelen nodig om je app te onderhouden en te updaten. Dit betekent dat je nog meer geld en tijd nodig hebt.

Bij PWA’s heb je maar één codebase voor alle verschillende platformen. Je kan ook vertrekken vanuit de website die je al hebt en dit bespaart tijd voor jou.

Voor PWA’s heb je meestal maar één developer nodig, terwijl je voor een native app meestal meer developers nodig hebt.

PWA’s kunnen geïndexeerd worden door zoekmachines 

Native apps kunnen niet geïndexeerd worden door zoekmachines. Ze kunnen alleen gevonden worden via app stores. PWA’s werken zoals websites, dit helpt ze om beter te ranken in zoekresultaten.

Installatie en download

Native apps moeten gedownload en geïnstalleerd worden vanuit de app store. Hierdoor moet de gebruiker zich inspannen van de start tot het einde. PWA’s hebben deze stappen niet. In enkele tikken maak je een bookmark in je browser en voeg je het toe aan je home screen.

Verschil in mogelijkheden

Het grootste verschil tussen native apps en PWA’s is het verschil in mogelijkheden. PWA’s hebben dezelfde voordelen als een mobiele app. Ze starten snel op, ze laden met weinig netwerkbeschikbaarheid en je kan pushmeldingen sturen en je locatie delen. Maar PWA’s verbeteren ook de ervaring van internetgebruikers.

Internetgebruikers hoeven hun mobiele opslagruimte niet te gebruiken om een Progressive Web App te downloaden. Traditionele websites laden ook niet snel genoeg waardoor mobiele gebruikers snel de website verlaten. Bij PWA’s is de prestatie beter, de website laadt sneller en de conversie is beter.

Voorbeelden van PWA’s

PWA’s nemen toe in populariteit. Veel grote sites zijn PWA’s. Denk maar aan de sites van Starbucks, Pinterest, Uber, Spotify, Gmail, Youtube en Office 365. Ze zijn installeerbaar op je homescreen en ze bieden een vergelijkbare ervaring met native apps.

Starbucks

Starbucks wil toegankelijk en gebruiksvriendelijk zijn. Zo kunnen klanten gemakkelijk online bestellen. Starbucks ontwikkelde een online bestelsysteem die een vergelijkbare ervaring biedt zoals hun native app. Op die manier kunnen klanten ook offline het menu bekijken, hun bestellingen personaliseren en artikelen toevoegen aan hun winkelmandje. Als klanten dan terug online gaan kunnen ze de locatie specifieke prijzen zien en hun bestelling plaatsen. Deze PWA is ideaal voor plaatsen met een slechte internetverbinding.

De PWA is ook 99,84% kleiner dan de bestaande iOS app, waardoor het een favoriet is onder hun gebruikers. Hierdoor zijn hun web gebruikers die dagelijks een bestelling plaatsen verdubbeld.

Pinterest

Met de focus op internationale groei bouwde Pinterest een nieuwe mobiele web ervaring met een PWA. Het sociale netwerk ondervond dat maar 1% van hun mobiele gebruikers de app installeren, inloggen of registreren.

Door te werken met een PWA ging de tijd die gebruikers op de website blijven met 40% de lucht in. Ook de user-generated advertentie inkomsten gingen met 44% omhoog en de core engagements gingen 60% omhoog.

Uber

Doordat Uber steeds blijft uitbreiden naar nieuwe markten, hebben ze een Progressive Web App gebouwd met een vergelijkbare booking ervaring als van de native mobile app. De Uber PWA is ontwikkeld om booking mogelijk te maken met low-speed, 2G netwerken. De PWA is gebouwd voor low-end apparaten die niet altijd werken met de native Uber app.

Door de native ervaring uit te brengen als een lichte web app, kunnen Uber klanten snel een rit aanvraag doorvoeren onafhankelijk van hun locatie, netwerk snelheid en toestel.

Spotify

Je favoriete muziek speler Spotify wordt nu ook ondersteund met een PWA. Door meningsverschillen over de app store commissie van Apple, zag Spotify de kans om een PWA versie te bouwen van hun app. De PWA versie van hun app is sneller door de unieke UI die de achtergrond verandert terwijl gebruikers door de app gaan. Doordat de PWA zelf voorstelt om de app toe te voegen aan het homescreen, wordt Spotify toegankelijker.

Wat heb je nodig om het te bouwen?

De slimme en efficiënte infrastructuur maakt de Progressive Web App snel en toegankelijk.
Je hebt niet zoveel nodig om een PWA op te zetten. Er zijn drie building blocks die je nodig hebt voor je je site kan omzetten in een Progressive Web App.

Andere technologieën achter PWA’s zijn AngularJS, ReactJs, Polymer en het omhulsel van de applicatie. Met het omhulsel van de applicatie bedoelen we wat de gebruiker ziet wanneer ze voor het eerst communiceren met de app.

Een beveiligde connectie (HTTPS)

PWA’s werken alleen met vertrouwde connecties. Ze hebben dus een beveiligde verbinding nodig. Dit is niet alleen voor security redenen, maar ook omdat gebruikers zo weten dat ze de website kunnen vertrouwen.

Een service worker

Een service worker is een stukje script die op de achtergrond draait. Het is in principe een soort API die belangrijke onderdelen van het internet in de cache zet en verbindt met de applicatie. Het helpt je om te bepalen hoe je netwerk requests moet behandelen voor jouw PWA. Dit zorgt voor de snellere laadtijd en de offline beschikbaarheid van de PWA.

De service worker is één van de belangrijkste technologieën achter PWA’s. Dit wordt ook gebruikt om taken op de achtergrond te laten draaien, push notificaties te zenden en iconen te badgen.

De manifest file

De manifest file is een JSON file waarin informatie staat over hoe de PWA er zou uitzien en hoe het zou werken. Hierin staan bijvoorbeeld de naam, de beschrijving, de iconen, de kleuren, enzovoort.

BlueBlazer solution

Bij BlueBlazer maken we web apps en mobiele apps, dus natuurlijk ontwikkelen we ook Progressive Web Apps.

We kunnen een PWA bouwen voor elke soort doelstelling. Hierbij kunnen we zeer persoonlijk te werk gaan door de PWA op maat te bouwen.

Door een Progressive Web App te laten ontwikkelen bij BlueBlazer geniet je van alle voordelen uit dit artikel.

Wij houden wel van een strak plan. Zo aarzelen we niet om gezellig mee te brainstormen. Op die manier kunnen we je plannen nog concreter maken. Zodra we weten wat jij precies in gedachten hebt, gaan we aan de slag. We bekijken aan welke eisen je PWA zou moeten voldoen. We plakken meteen ook een prijs op het project. Zo heb jij een concreet idee over wat de realisatie van jouw project zal kosten. Uiteraard kan je in deze fase altijd nog bijsturen of zaken aanpassen. Zodra we jouw goedkeuring krijgen, schrijven we de PWA gedetailleerd uit. Tijdens deze fase krijg je meteen ook een visuele voorstelling.

Is alles naar wens? Dan stropen we onze blazer mouwen op om jouw PWA te ontwikkelen. Tot slot testen we de app uit en mag jij ook de proef op de som nemen. Overtuigd? Maak nu een afspraak!

Lees meer over progressive web apps en waarom je ervoor zou kiezen in dit artikel: https://www.frankwatching.com/archive/2020/12/14/webapp-native-app-progressive-web-app/