Webapps

Webapp: het complete overzicht

Nick Broekarts

Online Marketeer

In de digitale wereld waarin wij leven zijn er vele mobiele apps en webapps ontwikkeld met bepaalde functionaliteiten en doelgroepen. Zo zijn er apps ontwikkeld voor ontspanning, gezondheid, educatie, en meer. Applicaties die te downloaden zijn vanuit de Play Store of Apple Store alvorens ze gebruikt kunnen worden op het toestel naar keuze noemen we native apps, aangezien ze gekoppeld zijn aan een store en geïnstalleerd moeten worden op een toestel.

Daarnaast is er een ander soort applicatie, de webapp. Webapps zijn applicaties die draaien op een webbrowser, waardoor ze niet noodzakelijkerwijs geïnstalleerd hoeven te worden. In dit artikel willen we de webapplicatie analyseren, terwijl we deze ook afzetten tegen native apps. Daarnaast zullen we het onderwerp vanuit een zakelijke invalshoek benaderen en bekijken we wat de mogelijke waarde van een webapp is voor een bedrijf. We gaan specifiek de volgende zaken bespreken:

Wat is een webapp en hoe werkt het?

Een webapplicatie of webapp is een programma dat een bepaalde functie vervult door te draaien op een webbrowser of webpagina. Ze zijn dus gemaakt met de basisblokken waar elke website uit bestaat: HTML, CSS en Javascript. Omdat ze draaien op een webbasis hoeven ze dus niet, zoals een native app, geïnstalleerd te worden vanuit een app store. De gegevens die je opslaat bij een webapplicatie worden digitaal bewaard, en daardoor heb je altijd toegang tot die gegevens. Een webapp is geoptimaliseerd voor mobiel gebruik en voelt aan als een “normale” native app.

In kindertaal is een webapplicatie eigenlijk een website die je via je webbrowser opent. Het fijne hiervan is dat elke toestel (Samsung, Apple etc.) deze website kan bezoeken en gebruik kan maken van de functionaliteiten. Je hoeft de webapp dus niet te updaten zoals dat gebruikelijk is bij native apps van de Google Play Store of Apple App Store. Een webapp is gemakkelijk te bereiken en gebruiken door het instellen van een bladwijzer. Door die bladwijzer kun je een koppeling maken, zodat je vanuit je toestel meteen naar de webapp kan.

Er bestaan al heel wat webapps die we in het dagelijks leven gebruiken, maar waarvan we misschien niet beseffen dat dit een webapp is. Bijvoorbeeld:

  • Sociale media - via je browser Facebooken, Twitteren, netwerken op LinkedIn of zelfs via Whatsapp Web berichten versturen
  • Internetbankieren – via een website log je in en heb je toegang tot je bankgegevens
  • E-mail – via een url kom je terecht in je mail met behulp van je browser, bijvoorbeeld Gmail

Wat is een progressive webapp?

Voordat we het verschil bespreken tussen een normale en een progressive webapplicatie (vaak afgekort tot PWA) is het handig om eerst het verschil aan te duiden tussen websites en webapps. Want wat is eigenlijk het verschil? Het grootste verschil zit in de functionaliteit. Webapps bieden de optie tot actie en interactie, en focussen daarom op dienstverlening, zoals bijvoorbeeld e-mail of Google Maps (ook als native app beschikbaar). Websites zijn daarentegen vaak meer informatief en statisch. Bij websites zijn features zoals geld overschrijven vanuit online bankieren, e-mails versturen of een routebeschrijving krijgen niet aanwezig.

Wat is dan een progressive webapp? Een progressive webapp is een website die functioneert en aanvoelt alsof het een geïnstalleerde mobiele app is op je toestel. De content van een PWA is tevens indexeerbaar en deelbaar. Ze zijn ook veilig, omdat ze geen standaard toegang hebben met betrekking tot de hardware van het systeem.

Google zet veel in op progressive webapps om te kunnen concurreren met de native app stores. Volgens Google zijn progressive webapps: betrouwbaar, snel en voelen ze aan als een “natuurlijke” app. Bron: Google

Video: Google over Progressive Web App (PWA) toepassingen:

