Inmiddels heb je waarschijnlijk gehoord dat Progressive Web Apps de toekomst is van de hele mensheid. Ze brengen wereldvrede, beëindigen honger, redden de regenbogen en eenhoorns, brengen balans in de kracht, en nog veel meer. In het proces kunnen ze zelfs het mobiele internet naar voren duwen, gelijkheid brengen met internet en native apps, en mobiele ontwikkelaars helpen meer gebruikers te bereiken dan alleen de app-winkels.

Dat klinkt allemaal geweldig... maar wat zijn Progressive Web Apps precies?

    
"Een Progressive Web App maakt gebruik van moderne webmogelijkheden om een ​​app-achtige gebruikerservaring te leveren." - Progressive Web Apps

Native apps voor app store doen dingen zoals pushmeldingen verzenden, offline werken, eruit zien en aanvoelen als een app (zoals Apple en Google ze hebben voorgesteld), laden op het startscherm etc. Mobiele webapps die in een mobiele browser zijn geopend, hebben historisch gezien die dingen niet gedaan. Progressive Web Apps lossen dit op met nieuwe web-API's, nieuwe ontwerpconcepten en nieuwe modekreten. Voor alle duidelijkheid, ik heb het over mobiele web-apps voor browsers. Hybride apps, zoals Ionic met Cordova, draaien onbevangen in de native app-omgeving, met alle functies die we van een native app verwachten. Maar haal de webcontent uit een hybride app en laad hem in een mobiele browser, en de app wordt dus beperkt door de functies van de browser (voor een verscheidenheid aan goede beveiligings- en API-standaardiseringsredenen).
Progressive Web Apps brengen functies die we van native apps verwachten naar de mobiele browserervaring, op een manier die gebruikmaakt van op standaarden gebaseerde technologieën en wordt uitgevoerd in een veilige container die voor iedereen op internet toegankelijk is. Over het algemeen beschrijven Progressive Web Apps een verzameling technologieën, ontwerpconcepten en web-API's die samenwerken om een ​​app-achtige ervaring op het mobiele web te bieden. Laten we eens kijken naar enkele kernprincipes van Progressive Web Apps.

Service Workers

Service Workers zijn een ongelooflijk krachtige en even verwarrende technologie achter een Progressive Web App. Ze zorgen voor offline functionaliteit, pushmeldingen, bijwerken van achtergrondinhoud, content caching en nog veel meer. Op een hoog niveau is een service worker een arbeidersscript dat achter de schermen werkt, onafhankelijk van uw app en wordt uitgevoerd als reactie op gebeurtenissen zoals netwerkverzoeken, pushmeldingen, verbindingswijzigingen en meer.

Ik heb Service Workers beschreven als een 'proxy', waarvan ik denk dat het deze mooi beschrijft. We kunnen luisteren naar evenementen zoals fetchen die plaatsvinden telkens wanneer er een netwerkverzoek plaatsvindt. We kunnen die gebeurtenis met volledige controle afhandelen, controleren op gegevens in de cache en onmiddellijk terugkeren, of toestaan ​​dat het verzoek doorgaat naar de externe server. Ons script fungeert als een proxy of middleware voor het verzoek. De enorme kracht en flexibiliteit van service workers maakt ze erg ingewikkeld, en in het algemeen zullen ontwikkelaars vooraf gemaakte 'recepten' willen gebruiken voor veel voorkomende gevallen van service wrkers, zoals de offline modus. Mozilla heeft een geweldige referentie voor recepten voor service workers die de talloze toepassingen met herbruikbare code demonstreren. Google heeft ook een hele reeks voorbeelden van service workers.

Service Workers zijn net een JavaScript-bestand als elk ander, op de achtergrond uitgevoerd en geactiveerd via gebeurtenissen, en het is aan jou om code te schrijven voor het afhandelen van caching, pushmeldingen, het ophalen van inhoud, etc. Service Workers zijn beschikbaar op Android met Chrome 50 en worden momenteel niet ondersteund door andere grote mobiele browsers.

