Wat zijn progressieve webapps en hoe werken ze?

Progressive Web Apps, of PWA's, zijn een nieuw modewoord in de wereld van webontwikkeling. Ze lijken erg op een gewone mobiele app, maar zijn ontworpen voor gebruik op een mobiel apparaat of desktop. In deze blog wordt uitgelegd wat een progressieve webapp is, hoe deze verschilt van een gewone webapp, en meer.

De afgelopen jaren heeft Google geprobeerd het mobiele internet te versnellen om een ​​betere gebruikerservaring te bieden. De eerste stap in deze reis was de lancering van versnelde mobiele pagina's.

Hoewel deze 'uitgeklede' mobiele webpagina's snel waren, stuitten uitgevers op een obstakel bij het opzetten van analyses, attributie en het genereren van inkomsten via display-advertenties.

Hoewel er voortdurend verbeteringen worden aangebracht aan AMP om het uitgevervriendelijker te maken, heeft Google een heel ander raamwerk voor webuitgevers gelanceerd, genaamd Progressieve webapps (PWA).

Het is aangetoond dat PWA's buitengewoon nuttig zijn onderzoek van Simicart-bevinding dat na het installeren van een PWA de gemiddelde tijd die op locatie wordt doorgebracht met 119% toeneemt. Niet alleen dat, maar de gemiddelde duur die wordt besteed aan het lezen van een pagina neemt toe met 68.8%.

In dit bericht leggen we de betekenis van PWA uit, hoe deze apps werken, hun voordelen, hoe ze verschillen van AMP en native apps, en opties voor het genereren van inkomsten.

Wat is een progressieve webapp?

Progressive Web Apps zijn gewone webpagina's of websites die kijken, voelen en gedragen als native mobiel applicaties op vele manieren. "Met een PWA kun je de applicatie vanuit het browservenster zelf installeren, is deze beschikbaar op je telefoon als een native app en werkt offline, net als een native app", zegt Shruti Kapoor, software engineer bij PayPal.

De reden dat deze apps 'progressief' worden genoemd, is dat de UX verbetert op basis van de beschikbare apparaat- en browsertechnologie.

U kunt dus een PWA op een standaardtelefoon laden en deze werkt nog steeds. Maar de functionaliteit en gebruikerservaring zullen verbeteren naarmate je overstapt op nieuwere smartphones met de nieuwste hardware.

Hierdoor kunnen uitgevers schaalbare ervaringen voor internet bouwen zonder zwaar te investeren in een traditionele mobiele app.

De volgende kenmerken definiëren PWA's volgens Google-ontwikkelaars:

• Progressief: Werk voor elke gebruiker, ongeacht de browserkeuze.
  
• sympathiek: Geschikt voor elke vormfactor: desktop, mobiel, tablet of formulieren die nog moeten verschijnen.
  
• Connectiviteit onafhankelijk: Servicemedewerkers staan ​​werk offline of op netwerken van lage kwaliteit toe.
  
• App-achtig: Voel je als een app voor de gebruiker met interacties en navigatie in app-stijl.
  
• Verse: Altijd up-to-date dankzij het updateproces van de servicemedewerkers.
  
• Veilig: Geleverd via HTTPS om rondsnuffelen te voorkomen en ervoor te zorgen dat er niet met de inhoud is geknoeid.
  
• Zichtbaar: Deze zijn herkenbaar als “applicaties” dankzij de W3C-manifesten en de reikwijdte van de registratie van servicemedewerkers, waardoor zoekmachines ze kunnen vinden.
  
• Opnieuw inschakelbaar: Maak hernieuwde betrokkenheid eenvoudig via functies zoals pushmeldingen.
  
• Installeerbaar: Sta gebruikers toe apps die zij het nuttigst vinden op hun startscherm te 'bewaren' zonder het gedoe van een app store.
  
• koppelbaar: Eenvoudig te delen via een URL en vereist geen complexe installatie.

Dus dit was alles wat je nodig hebt over wat een progressieve web-app is. Laten we nu eens kijken hoe het werkt.

Hoe werken progressieve webapps?

Progressive Web Apps profiteren van nieuwe functies die worden ondersteund door moderne browsers, waaronder webapp-manifesten en service werknemers. Elke website/app moet aan de vier minimumvoorwaarden voldoen om te worden geclassificeerd als een Progressive Web App.

1. A webmanifest biedt meta-informatie over een toepassing (zoals de naam, auteur, pictogram en beschrijving) in een JSON-tekstbestand. Uitgevers kunnen het webmanifest zelf schrijven of het bestand genereren met behulp van een webapp-manifestgenerator.
   
2. Een servicemedewerker is een JavaScript-code die fungeert als een proxyserver die zich tussen de app, de browser en het netwerk bevindt. Ze worden gebruikt om effectieve offline ervaringen te bieden door netwerkverzoeken te onderscheppen en informatie op de achtergrond in de cache op te slaan.
   
3. Een pictogram wordt gebruikt als app-pictogram wanneer een gebruiker een PWA in de applicatielade bewaart. Elke JPEG-afbeelding met een formaat van 512×512 pixels zal prima werken.
   