Voordelen van een progressive webapp

Progressive webapps zijn betrouwbaar doordat je niet langer afhankelijk bent van een netwerkverbinding. Wanneer je de progressive webapp start vanuit je startscherm zorgen “service workers” ervoor dat je de applicatie kan laden, ongeacht of je apparaat met een netwerk verbonden is of niet. Een “service worker” zorgt ervoor dat je met behulp van pre-caching altijd toegang hebt tot de app, waardoor je niet langer afhankelijk bent van een netwerkverbinding. Door deze pre-caching voelt de PWA ook een stuk sneller en vloeiender aan dan een normale website, omdat veelgebruikte bestanden lokaal worden bewaard en niet steeds opnieuw geladen hoeven te worden.

Google geeft tevens vier redenen waarom het waardevol voor je bedrijf kan zijn om een progressive webapp te bouwen of te laten maken:

  1. Wanneer aan de progressive webapplicatie vereisten (afkomstig vanuit Google) is voldaan, krijgen gebruikers een melding om de app toe te voegen aan hun homescreen om zo makkelijk toegang te hebben tot de applicatie, net als met native apps.
  2. Hogere betrokkenheid: push-notificaties helpen bij de betrokkenheid van doelgroepen. Uit resultaten is gebleken dat gebruikers meer tijd spenderen op zulke websites.
  3. Hogere conversie: de sterke user experience zorgt ervoor dat er meer conversie plaatsvindt.
  4. Betere betrouwbaarheid: zoals besproken is de betrouwbaarheid hoger doordat progressive webapps minder afhankelijk zijn van een netwerkverbinding.

“Keurmerk van Google”

Voordat je van deze voordelen kunt genieten, moet je eerst de webapp zo programmeren dat deze voldoet aan de progressive webapp vereisten van Google zelf. Deze eisen gelden niet alleen voor Android, maar ook voor Apple’s iOS. Deze vereisten zijn als volgt:

  • De website moet een geldig SSL-certificaat hebben (https).
  • De pagina’s moeten responsive zijn op apparaten zoals tablets en mobiele toestellen.
  • De URL’s van de webapp laden terwijl er geen netwerkverbinding is.
  • Metadata moet aanwezig zijn, zodat de webapp toegevoegd kan worden aan de homescreen, door middel van een manifest.json bestand.
  • Een hoge laadsnelheid voor het eerste scherm.
  • De webapp moet functioneren op verschillende browsers: Chrome, Edge, Firefox, Safari.
  • Paginaovergangen moeten goed aanvoelen, ook bij een slechte netwerkverbinding.
  • Elke pagina moet een URL bevatten.
  • De content van de webapp moet geïndexeerd worden door Google.
  • Metadata schema.org is aangeleverd waar dat nodig is.
  • Canonical URLS plaatsen waar nodig.
  • Historische API wordt gebruikt.
  • Content verspringt niet wanneer de pagina geladen wordt.
  • Content moet makkelijk deelbaar staan vanuit verschillende beeldmodi.
  • De PWA moet bij het laden niet gebruik maken van een interstitial.
  • Maakt gebruikt van cache-first netwerk.
  • De webapp informeert de gebruikers wanneer ze offline zijn.
  • De webapp moet informatie verstrekken over het gebruik van notificaties.
  • De user-interface moet niet té agressief zijn om push notificaties te mogen versturen naar gebruikers.
  • Het scherm van het toestel moet dimmen wanneer er gevraagd wordt naar toestemming over bepaalde instellingen.
  • Push notificaties moeten kloppen op het gebied van tijd, precisie en relevantie.
  • Het moet mogelijk zijn om push notificaties aan en/of uit te zetten.
  • De gebruiker moet ingelogd kunnen zijn op verschillende toestellen met behulp van de credential management API.
  • De gebruiker kan makkelijk betalen door de user-interface bij een betaalverzoek.

Bron checklist: Google

webapp overzicht

Chrome Lighthouse Tool

Als je een webapplicatie hebt of aan het ontwikkelen bent, en je wilt testen of je (progressive) webapp voldoet aan de eisen, dan kun je gebruik maken van de Chrome Lighthouse Tool.