App Shell

Het App Shell-model is een eenvoudig ontwerpconcept waarbij de initiële belasting van een mobiele webapp een basishell voor een app-gebruikersinterface biedt en de content voor de app wordt geladen. App Shell is geen web-API of een framework, maar eerder een ontwerpaanpak waaraan ontwikkelaars kunnen kiezen om zich daaraan te houden, wat wordt bevorderd door de cachingmogelijkheden van service werkers. Misschien merk je dat het een vrij eenvoudige, voor de hand liggende aanpak is, die door een modewoord dramatischer wordt. Met het App Shell-model richten we ons erop de shell van de gebruikersinterface van de app en de inhoud erin gescheiden te houden, en we cachen ze afzonderlijk in. Idealiter wordt onze App Shell zodanig opgeslagen dat deze zo snel mogelijk wordt geladen wanneer een gebruiker deze op een later tijdstip bezoekt en retourneert. Als de shell en de content afzonderlijk worden geladen, verbetert dit theoretisch de perceptie van de gebruiker over de prestaties en bruikbaarheid van de app. Door dit in de context te plaatsen, kan de app-lay-out onmiddellijk geladen worden (tabbladen, navigatiecontroller, zijmenu, enz.), het in cache opslaan via een servic worker en de inhoud vervolgens via JS ophalen en bijwerken nadat de shell van de app is geladen. Naarmate we meer PWA-ondersteuning beginnen toe te voegen, kunt u verwachten dat een App Shell-aanpak out-of-the-box komt voor alle apps die worden geïmplementeerd als mobiele web-apps, met vooraf gemaakte Service Worker-recepten voor caching, offline ondersteuning en achtergrondinhoud vernieuwen.

Instabiliteit en App Manifest

Historisch gezien werden mobiele webapps niet als een app op het startscherm geïnstalleerd. Natuurlijk kan een gebruiker een mobiele website 'vastzetten' op het startscherm op iOS en Android, maar de ervaring was tweederangs en de app kwam nog steeds niet met de lokale functies die we verwachten van native apps (plus, doet iemand het eigenlijk doe dat?). Dit is aan het veranderen. Onlangs heeft Chrome op Android ondersteuning toegevoegd voor het installeren van webapps op het startscherm met een native install-banner, net als de native app-banners die we gewend zijn. Om Chrome te vertellen dat onze mobiele website installeerbaar is als een app, schrijven we een manifest.json-bestand en koppelen we eraan vanaf onze hoofdpagina van HTML. Op dit moment heeft iOS geen andere functies dan Pin-to-Homescreen, dus de ervaring zal niet zo vloeiend zijn, maar hopelijk geeft Apple ons dit jaar wat extra's?

Conclusie

Progressive Web Apps zijn gelijke delen nieuwe web-API's, ontwerppatronen en marketingdons. Het mobiele web komt dichter bij pariteit met installeerbare app store-apps via app-manifest en startscherminstallatiesteun, achtergrondarbeidersfunctionaliteit met service workers, snellere laadtijd met App Shell en een hernieuwde overtuiging dat ook webontwikkelaars geweldige mobiele app. Tegenwoordig worden webtechnologieën gebruikt door miljoenen app-apps, maar tot nu toe is het mobiele internet een uitgeklede ervaring geweest die mensen naar de app store voor het echte ding heeft gedreven. Progressive Web Apps veranderen dat. In de komende maanden zullen nieuwe functies vrijgegegven worden voor apps waarmee ontwikkelaars het beste uit twee werelden kunnen halen: platformonafhankelijke app-winkelimplementatie op iOS, Android en Windows, samen met implementatie op mobiel internet als een Progressive Web App met dezelfde code. Binnenkort kunnen ontwikkelaars profiteren van zowel de distributie van native app-stores als onmiddellijke toegang tot de miljarden mobielweb- en Google-zoekgebruikers. Geen onhandige app store-interstitials meer en geen aparte native en mobiele web-apps meer bouwen.