Inhoud
- De beklimming van PWA's
- PWA's vandaag in actie
- Installatie
- Offline en onmiddellijke lancering
- Eersteklas ervaring
- App-winkels
- Platform integratie
- Ontwerp- en UX-uitdagingen
- Het jaar van PWA's
Net zoals responsive webdesign een paar jaar geleden de kloof tussen desktop- en mobiele sites overbrugde, dichten progressieve webapp-technieken momenteel de kloof tussen het web en de app-wereld. Nu gebruikerservaringen van desktop- naar mobiele apps snel convergeren, lijkt het alsof er een veel gestroomlijnder en efficiënter internet aan het evolueren is - hoewel onvermijdelijk niet zonder enkele significante veranderingen in de onderliggende genetische code.
- Hoe u een progressieve webapp bouwt
Blijkbaar is er een aanzienlijke selectiedruk die hiervoor zorgt. Allereerst is het maken van native apps voor elke niche niet per se een efficiënt gebruik van bronnen: gebruikers eindigen met honderden grote apps die bandbreedte en waardevolle schijfruimte verspillen en bedrijven besteden veel geld aan het maken van apps die alleen voor hen in de steek kunnen worden gelaten na hun eerste versies. En de meeste van deze apps worden gewoon aangestuurd door webcontent: informatie die afkomstig is van webservices of een contentbeheersysteem.
De definitie van een progressieve webapp is niet concreet. Een PWA is gewoon een web-app die verschillende nieuwe API's en mogelijkheden op het webplatform gebruikt met behulp van progressieve verbeteringen om een app-achtige ervaring te bieden op elk platform met dezelfde codebasis. Het is meer een reeks best practices en API-gebruik die een uitstekende app-achtige ervaring voor uw gebruikers creëren, dus het is niet alsof u een PWA heeft of niet heeft; het is meer alsof uw site min of meer PWA is.
Staat u op het punt om een nieuwe site te bouwen? Probeer een websitebouwer te gebruiken. En zorg ervoor dat u ook de ondersteuning krijgt die u nodig heeft van een fatsoenlijke webhostingservice. Of raadpleeg voor iets anders onze gids voor de beste cloudopslag.
De beklimming van PWA's
Hoewel de naam PWA in 2015 werd bedacht in het artikel Escaping Tabs Without Losing our Soul door Alex Russell die bij Google werkte voor het Chrome-team, begon hun reis daar niet echt. Vroeger hadden we HTML-applicaties (HTA's), die in 1999 door Microsoft werden gemaakt, samen met vele andere webapp-platforms van Nokia, BlackBerry en andere bedrijven. Toen, in 2007, presenteerde Steve Jobs wat destijds de enige manier was om apps voor de originele iPhone te maken: PWA's, zij het met een andere naam. Chrome is vanaf daar begonnen, heeft de API's een paar jaar later verbeterd en de naam PWA uitgevonden.
Met zoveel eerdere mislukte ervaringen bij het introduceren van webinhoud in de wereld van apps, waarom denken we dat het nu zal werken? In de eerste plaats is het aan de bedrijven die nu werken en de technologieën achter PWA's promoten, zoals Microsoft, Google, Apple en Mozilla, om er maar een paar te noemen. Ook bereikten de prestaties van het webplatform een punt waarop er geen verschil meer is wanneer je een goed ontworpen PWA vergelijkt met een native app. Die voorwaarden hebben nooit eerder bestaan en dat is een van de redenen waarom de webgemeenschap heeft besloten dat het tijd is voor PWA's.
PWA's vandaag in actie
Tegenwoordig zijn PWA's volledig functioneel en installeerbaar op:
- Android met de meeste browsers, waarbij Chrome de beste ervaring biedt
- iOS met Safari
- Chromebooks
- Windows 10 uit de Microsoft Store
- Feature-telefoons met KaiOS - een vork van Firefox OS - die momenteel beschikbaar zijn voor miljoenen gebruikers, voornamelijk in India
Later dit jaar komt er ook ondersteuning voor macOS, Windows en Linux via Chrome. Het is vandaag beschikbaar als een experimentele vlag ’Desktop PWA’ als u het nu wilt proberen. Installatie op Windows on Edge zonder het gebruik van de winkel komt ook later, hoewel er geen specifiek tijdsbestek is gedefinieerd.
Als u de lijst opnieuw leest, kunt u zien dat elk platform ondersteuning heeft of binnenkort zal krijgen voor volledig installeerbare PWA's in de komende maanden. En omdat een PWA slechts een website is met functies bovenaan die alleen in compatibele browsers worden geactiveerd, kunnen we zelfs vanuit de basisfunctionaliteit zeggen dat deze compatibel is met alle browsers.
Ook worden momenteel PWA's gegenereerd op basis van de meeste CLI's voor verschillende frameworks, waaronder de Angular 6+ CLI, React Create App, PWA Starter Kit van Polymer en Preact CLI. Ten slotte kwam het Ionic Framework-team op het idee van Capacitor, een open-source Cordova-vervanging die native PWA's mogelijk maakt in elke app store.
Installatie
Een van de kritische aspecten van een PWA is de installatie van de app. Dit proces verloopt in twee optionele stappen: het downloaden en offline opslaan van de bestanden van de app en de pictograminstallatie in het besturingssysteem. Omdat beide stappen optioneel zijn, kunt u een offline ervaring in de browser aanbieden of u kunt een pictogram aanbieden zonder offline installatie. Maar een echte PWA moet beide bevatten: het moet worden bediend met TLS onder HTTPS en de gebruiker zal beslissen of ze het in de browser of binnen zijn eigen geïnstalleerde pictogram zullen gebruiken.
Offline en onmiddellijke lancering
Het brein van een PWA is de servicemedewerker, een JavaScript-bestand dat op het apparaat van de gebruiker is geïnstalleerd en verantwoordelijk is voor het downloaden van de bestanden van de app, deze opslaat in een cache en ze later indien nodig weergeeft. Nadat de servicemedewerker is geïnstalleerd, fungeert deze als een netwerkproxy voor elke bron die de web-app nodig heeft: hij kan beslissen om deze op te halen van het netwerk of te bezorgen vanuit de lokale cache, waardoor de app offline beschikbaar is en ook beschikbaar in slechts een paar milliseconden, zelfs als de gebruiker verbinding heeft, waardoor een native app-lancering wordt geëmuleerd.
Om een servicemedewerker te installeren, moet uw HTML-document iets bevatten als:
if (’serviceWorker’ in navigator) navigator.serviceWorker.register ("sw.js");
Dat installeert het bestand "sw.js" op de apparaten van gebruikers voor de huidige map in het huidige domein - een concept dat bekend staat als de scope. Nadat het is geïnstalleerd, worden de volgende bezoeken aan een URL binnen het bereik beheerd door die servicemedewerker.
Laten we zeggen dat we een PWA hebben met vier bestanden: index.html, app.js, app.css en logo.png. Het eerste is om die bestanden in de cache in het sw.js-bestand te installeren.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; zelf. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). dan (cache => cache.addAll (resources)));});
Om de PWA altijd vanuit de cache te laten bedienen, moeten we luisteren naar de ophaalgebeurtenis binnen de servicemedewerker en beslissen welk cachebeleid moet worden gebruikt, zoals eerst de cache met het volgende fragment.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). then (res => res);
In dit geval haalt de engine elke keer dat de gebruiker de PWA opent (zowel vanuit een browser als via een geïnstalleerd pictogram) de bestanden uit de cache. Een voordeel van PWA's ten opzichte van native apps is dat apparaten niet alle bestanden opnieuw hoeven te downloaden wanneer er een wijziging is, alleen het bestand dat is gewijzigd met een transparant proces. We kunnen ook nog steeds delen van de app downloaden op aanvraag.
Maar de uitdaging is: hoe weet u welke bestanden op de server zijn bijgewerkt, zodat u ze in de cache kunt vervangen? Als u geen low-level servicemedewerker wilt schrijven om dit te beheren, kunt u de open-sourcebibliotheek Workbox gebruiken, die u zal helpen bij het genereren van de servicemedewerker en het bronnenmanifest om het geïnstalleerde pakket bij te werken.
Houd er rekening mee dat de bestanden van uw PWA worden verwijderd als er opslagdruk op het apparaat is, tenzij u permanente opslag aanvraagt, indien beschikbaar:
if (’opslag’ in navigator && ’persist’ in navigator.storage) navigator.storage.persist ();
In Chrome en de meeste Android-browsers kan uw app niet meer dan vijf procent van de beschikbare ruimte gebruiken; op iOS is het slechts 50 MB (bijna 50 MB) per host; in Edge is het variabel op basis van de totale geheugengrootte en in Windows Store is het onbeperkt.
Eersteklas ervaring
We hebben het brein en nu is het tijd voor het hart: het webapp-manifest. Het doel van het omzetten van een website in een PWA is niet alleen om ervoor te zorgen dat deze snel of offline beschikbaar is, maar ook om ervoor te zorgen dat deze een eigen pictogram in het besturingssysteem heeft en een volledig zelfstandige ervaring biedt zoals elke andere geïnstalleerde app.
Het manifest is een JSON-bestand dat metadata definieert voor de PWA die door een browser of een app store wordt gebruikt om het installatiegedrag te definiëren.
Het bestand definieert verschillende eigenschappen als metagegevens voor uw PWA. Elk besturingssysteem zal deze eigenschappen lezen en zijn best doen om te passen bij de ervaring die u verkiest. Android leest bijvoorbeeld ’display: standalone’ en zorgt voor een normale app-ervaring. Met ’display: minimal-ui’ creëert het een ervaring met een zichtbare URL en TLS-certificaat - handig voor beveiligingsgevoelige apps. Met ’weergave: volledig scherm’ creëert het volledig meeslepende apps zonder statusbalk of zichtbare terugknop. Een set pictogrammen en kleuren bepaalt hoe de startschermen of titelbalken eruitzien voor het venster van uw app.
Er zijn enkele manifestgeneratoren, zoals Web App Manifest Generator of PWA Builder die ook het formaat van het pictogram voor u in verschillende resoluties wijzigen als u een hoge resolutie opgeeft (minimaal 512 pixels).
Wanneer u het manifestbestand in uw HTML-document heeft gekoppeld, kunnen gebruikers de app met verschillende technieken installeren, afhankelijk van de browser, meestal genaamd Toevoegen aan startscherm, Installeren of gewoon Toevoegen. Als uw PWA door Bing kan worden gecrawld, voegt Microsoft deze automatisch toe aan de Microsoft Store, zodat Windows 10-gebruikers deze vanaf daar kunnen installeren.
Op sommige besturingssystemen heeft uw PWA de mogelijkheid om koppelingen vast te leggen. Dit betekent dat nadat de gebruiker de app heeft geïnstalleerd, elke URL binnen het bereik van uw manifest wordt geopend binnen de grenzen van uw app en niet in de browser, ongeacht of deze in de browser of andere apps zoals WhatsApp, Facebook verschijnt. of een e-mail.
Als u voldoet aan de PWA-vereisten die we hier definiëren, bieden sommige platforms ambient badging (meestal een klein pictogram in de URL-balk dat aangeeft dat het web kan worden geïnstalleerd) of een webapp-banner. Als u wilt, kunt u ook uw eigen aangepaste Installatieknop toevoegen met behulp van het volgende fragment:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // toont native installatie prompt})
Als de PWA is geïnstalleerd, wordt de gebeurtenis ‘appinstalled’ geactiveerd op het vensterobject, zodat u de statistieken kunt volgen die ernaar luisteren.
App-winkels
Een van de belangrijkste voordelen van installeren vanuit een browser is dat je het goedkeuringsproces van de app-store kunt vermijden of dat je moet betalen om uitgever te worden. Dat brengt duidelijke voordelen met zich mee, zoals instant publishing, het maken van privé-apps voor bedrijven of apps die niet in de winkels zouden moeten worden geaccepteerd.
Maar sommige bedrijven willen wel in de winkel. Vanaf vandaag zijn de enige winkels die officieel PWA's accepteren de Windows Store en de kaiOS Store. Gelukkig kunnen we met tools zoals Capacitor (momenteel in Alpha) of PWA Builder ook native pakketten voor andere platforms maken en ondertekenen.
Er zijn al enkele PWA's gepubliceerd in de Google Play Store, zoals Twitter Lite en Google Maps Go, momenteel onder aangepaste implementaties. Chrome biedt een oplossing van Chrome 68 via vertrouwde webactiviteiten. Vanaf dat moment kunnen we een Android-pakket (APK) maken met een launcher naar onze PWA en deze uploaden naar de winkel. Voor de Microsoft Store op Windows 10 helpt de site PWA Builder momenteel met het genereren van een APPX Windows 10-pakket. Als u een webweergave gebruikt, kunt u wellicht handmatig een iOS-app voor de App Store maken, maar wees uiterst voorzichtig met de regels van de winkel.
Platform integratie
Door progressieve verbeteringstechnieken te implementeren, kunt u veel functies gebruiken, waaronder pushmeldingen, camera- en microfoontoegang, geolocatie, sensoren, betalingen, dialoogvensters voor delen en offline opslag. Al deze functies werken rechtstreeks binnen het beveiligingsmodel van de browser, inclusief toestemmingsdialogen.
We kunnen ook communiceren met andere apps via URI-schema's, zoals het openen van Twitter, YouTube of WhatsApp via hun URL's of aangepaste URI's, zoals whatsapp: //.
Ten slotte kunnen we bij het maken van native PWA's die naar de winkel worden gepubliceerd met behulp van Capacitor of naar de Microsoft Store overbruggen naar native API's waarmee we vrijwel elke native code kunnen uitvoeren. Die integratie met Windows 10 omvat hardwaretoegang maar ook integratie met het besturingssysteem, met opties als Pin to Start. Met de Twitter PWA kunt u bijvoorbeeld elke gebruiker vastzetten op uw startscherm.
Ontwerp- en UX-uitdagingen
Het ontwerpen van PWA's heeft unieke uitdagingen, dus het is belangrijk om wat tijd te besteden aan onderzoek, zoveel mogelijk testen en het volgende in overweging te nemen:
- Gebruikers verwachten app-achtige ervaringen.
- Het installatieproces is nog nieuw, dus we moeten extra moeite doen om uit te leggen hoe we de app moeten installeren.
- Het updaten van de app op de achtergrond zonder gebruikersinteractie is geweldig, maar het voegt ook wat uitdagingen toe voor de UX.
- Op de desktop neemt responsief webontwerp een nieuwe grens, omdat PWA-vensters klein kunnen zijn, veel kleiner dan een mobiele viewport. Dit betekent dat we specifieke weergaven of kleine widgets voor dit formaat moeten maken, zoals we tegenwoordig in Chrome OS zien.
- Pushmeldingen zouden alleen waarde moeten toevoegen aan de gebruiker, dus leer om op het juiste moment te vragen en verspil de kans niet om berichten te sturen die niet nuttig of interessant zijn.
- We moeten ontwerpen voor webprestaties en voor offline toegang.
Het jaar van PWA's
Met de toevoeging van iOS en desktop dit jaar zijn PWA's tegenwoordig overal. Maar we moeten niet vergeten dat hun reis net begint, dus verwacht regelmatige veranderingen en zorg ervoor dat u op de hoogte blijft van de nieuwste technieken en ideeën om een uitstekende gebruikerservaring te bieden terwijl het platform evolueert.
Dit artikel is oorspronkelijk gepubliceerd in nummer 308 van netto-, 's werelds best verkochte tijdschrift voor webontwerpers en -ontwikkelaars. Koop nummer 308 hier of schrijf je hier in.
