Alles wat u moet weten over Progressive Web Mijn App

Progressive Web Apps bieden een aantal voordelen, zowel voor u als maker als voor de eindgebruikers van deze toepassingen. Zichtbaarheid, ontwerp, prestaties en betrokkenheid zijn allemaal voordelen waarvan u kunt profiteren om uw gebruikers te verblijden en uw Bedrijf te verrijken.

1. Krijg meer zichtbaarheid en betrek uw gebruikers erbij

a. Multi-platform: bespaar tijd en geld

Progressive Web Apps kunnen op elk apparaat worden uitgevoerd, en hebben de mogelijkheid om zich volledig aan te passen aan het scherm waarop ze worden gelezen. Dit heeft twee grote voordelen.

De eerste is natuurlijk dat de Progressive Web App (PWA) ontwikkeld wordt met behulp van webtechnologieën. Het aanbod van vaardigheden in webtechnologieën is groter dan de vraag. Over het algemeen kost het minder om een progressieve webapplicatie te ontwikkelen dan een native app, vooral omdat als u zich op iOS en Android wilt richten, u 2 aparte native ontwikkelingen moet uitvoeren.

Het tweede voordeel is dat Progressive Web Apps (PWA's) draaien in een universele app, de webbrowser. Alle apparaten die met het internet verbonden zijn, hebben er één, of het nu een mobiel, tablet of desktop is. Nogmaals, door slechts één app te ontwikkelen, kunt u uw kosten rationaliseren.

b. Op het web draaien: controle over uw applicatie en de distributie ervan

Progressive Web Apps worden op dezelfde manier gedistribueerd als een website, d.w.z. via een URL die door een browser wordt opgeroepen. Zoals u zich zult hebben gerealiseerd, is dit een enorm voordeel van Progressive Web Apps: u hoeft niet via de App Store of Google Play te gaan om uw Toepassen te distribueren. Ze zijn beschikbaar op het mobiele en tabletweb.

Hoe is dit een voordeel?

Ten eerste wat de kosten betreft: u hoeft geen extra kosten te betalen om uw applicatie te kunnen distribueren (momenteel €25 voor Google, en €89/jaar voor Apple).

Ten tweede bent u volledig vrij en onafhankelijk als het gaat om het Ontwerp, de functies, elementen en inhoud van uw applicatie: u kunt deze vrij distribueren zonder dat u deze hoeft te onderwerpen aan enige vorm van beoordeling.

Dit tweede punt benadrukt een belangrijk voordeel van deze distributiemethode: uw Progressive Web App (PWA) is altijd up-to-date. Al uw verbeteringen worden onmiddellijk Toepassen, dus u hoeft niet te wachten of een revisie te ondergaan. Bovendien zijn native Toepassen gecompileerde code, wat betekent dat uw gebruikers de nieuwe code op hun apparaat moeten downloaden om te kunnen profiteren van uw updates, wat absoluut niet het geval is bij een Progressive Web App.

Dit betekent dat uw gebruikers een beslissende rol kunnen spelen bij het verbeteren van uw app. Rekening houden met hun feedback gaat veel sneller met een Progressive Web App, omdat u direct wijzigingen in uw app kunt aanbrengen op basis van hun Terug. U kunt gebruikerstesten uitvoeren, de daaruit voortvloeiende Statistieken analyseren en ontdekken wat u moet verbeteren. Met andere woorden, als iets u niet bevalt of niet werkt, kunt u met een Progressive Web App (PWA) snel uw doel bijstellen, waardoor de betrokkenheid van gebruikers wordt gemaximaliseerd!

c. Gemakkelijk te promoten: vergroot uw zichtbaarheid

Alle Inhoud die u voor uw Progressive Web App produceert, kan door zoekmachines worden geïndexeerd. Uw app heeft dezelfde zichtbaarheid als een website in Google. Het gemak waarmee PWA's toegankelijk zijn, is een onmiskenbaar voordeel voor uw bedrijf, omdat het gemakkelijk voor te stellen is om de optimalisatietechnieken die veel op het web worden gebruikt, ook op apps toe te passen.

Zoals we al eerder zeiden, zijn PWA's toegankelijk via een URL, net als een website. Natuurlijke verwijzingen, Kopen van gesponsorde links, retargeting... Al deze marketingtools worden uw beste bondgenoten!

Vergeet ook niet dat Progressive Web App (PWA) toegankelijk zijn via een eenvoudige URL, die u gemakkelijk overal naartoe kunt slepen, vooral op plaatsen die vaak over het hoofd worden gezien. Verwijzingslinks gebruiken, posten op sociale netwerken, registreren op adreslijsten en e-mailcampagnes zijn allemaal Mediums om de URL van uw Progressive Web App te verspreiden en de afstand tussen u en uw potentiële gebruikers te verkleinen: zodra uw URL zichtbaar is, zijn uw gebruikers slechts één klik verwijderd. Zoals we al eerder zeiden, krijgen Progressive Web Mijn App gemiddeld 3 keer meer zichtbaarheid dan native apps, een cijfer dat kan meewegen bij de ontwikkeling van uw Toepassen.

d. Geavanceerde functies: betrek uw publiek en bouw loyaliteit op

Een ander fundamenteel kenmerk van Progressive Web Apps is ongetwijfeld hun aantrekkelijke aspect. Tot nu toe waren Push Meldingen voorbehouden aan native apps, maar ontwikkelaars kunnen ze nu ook Activeren voor PWA's.

We zullen later bespreken hoe pushmeldingen voor het web werken, maar u moet nu al weten dat apps die deze functie al hebben geactiveerd, 72% meer tijd in de app hebben doorgebracht en 50% meer herhaalbezoeken hebben gezien (Why Bouwer a Progressive Web App? by Udacy).

Het staat niet meer ter discussie: Push meldingen zijn een essentieel element om rekening mee te houden bij het opbouwen van uw communicatie met uw gebruikers. Ze zijn onmisbaar in de native wereld en verschijnen nu niet alleen op mobiele webapplicaties, maar ook op de desktop. Dit nieuwe concept zal een revolutie teweegbrengen in de manier waarop het web wordt gebruikt, dus waarom zou u er nu niet van profiteren?


2. Uw gebruikers profiteren van een ongeëvenaarde ervaring

a. Vloeiend, intuïtief: een app-achtige ervaring

Een Progressive Web App (PWA) is in de eerste plaats een gebruikerservaring. Met de gebruiker in gedachten wenden ontwikkelaars zich dus tot een reeks webgebaseerde technologieën, tools en best practices om nieuwe normen vast te stellen voor het web en alle schermen.

In de praktijk bootsen Progressive Web Apps de Navigatie van native apps na, met als doel vloeiende, app-achtige interacties te bieden. Voor gewone gebruikers betekent dit dat de belangrijkste elementen van de app onmiddellijk worden weergegeven, omdat ze al in de cache zijn opgeslagen, voor betere prestaties, terwijl de Inhoud bij elk gebruik wordt opgehaald - we zullen hier later dieper op ingaan.

Progressive Web Apps zijn in eerste instantie ontworpen voor mobiel, maar bieden een perfecte gebruikerservaring door de codes van mobiele ontwikkeling naar alle andere soorten schermen te brengen. Deze nieuwe manier van kijken naar ontwerp voor zowel mobiele als desktopapparaten is volledig in lijn met de nieuwe verwachtingen van gebruikers, en is daarom een belangrijke factor in het opbouwen van gebruikersloyaliteit.

b. Toegankelijk en lichtgewicht: overleg zonder beperkingen

Zoals u misschien al geraden had, zijn uw gebruikers met Progressive Web Apps slechts 1 klik verwijderd van uw Inhoud, en ze hebben er meteen toegang toe, op elk apparaat (mobiel, tablet, desktop, laptop), met een Klein of Groot scherm, via hun Navigatie. Progressive Web Apps hoeven niet geïnstalleerd te worden om geraadpleegd te worden, dus uw gebruikers kunnen uw Inhoud gemakkelijk raadplegen zonder dat ze de app hoeven te installeren.

Als uw gebruikers verleid zijn door uw Inhoud, hebben ze nog gemakkelijker toegang tot uw app: Progressive Web Apps kunnen direct op het beginscherm van uw gebruikers geïnstalleerd worden, zonder te hoeven downloaden en zonder door de stores te hoeven gaan.

Hun onvergelijkbare lichtheid neemt ook alle geheugenbeperkingen op apparaten weg op het moment van installatie. Uw gebruikers hoeven zich dus geen zorgen meer te maken over de beschikbare hoeveelheid geheugen op hun apparaat. Wanneer een gebruiker een bepaalde pagina probeert te openen, worden alleen de elementen geladen die nodig zijn om die pagina weer te geven, waardoor geheugenruimte op het apparaat wordt bespaard. Een Progressive Web App (PWA) neemt bijvoorbeeld gemiddeld 200x minder ruimte in beslag dan een native iOS-applicatie.

c. Snel: onmiddellijk laden

PWA's worden gebouwd met de gebruiker in gedachten en bieden een eersteklas ervaring. Inhoud wordt dynamisch bijgewerkt, zodat de gebruiker altijd toegang heeft tot de meest recente inhoud.
Progressive Web Apps kunnen JavaScript-code uitvoeren zonder dat deze op de voorgrond hoeft te staan, of zelfs zonder dat er een webpagina geopend is in de browser. Dit maakt het mogelijk om de gegevens in de app regelmatig bij te werken, zodat de bijgewerkte gegevens direct kunnen worden weergegeven wanneer de gebruiker aankomt. De prestaties van de app worden ook verbeterd door het vooraf laden van statische bronnen en volledige Pagina's.

De dagen van eindeloze laadtijden zijn voorbij, en uw gebruikers zullen door uw Progressive Web App (PWA) kunnen navigeren met een vloeiendheid en snelheid die ongeëvenaard zijn op het web.

d. Offline werking: geen frustratie voor de gebruiker

Een van de belangrijkste kenmerken van een Progressive Web App is het vermogen om te functioneren bij afwezigheid van een stabiele internetverbinding. Bij het eerste bezoek van de gebruiker zal het caching-systeem sommige of alle beschikbare Inhoud lokaal opslaan. Dus de volgende keer dat de gebruiker de site bezoekt, zelfs zonder verbinding, heeft hij of zij toegang tot deze Inhoud en kan hij of zij door de Pagina's van de Progressive Web App (PWA) bladeren.

Zoals u kunt zien, houden Progressive Web Apps het midden tussen websites en native apps, en gebruiken ze het beste van beide concepten. De manier waarop ze werken is gebaseerd op een unieke combinatie van bestaande concepten, die samen ongelooflijke prestaties mogelijk maken.

1 Hoe wordt een webapp Progressive?

a. De uitdagingen van Progressive Web Mijn App

Om in aanmerking te komen als een Progressive Web App (PWA), moet een webapplicatie aan bepaalde criteria voldoen, zodat het de onvergelijkbare gebruikerservaring kan leveren die Progressive Web Mijn App kenmerkt.
Per definitie moet een Progressive Web App (PWA) het volgende zijn

Nu we de belangrijkste principes voor ogen hebben waaraan een Progressive Web App moet voldoen, laten we eens ontdekken hoe deze in de praktijk aan deze uitdagingen kan voldoen.


b. Hoe Progressive Web Apps werken

Progressive Web Apps worden ontwikkeld met behulp van een webclienttaal, die wordt gebruikt om de gebruikersinterface van elke pagina te beheren.

Bij GoodBarber hebben we er bijvoorbeeld voor gekozen om onze Progressive Web Mijn App in JavaScript te ontwikkelen en Angular 4.0 te gebruiken, een door Google ontwikkeld framework dat ontwikkelaars de tools biedt om webgebruikerservaringen te ontwerpen die vergelijkbaar zijn met die van native apps.

We hebben ervoor gekozen om isomorfe apps te maken, d.w.z. apps die JavaScript-code zowel aan de serverkant (Server Side Rendering - SSR) als aan de klantenkant (Client Side Rendering - CSR) kunnen uitvoeren.

Om u te helpen de voordelen van dit mechanisme te begrijpen, leest u hier hoe GoodBarber Progressive Web Apps werken:

De eerste pagina van de toepassing wordt aan de serverzijde gegenereerd (SSR), waardoor spiders van zoekmachines een pagina kunnen indexeren die al volledig is opgebouwd. Maar de toepassing voert ook berekeningen uit in de browser (CSR), waardoor de toepassing zonder netwerk kan werken, omdat alle JavaScript van de Progressive Web App (PWA) op de achtergrond gedownload en in de cache opgeslagen is.

c. Architectuur van Progressive Web Mijn App

Zoals hierboven vermeld, werken Progressive Web Apps door bestaande concepten te combineren:

Dit is het skelet van uw applicatie, waarbinnen uw gegevens gedistribueerd worden. De App Shell bevat de belangrijkste interface-elementen en de componenten die strikt noodzakelijk zijn voor het functioneren van de gebruikersinterface. Deze elementen worden lokaal opgeslagen, terwijl de Inhoud dynamisch wordt opgehaald van een API.

De App Shell zorgt ervoor dat de applicatie snel wordt weergegeven, verbruikt zo weinig mogelijk bandbreedte, laadt statische bronnen uit de lokale cache en scheidt Inhoud van Navigatie, wat resulteert in extreem korte laadtijden van de applicatie.

Dit is de technische basis voor veel van de functies die PWA's onderscheiden van traditionele websites. Het bevindt zich tussen de App en de Navigatie (of het netwerk, indien beschikbaar) en kan het gedrag van de App sterk wijzigen dankzij de vele mogelijkheden die het biedt: Service Workers maken het mogelijk om de Progressive Web App (PWA) in Offline modus te gebruiken. Naast andere taken zijn Service Workers ook essentieel voor het ontvangen van Push meldingen in uw PWA.

Uw PWA wordt beschreven in een JSON-bestand dat het Web App Manifest wordt genoemd. Dit is een bestand met de metadata die nodig zijn om uw app te indexeren in een Store zoals de Windows Store, of om uw app te installeren op het startscherm van uw gebruiker. Het is dus een beschrijvend bestand dat de applicatie een meer native uiterlijk geeft, met een schermvullende weergave, herkenbare pictogrammen en de mogelijkheid om de schermoriëntatie te wijzigen.


d. Diensten

Diensten Workers zijn een belangrijk element van Progressive Web Apps (PWA's), dus verdienen ze aandacht om zich bewust te worden van de nieuwe mogelijkheden die ze het web bieden. Technisch gezien is een Service Worker een script dat op de achtergrond wordt uitgevoerd door een browser. Het is in staat om acties uit te voeren als reactie op Evenementen zoals netwerkverzoeken, of informatie die door het besturingssysteem wordt doorgegeven (wijzigingen in de connectiviteit, bijvoorbeeld). Ontwikkelaars kunnen hiermee Geavanceerde functies bouwen, zoals push Meldingen en cachebeheer. Zodra de Service Worker in de Navigatie is geïnstalleerd, voert het de taken die eraan zijn toegewezen zelfstandig uit, zelfs als de gebruiker niet op de site surft. Een Service Worker werkt op een vergelijkbare manier als een proxyserver en fungeert als tussenpersoon tussen de browser en het internet om de gebruikerservaring te verbeteren, met name door gegevens van webpagina's te cachen.

In het kort is een Diensten Worker een eenvoudig JavaScript-bestand dat op de achtergrond draait en door bepaalde Evenementen wordt geactiveerd. Het onderschept verzoeken aan de server en kan een antwoord terugsturen door de bron die de server heeft ontvangen door te sturen, of door een lokale Versie van de bron te leveren als deze al is opgevraagd.

In het geval van GoodBarber Progressive Web Apps wordt bijvoorbeeld de manier waarop Lettertypen in de browser worden weergegeven geoptimaliseerd door ze bij het eerste bezoek van de gebruiker te downloaden en in de cache op te slaan. Bij volgende bezoeken wordt het lettertype lokaal geserveerd, waardoor het onmiddellijk wordt weergegeven en de toepassing sneller wordt weergegeven.

Zoals u kunt zien, heeft Apple de deuren van zijn beroemde Navigatie nog niet geopend voor Diensten en dus voor de volledige kracht van PWA's. Maar het goede nieuws is dat Safari en Safari iOS binnenkort op de lijst van compatibele browsers zouden moeten verschijnen. Wat de Edge browser betreft, Service Workers zijn al compatibel op Android, en andere ontwikkelingen zijn gaande.

Zoals we al eerder zeiden, maakt de Service Worker het mogelijk om geavanceerde functionaliteiten zoals synchronisatie op de achtergrond in te bouwen, waardoor actuele gegevens direct worden weergegeven wanneer de gebruiker aankomt (dankzij het regelmatig bijwerken van deze gegevens op de achtergrond). Synchronisatie zorgt dus voor een extreem vloeiende gebruikerservaring, waardoor de uitvoeringssnelheid van de applicatie aanzienlijk toeneemt.

Het gebruik van Service Workers betekent dat Progressive Web Apps moeten voldoen aan beveiligingsspecificaties. Service Workers hebben de mogelijkheid om zeer krachtige bewerkingen in de browser uit te voeren. Gebruikersgegevens moeten worden versleuteld om ervoor te zorgen dat deze kracht verstandig wordt gebruikt.

Het installeren van de Service Worker, wat essentieel is voor het gebruik van de belangrijkste functionaliteiten van de PWA, kan alleen worden gedaan als de webpagina in HTTPS wordt geserveerd. Dit is een noodzakelijke voorwaarde als u uw hele Progressive Web App (PWA) met dit veilige protocol wilt serveren, wat ook een positieve factor is voor de verwijzing naar uw Pagina's.

2. Specifieke functies voor PWA's

a. Pushmeldingen

Deze functionaliteit wordt mogelijk gemaakt door de mogelijkheid van service workers om op de achtergrond te werken. Om dit gebruik mogelijk te maken, werken twee apparaten complementair: de Push API en de Melding API.

Alle bestaande browsers, met uitzondering van Safari, vertrouwen op Service Workers om dit resultaat te bereiken. Safari maakt daarentegen gebruik van Apples eigen systeem genaamd APN's, waarmee een externe dienstenleverancier berichten of opdrachten kan sturen naar elk Apple apparaat waarop OS X draait. Het is belangrijk om op te merken dat Meldingen voor websites niet verschijnen op apparaten met iOS (mobiel).

Met andere woorden, de service worker verwerkt een Melding die door een Push service via de Push API wordt verzonden. Vervolgens wordt deze melding met behulp van de Melding-API aan de gebruiker getoond.

b. Offline werking

Offline toegankelijkheid is ook afhankelijk van de Service Worker die, eenmaal geïnstalleerd in de browser, het cachen van de bestanden van de app beheert, netwerkverzoeken onderschept en vervolgens de juiste acties uitvoert, afhankelijk van of het netwerk beschikbaar is of niet. Deze functie maakt het niet alleen mogelijk om de applicatie zonder verbinding te raadplegen, maar zorgt ook voor een verbeterde gebruikerservaring, omdat zelfs met een internetverbinding bepaalde bestanden niet meer van de webserver geladen hoeven te worden, omdat ze al lokaal opgeslagen zijn.