4. U moet de app via a beveiligde HTTPS-verbinding. De meeste hostingproviders bundelen tegen een meerprijs een HTTPS-certificaat. U kunt ze ook beveiligen via een externe provider. Het hebben van een beveiligde website is ook beter voor uw merk.

Wat is het verschil tussen progressieve webapps en native apps

Er zijn veel verschillen tussen deze twee. Hieronder hebben we enkele van de belangrijkste genoemd.

Kosten

Van de vele progressieve webapp-functies is kosteneffectiviteit een van de beste voordelen.

Er is een aanzienlijk kostenverschil tussen deze twee. Bij het ontwerpen van native apps moet u de vereiste taal goed beheersen. Om nog maar te zwijgen, je moet apps bouwen voor beide besturingssystemen: Android en IOS.

Aan de andere kant zijn progressieve webapps veel betaalbaarder om te bouwen. U hoeft geen codeertalen te leren en u hebt geen extra middelen nodig om elke versie van de app te onderhouden of bij te werken.

In tegenstelling tot native apps zijn progressieve webapps een geweldige manier om tijd en geld te besparen bij het bouwen en updaten van uw app. U kunt één enkele codebase hebben voor verschillende platforms, wat betekent dat u zich geen zorgen hoeft te maken over het maken van afzonderlijke versies voor elk platform.

vindbaarheid

Omdat progressieve webapps zijn gebouwd met behulp van webtechnologieën zoals HTML, Javascript, .CSS, enz., kunnen ze door zoekmachines worden geïndexeerd. Ze werken als een website, wat betekent dat ze met de juiste zoekmachineoptimalisatietechnieken ook in de zoekmachines kunnen worden opgenomen.

Native apps werken anders. Ze zijn over het algemeen ontworpen voor Android en IOS en kunnen alleen worden gerangschikt in hun speciale winkels: Play Store en App Store.

Security

Als het op veiligheid aankomt, zijn PWA's veiliger dan traditionele webapps, omdat ze moeten draaien onder HTTPS, een beveiligingsprotocol dat beschermt tegen manipulatie van de uitwisselingen tussen client en server.

Met een native app kunt u meerdere beveiligingsmaatregelen opnemen, zoals multi-factor authenticatie en certificaatpinning.

De voordelen van progressieve webapps

Progressive Web Apps hebben veel duidelijke voordelen ten opzichte van reguliere websites. Net als apps, zij meer te weten komen over de gebruiker bij elk bezoek, zelfs als ze niet ingelogd zijn.

Dus als iemand de website een paar keer bezoekt, kan de app dat wel een download- of webmeldingsprompt activeren. Bovendien zijn ze online toegankelijk en kunnen ze de inhoud dynamisch bijwerken, waardoor een naadlozere gebruikerservaring ontstaat.

Belangrijker nog dan al deze Progressieve webapps zijn dat wel snel. “Uit ons eigen onderzoek is gebleken dat PWA’s twee tot vier keer hogere paginasnelheden opleveren, waardoor uw zuurverdiende gebruikers betrokken blijven en converteren”, zegt Igor Faletsky, CEO van Mobify. “Progressieve webapps maken app-achtige ervaringen mogelijk met het bereik van internet.

De gebruikerservaring is meeslepend en wordt onmiddellijk geladen, zelfs bij slechte netwerkomstandigheden. Zie het als een mobiele app, maar dan zonder dat je naar de App of Play Store hoeft.

Progressieve webapps hebben dat wel geweldige resultaten opgeleverd voor honderden webuitgevers en e-commerceleveranciers. Neem het geval van Pinterest, dat vorig jaar zijn website ombouwde tot een Progressive Web App.

Sindsdien is de website getuige geweest van een toename van 60% in de belangrijkste betrokkenheidsstatistieken, een toename van 50% in het aantal klikken op advertenties en een toename van 44% in de advertentie-inkomsten.

De meeste voordelen van PWA's zijn dezelfde als die van apps: snellere, betere gebruikerservaring en grotere gebruikersstabiliteit.

Nu je begrijpt wat PWA's zijn en hoe ze werken, gaan we ze vergelijken met AMP's.

PWA's en AMP's hebben enkele overeenkomsten, maar er zijn ook enkele belangrijke verschillen tussen de twee.

Laten we eens kijken welke dat zijn, zodat u beter begrijpt hoe ze allemaal werken.

PWA versus AMP: wat is het verschil?

Progressive Web Apps zijn eigenlijk een uitloper van het Accelerate Mobile Pages-project. Terwijl AMP wordt gebruikt om de laadtijden van pagina's op mobiele apparaten te verkorten, laden PWA's net zo snel, maar met extra functionaliteit. Voor beide raamwerken zijn ontwikkelingswerkzaamheden aan de gang, dus het kiezen van één raamwerk wordt een kwestie van gebruiksscenario en voorkeur.