Aan de techniek achter progressive webapps wordt hard gewerkt. Stukje bij beetje wordt het voor PWAs gemakkelijker om native apps te vervangen, omdat Android en iOS steeds meer mogelijk maken binnen de browser. Zo zal het bijvoorbeeld binnenkort mogelijk worden om gebruik te maken van de NFC-functionaliteit, allemaal vanuit de PWA. Om te bekijken wat er allemaal mogelijk is kan je met je mobiele browser naar whatwebcando.today gaan om precies te zien welke functionaliteiten jouw telefoon ondersteunt.

Webapp versus native app: wat zijn de voor en nadelen?

Voordat we gaan bespreken wat de mogelijkheden van een webapplicatie zijn voor jouw bedrijf, zullen we eerst de webapp tegenover de native app zetten. We bekijken hierbij de voor- en nadelen van beide instrumenten.

De voordelen van een webapp:

  • Webapps werken op alle besturingssystemen en toestellen die beschikking hebben tot een webbrowser (zelfs op desktop!).
  • Webapplicaties hoeven niet geïnstalleerd te worden.
  • Gebruikt nagenoeg geen ruimte op het apparaat.
  • Is makkelijk te koppelen aan andere websites.
  • Een security update van een webapp wordt in tegenstelling tot een native app meteen in de software geladen, terwijl dit bij een native app meer tijd kost vanwege de goedkeuring die appstores moeten geven.
  • Webapps zijn sneller en goedkoper te programmeren dan native apps als er al een normale website of webshop aanwezig, omdat er niet opnieuw begonnen hoeft te worden.

De nadelen van een webapp:

  • Altijd internetverbinding nodig (zoals aangegeven geldt dit niet voor een PWA)
  • Er is geen distributiekanaal, wat inhoudt dat je niet naar de Apple of Play store kan gaan om te downloaden. Een webapp moet gevonden worden door een zoekopdracht.
  • Slaat online gegevens op.

De voordelen van een native app:

  • Geen internetverbinding nodig (wel voor online functionaliteiten zoals bijvoorbeeld sociale media).

De nadelen van een native app:

  • De applicatie moet per besturingssysteem ontwikkeld worden. Dus voor IOS, Android en eventueel Windows.
  • Voor de plaatsing van de app in de store moet er eerst goedkeuring zijn vanuit de store.
  • Een update van de software duurt langer omdat er eerst goedkeuring moet zijn.
  • De investering is doorgaans groter dan een webapp of PWA.

Wat heb ik aan een webapp?

Na de vorige alinea’s gelezen te hebben weet je wat een webapp is en wat een PWA inhoudt. Ook heb je gelezen over de voor- en nadelen ten opzichte van native apps.

De progressive webapp verhelpt ook een aantal gebreken die de oorspronkelijke webapplicatie zou hebben ten overstaande van de native apps. Wellicht is een progressive webapp dus iets wat een waardevolle toevoeging zou kunnen zijn voor jouw bedrijf en/of merk. Wat zijn enkele praktijkvoorbeelden?

Voorbeelden van doeleinden van webapplicaties zijn: projectmanagement, boekhouding, klantencontact, tekstverwerkers, presentatiehulpmiddelen, videobewerking, verkooppuntsoftware (POS), etc.

Als je je afvraagt of grote bedrijven al gebruik maken van progressive webapps, is het antwoord volmondig ja. Een recent artikel van nexxite.nl laat zien dat grote spelers als Twitter, The Washington Post, Forbes, Uber, Starbucks en Virgin America ook gebruik maken van (progressive) web apps.

Het wereldwijd meest bekende voorbeeld is misschien wel de progressive webapp van Alibaba.com. Door gebruik van een PWA steeg het aantal conversies met 76% in totaal! Bron: Nexxite

Een ander voorbeeld is Pinterest. Na de introductie van een PWA was er een kliktoename van 50% en het totale bedrag aan uitgaven steeg met 40% voor mensen die meer dan 5 minuten spendeerden op de website. De prestaties waren beter dan mobielweggebruik en zelfs beter dan het gebruik van native apps. Bron: Computerworld

Appmoeheid

