We leven in een steeds snellere, dynamische, steeds veranderende wereld. De incrementele innovaties die impact hebben op mensen volgen elkaar op, met een steeds duidelijkere focus op:

• prestaties, denk aan de steeds krachtigere apparaten die we dagelijks gebruiken of de taken die ons in staat stellen om sneller te doen;
• ervaring, om elke frictie in het gebruik van software/hardware weg te nemen;
• intelligentie, met algoritmen die nu in een voorspellend perspectief werken.

Het is in deze richting, die zich vooral richt op prestaties en gebruikerservaring voor de eindgebruiker, dat de Progressive Web App (PWA) ontwikkeling gaat, een oplossing die het beste van native apps en webtechnologie wil combineren.

Een Progressive Web App (PWA) is een app die moderne webmogelijkheden gebruikt om gebruikers een zeer vergelijkbare (zo niet betere) ervaring te bieden als een native app.

In tegenstelling tot traditionele apps, zijn progressive web apps een hybride tussen reguliere webpagina’s en mobiele applicaties. De term “progressief” verwijst naar het feit dat ze nieuwe functies introduceren en, vanuit het oogpunt van de gebruikerservaring, aanvankelijk worden waargenomen als normale websites, maar zich gaandeweg meer gedragen als mobiele apps, onder andere multiplatform.

• Voors en tegens van de Progressive Web App
• Het belang van Manifest en Service Workers
• Wat zijn de meest gebruikte technologieën voor PWA?
• Hoe te kiezen tussen een PWA of een native oplossing
• De verschillen in het installatieproces: PWA vs native app
• De belangrijkste voorbeelden van een Progressive Web App
• Wordt de toekomst “progressive”?

Voors en tegens van de Progressive Web App

De belangrijkste kenmerken zijn:

• Progressive – Ze werken voor elke gebruiker, ongeacht de gekozen browser, omdat ze in de basis zijn gebouwd met progressieve verbeteringsprincipes.
• Responsive – Ze passen zich aan de verschillende schermformaten aan: desktop, mobiel, tablet, of afmetingen die later beschikbaar kunnen komen.
• App-like – Ze gedragen zich bij de gebruiker alsof het native apps zijn, qua interactie en navigatie.
• Bijgewerkt – Informatie is altijd up-to-date dankzij het data update proces dat service workers bieden.
• Beveiligd – Blootgesteld via HTTPS-protocol om te voorkomen dat de verbinding informatie toont of de inhoud wijzigt.
• Doorzoekbaar – Ze worden geïdentificeerd als “applicaties” en worden geïndexeerd door zoekmachines.
• Reactiveerbaar – Maak het gemakkelijk om de applicatie te reactiveren dankzij mogelijkheden zoals webnotificaties.
• Installeerbaar – Ze stellen de gebruiker in staat om de apps die hij het meest nuttig acht “op te slaan” met het bijbehorende pictogram op het scherm van zijn mobiele terminal (home screen) zonder dat hij alle stappen en problemen hoeft te doorlopen die samenhangen met het gebruik van de app store.
• Linkable – Gemakkelijk te delen via URL zonder complexe installaties.
• Offline – Het gaat er opnieuw om de gebruiker voor alles te stellen, waarbij de gebruikelijke foutmelding in geval van zwakke of geen verbinding wordt vermeden. De PWA zijn gebaseerd op twee bijzonderheden: allereerst het ‘skelet’ van de app, die de paginastructuur herinnert, zelfs als de inhoud niet reageert en de elementen omvatten de header, de pagina-indeling, evenals een illustratie die signaleert dat de pagina wordt geladen.

Weaknesses refer to:

• iOS ondersteuning vanaf versie 11.3 vanaf;
• groter gebruik van de batterij van het apparaat;
• niet alle apparaten ondersteunen het volledige scala van PWA-functies (dezelfde toespraak voor iOS en Android besturingssystemen);
• het is niet mogelijk om een sterke re-engagement voor iOS-gebruikers (URL-schema, standaard web meldingen);
• -ondersteuning voor offline uitvoering is echter beperkt;
• tekort aan aanwezigheid op de winkels (er is geen mogelijkheid om verkeer uit dat kanaal te verwerven);
• er is geen “orgaan” van controle (zoals de winkels) en een goedkeuringsproces;
• beperkte toegang tot sommige hardware-componenten van de apparaten;
• weinig flexibiliteit met betrekking tot “speciale” inhoud voor gebruikers (bijvoorbeeld loyaliteitsprogramma’s, loyaliteit, enz.).

Het belang van Manifest en Service Workers

De nieuwe functies van moderne browsers waarmee PWA’s het beste kunnen worden aangeboden zijn “manifest” en “service workers”.

Manifest
Het is een eenvoudig JSON-bestand dat de basisparameters van PWA definieert, om te bepalen hoe de app er voor de gebruiker uit moet zien en het uiterlijk bij lancering te bepalen: pictogrammen, andere basiskenmerken zoals kleuren, lettertypen, schermoriëntatie en de mogelijkheid om op het startscherm te worden geïnstalleerd.

Service workers
Ze zijn de echte sleutel tot de geavanceerde ervaringen die een PWA kan bieden. Een service worker is een script dat de browser op de achtergrond uitvoert, gescheiden van een webpagina, om functies te gebruiken die geen webpagina of interactie van de gebruiker vereisen.

