Een inleiding tot Progressive Web Apps

De meeste ontwikkelaars hebben in ieder geval wat geroezemoes gehoord Progressive Web Apps. Deze worden breed ondersteund door technologiebedrijven zoals Google en worden snel de norm voor webtoepassingen met meerdere apparaten.

Maar wat is precies het verschil tussen een standaard en een progressief web applicatie?

Voor ontwikkelaars, het is een hele wereld van verschil. Progressive Web Apps gebruiken moderne web-API's om maak eigen app-ervaringen in de browser. Dit betekent dat ontwikkelaars snel ladende dynamische apps kunnen bouwen zonder hybride raamwerken te gebruiken.

In deze gids behandel ik de basisprincipes van Progressive Web Apps, enkele primaire functies en hoe u aan de slag kunt gaan met het maken van uw eigen functies.

Wat zijn Progressive Web Apps?

Progressive Web Apps (of PWA's) gebruik maken van webbrowser-API's om native app-ervaringen te creëren in de browser op elk apparaat.

Uiteindelijk omvatten Progressive Web Apps een een handvol technologieën die ontwikkelaars kunnen gebruiken om krachtige native-achtige applicaties te maken. Velen komen uit Web API's zoals de Service Workers API of de Push API.

Er zijn nogal wat eisen om iets een PWA te noemen, maar dit zijn de meest belangrijke:

Is volledig mobiel responsief.
Houdt zich aan progressieve verbetering.
Kunnen plaatselijk installeren op smartphones en tablets.
Werkt offline zonder internet, met behulp van servicemedewerkers.
Scheidt inhoud van functionaliteit de shell van de app gebruiken.
Builts op HTTPS voor meer veiligheid.
zichtbaar in Google zoeken.
heeft dynamische app-achtige pagina's maar elk nog steeds heeft zijn eigen URL.

Als je denken aan het bouwen van een kleine web-app in plaats daarvan kunt u proberen een Progressive Web-app te maken. Dit komt met een beetje een leercurve, maar je hebt zoveel meer controle over de gebruikerservaring als gevolg.

Laten we een duik nemen in de grondbeginselen van Progressive Web Apps en leren wat hen aanzet.

Servicemedewerkers

Elke Progressive Web App heeft servicewerkers nodig. Dit zijn zoals verkeersagenten die coördineren waar verkeer naartoe gaat, waar gegevens vandaan komen en hoe dit gebeurt alles wordt georganiseerd en in de cache opgeslagen.

In eenvoudige termen, de servicemedewerker werkt als een JavaScript-bestand en wordt uitgevoerd op de achtergrond van uw web-app. Wanneer de gebruiker voert een evenement uit, het noemt het script voor servicemedewerkers om gegevens te verzamelen, gegevens op te slaan of beide!

De ... gebruiken Service Worker API is essentieel naar het uitvoeren van een offline-ondersteunde PWA. Dit is hoe jij gegevens verzenden tussen weergaven en hoe je kunt gegevens opvragen van een lokale database. Maar dit zijn meestal geavanceerde dingen die je leert door aan een PWA-project te werken.

Neem een kijkje op de Servicewerkers kookboek voor standaard fragmenten en live demo's. Dit is een fantastische manier om te leren door te bestuderen wat anderen hebben gedaan en klonen dat in je eigen apps.

Als je hoopt een Progressive Web App te bouwen start met de Service Worker API. Gewoon sleutelen aan het en lokaal een eenvoudige demo opzetten. Dit zal de basis leggen voor later aangepaste applicatiefuncties en pagina's bouwen die allemaal door servicemedewerkers lopen.

Voor beginnershandleidingen en gedetailleerde codefragmenten, Ik raad deze bronnen specifiek aan:

Aan de slag met servicemedewerkers
Aan de slag met servicemedewerkers
Service worker-voorbeeld: Aangepaste offlinepagemonster

De shell van de app

De meeste native apps volg een app shell-architectuur waar de gegevens en app-code is volledig gescheiden van de gebruikersinterface. De applicatie-shell kan zijn lokaal gecached dus elke pagina laadt ongelooflijk snel.

Dit blijft bij hetzelfde “native app” gevoel waar het interface blijft altijd zichtbaar maar de inhoud / functionaliteit laadt anders elke keer. Bekijk deze pagina op de Google Developers-site voor meer informatie over de app shell-model.

De meeste apps hebben een zeer eenvoudige app-shell en je zou je architectuur moeten ontwerpen met eenvoud in gedachten.

Meestal heeft de shell van de app deze hoofdelementen:

Bovenste navigatiebalkkoppelingen.
Vernieuwen knop (optioneel).
Pagina achtergrondcontainer.

U kunt hier een leuke casestudy vinden De I / O Progressive Web App-shellarchitectuur van Google. Ze bieden ook enkele tips voor het bouwen van uw eigen shell-architectuur, cachegeheugen en trek het automatisch voor elke pagina.

Beschouw de shell-architectuur als alle statische UI-elementen u zult op elke afzonderlijke pagina gebruiken. Deze zouden moeten zijn gescheiden van de rest van uw code en in de cache opgeslagen voor eenvoudig hergebruik. Bekijk ook eens Google's intro naar het onderwerp met veel code snippets om u te helpen aan de slag te gaan.

Online en offline ondersteuning

De meeste native apps draaien prima zonder internet. Progressive Web Apps zijn bedoeld om hetzelfde gedrag te volgen.

Via servicemedewerkers kan dat bouw lokale caches met JSON-code voor elke pagina. Op deze manier kunnen gebruikers browse lokaal door uw web-app. Je zou ook kunnen een manifestbestand opnemen om uw pictogrammen, opstartscherm en andere startinstellingen te definiëren.

Als u de API voor Service Worker gebruikt, bekijkt u de Cache API welke is onderdeel van hetzelfde raamwerk. Het is over het algemeen de beste manier om dit te doen sla gegevens lokaal op en toegang krijgen van servicemedewerkers later.

Je kan ook test een web-app gebruik makend van Vuurtoren, een gratis tool voor het controleren van de compliantie van functies en ondersteuning voor PWA-technologieën.

PWA's altijd offline ondersteuning vereisen via de Service Worker API, zodat ze kunnen werk in staten met weinig verbindingen. Lighthouse is de beste manier om offline ondersteuning te testen, samen met een groot aantal andere functies.

Live voorbeelden

Het bestuderen van live PWA's en zien hoe ze werken, is een geweldige manier om te leren. De Progressive Web App-markt is dat echter wel nog steeds in opkomst, zoveel van de beste zijn verspreid in verschillende hoeken van het internet.

Maar dankzij de PWA rotsen galerij, Ik heb enkele fantastische voorbeelden samengesteld om te laten zien wat PWA's echt kunnen doen.

1. Valutaconverter

Dit is vrij eenvoudig valuta-omzetter neemt wisselkoersen en berekent de huidige verschillen tussen een ton valuta's wereldwijd.

Je zult merken dat deze web-app is volledig responsief, ondersteunt aanraking, en automatische updates zonder enige paginavernieuwing.

Dit zijn slechts enkele van de functies die u in een van de functies verwacht typische Progressive Web App. Deze app kan ook lokaal worden opgeslagen naar je telefoon om offline te werken, hoewel het wel verbinding maakt met een JSON-bestand om de huidige wisselkoersen te controleren.

2. Engelse accenten

Ik ben gewoon dol op deze webapp, omdat deze zowel uniek als ongelooflijk goed ontworpen is. De Engelse accentenkaart beheert video's online waar mensen accenten uit specifieke regio's van de VS en het VK hebben.

Door ergens op de kaart te klikken, kunt u luisteren naar hoe mensen bepaalde woorden uitspreken in verschillende delen van de wereld. De app is razendsnel en dat is het open source op GitHub voor iedereen om uit te checken.

De internals lopen door Reageer / Redux met Firebase en een API-verbinding met Google Maps. Absoluut een geweldig voorbeeld van iets dat vrij eenvoudig is voor beginners om te studeren en te leren.

3. Pokedex.org

Een andere vrij eenvoudige PWA is dit Pokedex-app gemaakt door Nolan Lawson. Hij publiceerde deze code ook vrij op GitHub, dus het is ons nog een ander project dat is waard om rond te snuffelen en te studeren.

Omdat deze gegevens statisch kunnen blijven, is dat zo behandeld door een lokale motor riep PouchDB. Alle gegevens komen van de PokeAPI en slaat vervolgens op als gewoon JavaScript. Dit betekent dat je kunt sla het lokaal op op je telefoon zoals een echte native app en deze wordt uitgevoerd met of zonder internettoegang. Best cool, toch??

Het hele ding is mogelijk gemaakt door JavaScript, dus het is een bewijs van hoeveel je kunt doen met de code van de frontend. Het gebruikt veel caching met de Service Worker API, dus het is gek snel en super eenvoudig te gebruiken.

4. Flipkart

Ten slotte en het meest verrassend, laten we de Flipkart-website. Dit vol e-commerce winkel is in feite een Progressive Web App.

Haar volledig responsief en laadt pagina's dynamisch. Pagina-URL's worden toegevoegd aan de browser, zodat u deze kunt kopiëren en plakken en ze kunt delen zoals een standaardwebsite.

Dit is gemakkelijk de meest complexe PWA die ik ooit heb gezien. Ik ben verbaasd dat de ontwikkelaars in staat waren om een dergelijke naadloze ervaring op het web voor alle gebruikers te creëren, laat staan ondersteuning van lokale offline opslag, te.

En hoewel ik geen repo voor de hele Flipkart-broncode kon vinden, is er een Flipkart-pagina op GitHub met kleinere codefragmenten van hun ontwikkelaarsteam.

Meer leren

Progressive Web Apps zijn ongelooflijk populair en zal zeker stoom winnen naarmate meer ontwikkelaars overstappen van native / hybride apps.

Er is een jaarlijkse top genaamd de Progressive Web App Summit en ze publiceren video's op YouTube die je gratis kunt bekijken. Dit is een geweldige manier om haal wat professionele kennis op zonder te betalen voor een kaartje.

Maar als u op zoek bent naar meer informatie PWA coderingsgidsen bekijk zeker deze tutorials:

Een beginnershandleiding voor Progressive Web Apps
Bouw je eerste progressieve web-app met React
Een Progressive Web-app bouwen met polymeer