Naast de besproken voordelen in de bovengenoemde opsommingen is er nog een voordeel voor gebruikers. Omdat webapps gewoon vanaf een browser “geïnstalleerd” kunnen worden, is er geen gedoe meer bij het navigeren binnen de app store om iets te downloaden. Het begrip app-moeheid houdt in dat de markt voor apps verzadigd is, en men niet snel meer nieuwe apps downloadt. Ook daarom is een webapp profitabel.

Bij het bezoeken van een website kan een bladwijzer in de homescreen geplaatst worden, waardoor een (progressive)webapp makkelijk en snel bezocht kan worden. Dit is tevens handig voor ondernemers en winkels die acties of kortingen willen aanbieden aan hun klanten. Deze “distributie” vindt nu vaak plaats middels native apps, maar klanten willen vaak niet nog een applicatie installeren op hun toestel. PWA’s daarentegen kunnen door middel van een bladwijzer bij het opstarten direct een aanbieding of korting laten zien, ook kunnen hiervoor push-notificaties gebruikt worden. Door gebruik te maken van een webapplicatie wordt er minder opslagruimte gebruikt en wordt het overzichtelijker voor de gebruiker.

Application serviceprovider

Er zijn nog een aantal praktische voorbeelden over het gebruik van webapps om waarde te creëren voor een gebruiker. Een strategie die steeds meer voorkomt is ASP. ASP staat voor application serviceprovider. Hierbij wordt webtoegang geboden voor software die eerst als lokale applicatie werd gebruikt. Door de webapplicatie hoeft er niks meer geinstalleerd te worden op de lokale harde schijf. De provider krijgt vaak in abonnementsvorm een betaling voor het verstrekken van de applicatie.

ASP’s krijgen momenteel veel aandacht in de software-industrie, en wellicht is het voor jouw bedrijf interessant om een webapp te laten ontwikkelen waarbij anderen tegen periodieke betalingen gebruik kunnen maken van jouw software. Daarnaast is er een verdienmodel waarbij het gebruik van de webapplicatie gratis is. Het draaien van advertenties levert in dit geval geld op.

Conclusie

We hebben besproken wat een webapp en een progressive webapp zijn, en hebben deze vergeleken met de voor en nadelen van een native app.

De progressive webapp of PWA is een vrij nieuw fenomeen dat veel problemen verhelpt van de webapplicatie en waarvan ontwikkeling interessant kan zijn voor bedrijven. Wellicht heeft jouw bedrijf of onderneming al een native app, maar ben je na het lezen van dit overzicht tot de conclusie gekomen dat een (progressive) webapp een mooie ontwikkeling is en een uitkomst biedt voor jouw bedrijf.

Een PWA dient aan een aantal eisen te voldoen, maar levert ook hogere prestaties op, zoals hogere klikratio en meer conversies. Een goede manier om strategische stappen te zetten is om te investariseren welke apps nu gebruikt of gedistributeerd worden en om vervolgens te kijken hoe webapps deze zouden kunnen vervangen en/of verbeteren.

Er zijn inmiddels al veel grote bedrijven die de omslag gemaakt hebben van een native app naar een webapp. Voor beide producten valt uiteraard iets positiefs te zeggen, maar de verwachting is dat progressive webapps een steeds dominantere rol zullen gaan spelen in de industrie.

Speel in op de steeds groter wordende aanwezigheid van mobiel gebruik, zet in op een mobile-first strategie en verbeter/ontwikkel een applicatie die de wensen van je klanten optimaal bedient.

Wil je een website laten maken? Lees in ons vorige artikel hoe je een webdeveloper moet kiezen!

Dit artikel is met passie geschreven door Bytecode, een jonge en moderne web agency. Wij laten jou graag zien hoe je de kracht van het internet kunt gebruiken om alles uit jezelf te halen. Dit doen we door bijvoorbeeld dit artikel te schrijven, maar ook door deze inzichten in onze werkzaamheden te verwerken.

Wil je meer over ons weten of kunnen we misschien iets voor je betekenen? Neem gerust contact met ons op of kom een keer langs op de koffie!

We staan voor je klaar

Heb je een vraag over dit artikel? Of misschien een suggestie voor een volgende post? Laat het ons weten!