Uitgevers gaan ervan uit dat AMP een SEO-voordeel heeft. Maar Graeme Caldwell wel Geavanceerde webrankingblog legt uit dat PWA's geen enkel nadeel ondervinden. “Nog niet zo lang geleden waren webapplicaties aan de clientzijde een SEO-nachtmerrie.

Tegenwoordig kunnen bedrijven Progressive Web Apps en andere JavaScript-webapplicaties veilig omarmen zonder de SEO negatief te beïnvloeden”, zegt hij.

Inkomsten genereren met progressieve webapps

Dit is waar Progressive Web Apps een klein voordeel hebben ten opzichte van Accelerated Mobile Pages, zij het tegen hogere initiële installatiekosten.

AMP is een ambitieus project dat zijn kernbelofte waarmaakt: het sneller laden van mobiele webpagina's. Het heeft echter moeite om aan de verwachtingen van de uitgevers te voldoen, namelijk de mogelijkheden voor het genereren van inkomsten en de advertentie-inkomsten.

“Met PWA's kunnen net zo veel inkomsten worden gegenereerd als met progressieve websites en native apps. In feite kunnen uw inkomsten zelfs hoger uitvallen, omdat er geen verplichting is om commissie te betalen over verkopen aan spelers van derden (in het geval van native apps. Dit zou de App Store of Google Play zijn die een korting krijgt van alle verkopen)”, schrijft Alexandra Soroka bij de GoodBarber-blog.

Stel dat adverteren uw favoriete methode voor het genereren van inkomsten is. In dat geval zijn alle opties aanwezig, wat betekent dat u de mogelijkheid heeft om met een extern advertentienetwerk te werken en uw eigen interne advertentiecampagnes te maken als u uw eigen partnerschappen of overeenkomsten heeft.

Progressive Web Apps zijn zeer geschikt voor het genereren van inkomsten, omdat het genereren van inkomsten met behulp van 'apps' een opgelost probleem is. Net als apps bieden PWA's meerdere plaatsen om advertenties weer te geven, verschillende advertentieformaten en verbindingen met verschillende advertentienetwerken. Twee van de meest voorkomende formaten zijn onder meer banneradvertenties en interstitiële advertenties.

U kunt advertenties weergeven in de startweergave, lijstweergave en weergaveweergave van uw PWA. Eenvoudige integratie met populaire advertentietechnologieën zoals DFP is een bijkomend voordeel.

Hoe u progressieve webapps kunt bouwen?

Aan de slag gaan met PWA's is eenvoudig: u heeft slechts een paar belangrijke ingrediënten nodig, en u kunt aan de slag! Deze kleine tutorial over progressieve apps zal u helpen de vereisten te kennen om met PWA-ontwikkeling te beginnen.

Tools

Er zijn veel verschillende technologieën die u kunt gebruiken om PWA's te ontwikkelen. Maar de meest populaire en bekende optie is AngularJS. Daarnaast kun je ook ReactJS en Polymer gebruiken.

HTTPS

De tweede stap is het beveiligen van uw progressieve app. Daarvoor is het raadzaam om uw website te hosten op een server met een HTTPS-verbinding. Dit garandeert de privacy van de gegevens van uw gebruikers. Het geeft uw website een extra mate van beveiliging.

Applicatieschil

De applicatieshell is wat de gebruiker als eerste ziet wanneer hij uw app opent. Met andere woorden: het is de eerste indruk die uw app maakt.

De shell vormt de basis voor de ervaring van de gebruiker met uw app door een startpunt te bieden voor het navigeren en communiceren met de app.

Duidelijk bestand

Dit JSON-bestand is gegenereerd met een specifiek doel: het bevat alle informatie die bepaalt hoe uw PWA eruitziet en functioneert.

In dit bestand kunt u zaken als de naam, beschrijving, pictogram, kleuren en vele functies van uw progressieve web-app bepalen.

Hierdoor heeft u volledige controle over hoe uw app verschijnt en zich gedraagt, waardoor het gemakkelijker wordt om een ​​unieke en gepersonaliseerde ervaring voor uw gebruikers te creëren.

Servicemedewerkers

Een van de fundamentele technologieën die PWA's mogelijk maken, is het gebruik van servicemedewerkers.

Servicemedewerkers zorgen ervoor dat uw app offline kan werken en geavanceerde functies ondersteunen door assets in de cache op te slaan en achtergrondbewerkingen te beheren. Bovendien kan het taken uitvoeren, zelfs als uw progressieve web-app inactief is.

Laatste woorden

Het mag duidelijk zijn dat Progressive Web Apps de toekomst zijn. De afgelopen maanden hebben we veel aankondigingen en veranderingen gezien die erg spannend zijn.

Google heeft stappen ondernomen om van PWA's de eerste keuze voor ontwikkelaars te maken, en Microsoft heeft dit voorbeeld gevolgd met de aankondiging van progressieve webapps op Windows. We zijn super enthousiast om de toekomst van PWA's te zien ontvouwen.

We hopen dat de blog je heeft geholpen te begrijpen wat een progressieve webapp is, hoe deze werkt, progressieve webapps en native webapps, enz. Bedankt voor het lezen.

Veelgestelde vragen – Progressieve webapps