Tegenwoordigen SW’s al functies zoals push-notificaties en synchronisatie op de achtergrond. In de toekomst zullen ze functies als periodieke synchronisatie of geofencing ondersteunen. De belangrijkste functie is de mogelijkheid om netwerkverzoeken te onderscheppen en te beheren, inclusief programmatisch beheer van een cache met antwoorden. Het is een API die offline ervaringen ondersteunt door ontwikkelaars volledige controle over de ervaring te geven.

Met de toevoeging van ondersteuning voor service workers in de nieuwste versie van iOS, heeft Apple de deur geopend voor PWA’s om, in alle opzichten, de hele mobiele markt te bereiken.

Wat zijn de meest gebruikte technologieën voor PWA?

Er zijn verschillende technologieën voor het maken van een Progressive Web App, voornamelijk gebaseerd op JavaScript, met verschillende kenmerken.

Onder de belangrijkste hebben we:

• React
  Een krachtige JavaScript-bibliotheek voor het bouwen van dynamische en moderne gebruikersinterfaces
• Polymer
  Een combinatie van componenten, tools en modellen ontworpen om PWA te maken
• Angular
  Een JavaScript-framework voor het maken van dynamische webapplicaties dat HTML gebruikt als template-taal
• Ionic
  Een JavaScript-framework voor het maken van krachtige applicaties voor meerdere platformen met behulp van een basiscode
• Accelerated Mobile Pages (AMP)
  Een open source project om de prestaties van webpagina’s te verbeteren

Hoe te kiezen tussen een PWA of een native oplossing

Het moment van kiezen breekt aan, welke oplossing te kiezen?

Het verdient de voorkeur om voor de ontwikkeling van een PWA te kiezen wanneer:

• De app moet eenvoudig verspreid kunnen worden naar een nog bredere gebruikersgroep
• Het beschikbare budget is niet hoog
• Er is weinig tijd beschikbaar voor go-live
• Een goede indexering op zoekmachines is belangrijk
• Cross-platform compatibiliteit is vereist
• Er zijn meer updates nodig in een krappe tijd

Het verdient daarentegen de voorkeur om een native app te ontwikkelen wanneer:

• Het nodig is om te bewegen op de winkels
• Snelheid en responsiviteit zijn belangrijke punten voor het succes van de app
• De app vereist een belangrijk gebruik van de hardware-eigenschappen van het apparaat
• Het business model is gebaseerd op, bijvoorbeeld, de kosten per download en / of IAP (In App Purchase)
• De app moet worden geïntegreerd met andere apps van derden

De verschillen in het installatieproces: PWA vs native app

Het algemene proces van het installeren van native apps volgt deze flow:

• Toegang tot de referentie Store (App Store of Google Play)
• Zoeken naar de app
• Klikken op “Install”
• Acceptatie van de verschillende autorisaties
• Openen en starten van de app
• Gebruik van de app

In de vergelijking omvat de PWA-installatie:

• Bezoeken van de site
• Toevoeging aan het startscherm van het apparaat (optioneel)
• Openen van de app
• Gebruik van de app

De belangrijkste voorbeelden van een Progressive Web App

Er zijn al veel voorbeelden van PWA “onderscheiden” die gebruikers gebruiken op hun apparaten en onder de belangrijkste melden we:

Pinterest

Om meer te weten:
Addy Osmani op Medium > A Pinterest Progressive Web App Performance Case Study

Instagram

De huidige PWA lijkt sterk op de native app en heeft alle belangrijke interactiefuncties, van notificaties tot de mogelijkheid om Stories te bekijken.

Google Maps

Meer weten:
The Next Web >Google’s lichtgewicht Maps Go is gewoon een Progressive Web App

Tinder

Meer weten:
Addy Osmani op Medium > A Progressive Tinder Web App Performance Case Study

Twitter Lite

Om meer te weten te komen:
Twitter Blog >Hoe we Twitter Lite bouwden
Google Developers > Twitter Lite PWA Verhoogt Engagement Aanzienlijk en Vermindert Data Gebruik
Paul Armstrong op Medium > Twitter Lite en High Performance Reactive Web Apps at Scale

YouPorn

De keuze voor PWA’s is vooral ingegeven door het omzeilen van de beperkingen die Apple en Google stellen aan pornografische content in winkels, en om een betere gebruikerservaring te waarborgen.

Meer weten:
YouPorn Blog > YouPorn App Experience
VentureBeat > YouPorn goes progressive with new mobile web apps for Android and iOS

Enkele referenties om het thema van de Progressive Web App te verdiepen

Google Progressive Web App > https://developers.google.com/web/progressive-web-apps/

Google PWA Checklist > https://developers.google.com/web/progressive-web-apps/checklist

Appscope, map voor Progressive Web Apps (PWA’s) > https://appsco.pe/

Wordt de toekomst “progressive”?

Het antwoord is, zoals altijd, afhankelijk. De beslissing om een PWA te ontwikkelen vloeit voort uit analyses en overwegingen die van tijd tot tijd, van project tot project en van gebruiker tot gebruiker moeten worden gemaakt. Integendeel, we kunnen nog een complexiteit toevoegen: die van de positionering op de zoekmachine: hebben we alles goed geregeld of kannibaliseren we het verkeer op onze website?

De factoren die leiden tot de keuze zijn vele, zoals voorzien in deze studie, dus er is niet een gedefinieerd en standaard recept, maar degene die de context geeft past op de juiste manier bij de strategie en doelstellingen. Laten we er samen over praten.