Wat zijn progressieve web-apps en hoe installeer ik er een?

Wat zijn progressieve web-apps en hoe installeer ik er een?

Apps domineren je telefoon. Lange tijd hadden apps niet op dezelfde manier invloed op je desktop of browser. Dat is de afgelopen jaren veranderd. Progressive Web Apps (PWA's) worden steeds groter en veranderen onze interacties met allerlei soorten websites.





Maar wat is nu precies een Progressive Web App? Wat doet een PWA dat een website niet doet? Dit is wat u moet weten over Progressive Web Apps.



Wat is een progressieve web-app?

Progressive Web Apps zijn webapplicaties die gebruikers een normale site bieden, maar die worden weergegeven als een native mobiele app. PWA's proberen de bruikbaarheid van een native mobiele app naar de moderne browserfuncties te brengen, waarbij optimaal wordt geprofiteerd van de vooruitgang in beide ontwikkelingsgebieden.





Wat definieert een PWA dan?

  • Universeel : een PWA moet naadloos (nou ja, bijna) werken voor elke gebruiker, ongeacht zijn browser.
  • Snel reagerend : PWA's zouden met elk apparaat moeten werken, zoals uw laptop, tablet, smartphone, enzovoort.
  • Ontwerp : het ontwerp moet native mobiele apps nabootsen, wat betekent gestroomlijnde, gemakkelijk te vinden menu's, met eenvoudige interactiviteit voor geavanceerde functies.
  • Veilig : PWA's moeten HTTPS gebruiken om gebruikersgegevens veilig te houden.
  • Vindbaar: gebruikers kunnen PWA's vinden en ze zijn gemakkelijk te herkennen als een applicatie (in plaats van als een 'site').
  • Betrokkenheid: een PWA moet toegang hebben tot native engagement-functies zoals pushmeldingen.
  • updates: PWA's blijven up-to-date en bieden de nieuwste versies van een service of site.
  • Installatie: stelt gebruikers in staat om de PWA eenvoudig op hun startscherm te 'installeren' zonder dat ze een app store nodig hebben.
  • Delen: PWA's vereisen slechts één enkele URL om te delen, zonder enige installatie.

Zoals u kunt zien, zijn PWA's bedoeld om gebruikers een volledige website-ervaring te bieden met de gestroomlijnde functies en het interfaceontwerp van een native app.



Hoe werkt een progressieve web-app?

De sleutel tot Progressive Web Apps zijn browserservicemedewerkers.

Een servicemedewerker is een script dat op de achtergrond van uw browser wordt uitgevoerd, 'los van een webpagina, waardoor de deur wordt geopend naar functies waarvoor geen webpagina of gebruikersinteractie nodig is'. Je zou servicemedewerkers kunnen gebruiken zoals: pushmeldingen en achtergrondsynchronisatie op dit moment, maar de onmiddellijke PWA-toekomst geeft deze scripts meer kracht.



Als zodanig vormen servicemedewerkers de basis van de PWA-standaard en gebruiken ze de webcache voor bijna onmiddellijke resultaten.

Vóór servicemedewerkers was het favoriete browsercachescript Application Cache (of App Cache). App Cache is beschikbaar in een breed scala aan offline-first-services, maar was enigszins foutgevoelig. Verder heeft App Cache verschillende bekende beperkingen, zoals: Een lijst apart verklaart.



Maar het grootste probleem voor ontwikkelaars is een gebrek aan directe interactie met hoe AppCache precies werkt, waardoor ontwikkelaars problemen niet nauwkeurig kunnen oplossen wanneer ze zich voordoen. Op hun beurt waren websites en diensten met volledige offline functionaliteit een riskante keuze.

Servicemedewerkers gaan echter maar zo lang mee als hun actie vereist is. Wanneer u in een PWA ergens op klikt of een functie gebruikt, komt een servicemedewerker in actie. De servicemedewerker (onthoud dat het een script is) verwerkt de gebeurtenis en beslist of de offline cache het verzoek kan voltooien. Het idee is dat er meerdere offline caches zijn waaruit de PWA kan kiezen, wat een veel breder scala aan offline functionaliteit oplevert.

Bovendien is de cache niet alleen voor offline snelheidsboosts. U gaat bijvoorbeeld naar een PWA, maar uw verbinding is extreem fragmentarisch. De servicemedewerker bedient een eerdere cache, volledig functionerend, zonder uw ervaring te onderbreken.

Progressieve Web App Browser Ondersteuning

Er zijn twee vereisten voor het gebruik van een Progressive Web App: een compatibele browser en een PWA-enabled service.

Laten we eerst eens kijken naar browsers. U hebt twee opties om PWA-browserondersteuning te controleren. De eerste is die van Jake Archibald Is servicemedewerker klaar? ? die handig de PWA-ready status van de belangrijkste browsers weergeeft, plus Samsung internet.

Voor een meer gedetailleerd overzicht van de ondersteuning van PWA-browsers, ga naar Kan ik gebruiken , een website die gespecialiseerd is in het weergeven van de implementatie van verschillende web- en browsertechnologieën per browserversie. Als u bijvoorbeeld 'servicemedewerkers' invoert in de zoekbalk, vindt u een tabel met het versienummer waarmee elke browser PWA-servicemedewerkers heeft geïmplementeerd.

De tabel Kan ik servicemedewerkers gebruiken bevestigt dat de belangrijkste browsers allemaal PWA's ondersteunen. Het illustreert ook PWA-ondersteuning voor verschillende alternatieve desktopbrowsers en mobiele browsers.

Nog even opsplitsen:

  • Desktopbrowser (volledige ondersteuning): Chrome, Firefox, Opera, Edge, Safari
  • Desktopbrowser (gedeeltelijke ondersteuning/verouderde versie): QQ-browser, Baidu-browser
  • Mobiele browser (volledige ondersteuning): Chrome, Firefox, Safari, UC Browser, Samsung internet, Mint Browser, Wechat
  • Mobiele browser (gedeeltelijke ondersteuning/verouderde versie): QQ-browser, Android-browser, Opera Mobile

De belangrijkste browsers ondersteunen dus allemaal PWA's. Microsoft Edge en Safari zijn de meest recente toevoegingen aan de volledige ondersteuningslijst. Omgekeerd gebruiken zowel QQ Browser als Baidu Browser nu verouderde versies en zijn als zodanig naar het tweede niveau gedaald.

Een progressieve web-app zoeken en installeren

Nu je weet welke browser je moet gebruiken, kun je nadenken over het zoeken naar en installeren van een PWA. Voor dit voorbeeld gebruik ik een Samsung Galaxy S8 met Google Chrome.

Progressieve web-apps zijn overal. Veel bedrijven hebben hun sites en diensten aangepast om een ​​Progressive Web App-versie aan te bieden. In veel gevallen zult u voor het eerst een PWA tegenkomen wanneer u naar de startpagina of mobiele servicesite gaat, die de Toevoegen aan startscherm dialoog venster.

Bekijk de video hieronder om te zien wat er gebeurt als je de bezoekt Mobiele Twitter-site .

Natuurlijk is het niet handig om talloze sites te bezoeken en te hopen dat het startscherm wordt geactiveerd. In feite is het ronduit tijdrovend. Gelukkig hoef je dat niet te doen, want er zijn een aantal sites gewijd aan het catalogiseren van PWA's.

Eerste poging outweb . Het bevat een behoorlijk behoorlijk aantal PWA's, met regelmatig nieuwe opties. Probeer vervolgens pwa.rocks. Het heeft een kleinere selectie, maar enkele handige PWA's die u aan uw apparaat wilt toevoegen.

Bovendien werd Chrome 72 voor Android in januari 2019 geleverd met Trusted Web Activity (TWA). Met TWA kunnen Chrome-tabbladen in een zelfstandige modus worden geopend. Hierdoor kunnen PWA's op hun beurt worden weergegeven in de Google Play-app store. De eerste paar PWA's die op Google Play verschenen waren: Twitter Lite , Instagram Lite en Google Maps Go , met meer reeksen die in de loop van de tijd zullen verschijnen.

Afbeeldingengalerij (2 afbeeldingen) Uitbreiden Uitbreiden Dichtbij

Zullen progressieve web-apps native apps vervangen?

Progressive Web Apps zijn een uitstekende hybride stap tussen uw browser en een native mobiele app. Zullen PWA's native apps volledig vervangen? Dat is een harde nee van mij. PWA's zijn geweldig als een lichtgewicht aanbod, maar aangezien ze zich momenteel voornamelijk richten op het repliceren van bestaande sites en services, zullen ze native apps niet vervangen.

Althans, voorlopig niet.

3x5 indexkaartsjabloon microsoft word

PWA's werken wel. De gegevens die beschikbaar zijn bij PWA Stats ondersteunen dit ook. Hier zijn een paar interessante cijfers die illustreren hoe PWA's onze interacties met veelgebruikte websites veranderen:

  • Trivago zag een toename van 150 procent van de betrokkenheid bij gebruikers die hun PWA aan een startscherm toevoegden.
  • De PWA-homepage van Forbes wordt volledig geladen in slechts 0,8 seconden, terwijl het aantal vertoningen per bezoek met 10 procent is gestegen. Forbes 'PWA zag ook de lengte van gebruikerssessies verdubbelen.
  • Twitter Lite zag een toename van 65 procent in pagina's per sessie, met een enorme toename van 75 procent in tweets. Het is ook interactief 'in minder dan 5 seconden via 3G'.
  • Alibaba zag een stijging van 76 procent in mobiele conversies.

PWA's zijn nog niet mainstream. Maar met de enorme reeks voordelen die ze bieden, zoals ruimtebesparing op je apparaat, zul je er in de toekomst meer over horen.

Deel Deel Tweeten E-mail Een beginnershandleiding voor het animeren van spraak

Het animeren van spraak kan een uitdaging zijn. Als u klaar bent om dialoog aan uw project toe te voegen, zullen we het proces voor u opsplitsen.

Lees volgende Gerelateerde onderwerpen Over de auteur Gavin Phillips(945 artikelen gepubliceerd)

Gavin is de Junior Editor voor Windows en Technology Explained, levert regelmatig bijdragen aan de Really Useful Podcast en recenseert regelmatig producten. Hij heeft een BA (Hons) Contemporary Writing met Digital Art Practices geplunderd uit de heuvels van Devon, evenals meer dan tien jaar professionele schrijfervaring. Hij geniet van overvloedige hoeveelheden thee, bordspellen en voetbal.

Meer van Gavin Phillips

Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!

Klik hier om je te abonneren