Innhold
- Stigningen av PWA
- PWAer i aksjon i dag
- Installasjon
- Frakoblet og øyeblikkelig lansering
- Førsteklasses opplevelse
- App-butikker
- Plattformintegrasjon
- Design og UX utfordringer
- Året for PWAer
Akkurat som responsivt webdesign lukket gapet mellom stasjonære og mobile nettsteder for noen år siden, lukker progressive webappteknikker for øyeblikket gapet mellom nettet og appverdenen. Med brukeropplevelser fra stasjonære til mobile apper som raskt konvergerer, virker det som om et mye slankere og mer effektivt internett utvikler seg - selv om det uunngåelig ikke uten noen vesentlige endringer i den underliggende genetiske koden.
- Hvordan lage en Progressiv Web-app
Det er tydeligvis noen betydelige selektive press som driver dette. Først og fremst er det ikke nødvendigvis en effektiv bruk av ressurser å opprette opprinnelige apper for hver nisje: brukere får hundrevis av store apper som kaster bort båndbredde og verdifull diskplass, og selskaper bruker mye penger på å lage apper bare for at de skal bli forlatt. etter deres første versjoner. Og de fleste av disse appene er bare drevet av nettinnhold: informasjon som kommer fra webtjenester eller et innholdsstyringssystem.
Definisjonen av en progressiv webapp er ikke konkret. En PWA er bare en webapp som bruker flere nye APIer og evner i webplattformen ved hjelp av progressiv forbedring for å tilby en app-lignende opplevelse på hver plattform med samme kodebase. Det er mer et sett med beste praksis og API-bruk som skaper en utmerket applignende opplevelse for brukerne dine, så det er ikke slik at du har eller ikke har en PWA; det er mer som nettstedet ditt er mer eller mindre PWA.
Er du i ferd med å begynne å bygge et nytt nettsted? Prøv å bruke en nettstedsbygger. Og sørg for at du får støtten du trenger fra en anstendig webhotelltjeneste også. Eller for noe litt annet, se vår guide til den beste skylagringen.
Stigningen av PWA
Mens navnet PWA ble laget i 2015 i artikkelen Escaping Tabs Without Losing our Soul av Alex Russell som jobbet hos Google for Chrome-teamet, begynte reisen deres ikke der. Vi pleide å ha HTML-applikasjoner (HTAer), som ble opprettet av Microsoft i 1999, sammen med mange andre webapp-plattformer fra Nokia, BlackBerry og andre selskaper. Så, i 2007, presenterte Steve Jobs det som den gang var den eneste måten å lage apper for den opprinnelige iPhone: PWA, om enn med et annet navn. Chrome startet derfra, forbedret API-ene noen år senere og oppfant PWA-navnet.
Med så mange tidligere mislykkede erfaringer som prøver å bringe nettinnhold til appens verden, hvorfor tror vi det vil fungere nå? Vel, først og fremst, er det ned til selskapene som nå jobber og markedsfører teknologiene bak PWA-er, som Microsoft, Google, Apple og Mozilla, for å nevne noen få. Også ytelsen til webplattformen nådde et punkt der det ikke er noen opplevd forskjell når du sammenligner en veldesignet PWA med en innfødt app. Disse forholdene har aldri eksistert før, og det er en grunn til at nettsamfunnet har bestemt at tiden er inne for PWA.
PWAer i aksjon i dag
I dag er PWA-er fullt funksjonelle og installerbare på:
- Android med de fleste nettlesere, med Chrome som gir den beste opplevelsen
- iOS med Safari
- Chromebook
- Windows 10 fra Microsoft Store
- Funksjonstelefoner med KaiOS - en gaffel fra Firefox OS - er for tiden tilgjengelig for millioner av brukere, hovedsakelig i India
Støtte kommer også til macOS, Windows og Linux gjennom Chrome senere i år. Den er tilgjengelig i dag som et eksperimentelt flagg 'Desktop PWA' hvis du vil prøve det nå. Installasjon på Windows on Edge uten bruk av butikken kommer også senere, selv om ingen spesifikk tidsramme er definert.
Hvis du leser listen på nytt, kan du se at hver plattform har eller er i ferd med å ha støtte for fullt installerbare PWAer de neste månedene. Og fordi en PWA bare er et nettsted med funksjoner på toppen som bare aktiveres i kompatible nettlesere, kan vi til og med si at den er kompatibel med alle nettlesere fra grunnleggende funksjonalitet.
PWA-er genereres for øyeblikket fra de fleste CLI-er for forskjellige rammer, inkludert Angular 6+ CLI, React Create App, PWA Starter Kit fra Polymer og Preact CLI. Endelig kom Ionic Framework-teamet opp med ideen om Capacitor, en åpen kildekode Cordova-erstatning som gjør innfødte PWAer mulig i hver appbutikk.
Installasjon
En av de kritiske sidene ved en PWA er installasjonen av appen. Denne prosessen utføres i to valgfrie trinn: nedlasting og lagring av appens filer offline og ikoninstallasjonen i operativsystemet. Fordi begge trinnene er valgfrie, kan du tilby en offline opplevelse i nettleseren, eller du kan tilby et ikon uten offline installasjon. Men en ekte PWA bør inneholde begge deler: den må serveres med TLS under HTTPS, og brukeren vil bestemme om de vil bruke den i nettleseren eller i sitt eget installerte ikon.
Frakoblet og øyeblikkelig lansering
Hjernen til en PWA er tjenestearbeideren, en JavaScript-fil installert på brukerens enhet som er ansvarlig for å laste ned appens filer, lagre dem i en cache og senere servere dem ved behov. Når tjenestearbeideren er installert, fungerer den som en nettverksproxy for alle ressurser som webappen trenger: den kan bestemme seg for å hente den fra nettverket eller levere den fra den lokale hurtigbufferen, noe som gjør appen tilgjengelig offline og også tilgjengelig på bare et par millisekunder, selv om brukeren har forbindelse, og etterligner en lansering av en innfødt app.
For å installere en tjenestearbeider må HTML-dokumentet inneholde noe sånt som:
hvis (’serviceWorker’ i navigator) navigator.serviceWorker.register ("sw.js");
Dette vil installere filen "sw.js" på brukernes enheter for den gjeldende mappen i det nåværende domenet - et konsept kjent som omfanget. Etter at den er installert, vil de neste besøkene til en hvilken som helst URL innenfor dens omfang administreres av den tjenestearbeideren.
La oss si at vi har en PWA med fire filer: index.html, app.js, app.css og logo.png. Det første er å installere disse filene i hurtigbufferen i sw.js-filen.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; selv. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). deretter (cache => cache.addAll (ressurser)));});
Så for at PWA alltid skal serveres fra hurtigbufferen, må vi lytte etter hentningshendelsen i tjenestearbeideren og bestemme hurtigbuffereglene som skal brukes, for eksempel hurtigbuffer med følgende tekstutdrag.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). deretter (res => res);
I dette tilfellet vil motoren hente filene fra hurtigbufferen hver gang brukeren får tilgang til PWA (både fra en nettleser eller fra et installert ikon). En fordel med PWAs versus native apps er at enheter ikke trenger å laste ned alle filene igjen når det er en endring, bare filen som har endret seg med en gjennomsiktig prosess. Vi kan fortsatt laste ned deler av appen på forespørsel.
Men utfordringen er hvordan vet du hvilke filer som ble oppdatert på serveren, slik at du kan erstatte dem i hurtigbufferen? Hvis du ikke vil skrive en tjenestearbeider på lavt nivå for å administrere dette, kan du bruke open source-biblioteket Workbox, som vil hjelpe deg med genereringen av servicearbeideren og ressursmanifestet for å oppdatere den installerte pakken.
Vær oppmerksom på at filene til PWA vil bli slettet hvis det er lagringstrykk på enheten, med mindre du ber om vedvarende lagring hvis tilgjengelig:
hvis ('lagring' i navigator && 'vedvarer' i navigator.storage) navigator.storage.persist ();
På Chrome og de fleste Android-nettlesere kan ikke appen din bruke mer enn fem prosent av den tilgjengelige plassen. på iOS er det bare 50 MB (nær 50 MB) per vert; i Edge er det variabelt i henhold til total minnestørrelse, og i Windows Store er det ubegrenset.
Førsteklasses opplevelse
Vi har hjernen, og nå er det tid for hjertet: manifestasjonen av nettappen. Hensikten med å gjøre et nettsted til en PWA er ikke bare å sikre at det er tilgjengelig raskt eller uten nett, men også å gjøre det mulig å ha sitt eget ikon i operativsystemet og tilby en helt frittstående opplevelse som alle andre installerte apper.
Manifestet er en JSON-fil som definerer metadata for PWA som brukes av en nettleser eller en appbutikk for å definere installasjonsatferden.
Filen definerer flere egenskaper som metadata for din PWA. Hvert operativsystem vil lese disse egenskapene og prøve sitt beste for å matche den opplevelsen du foretrekker. For eksempel vil Android lese 'display: standalone' og skape en normal appopplevelse. Med 'display: minimal-ui' vil det skape en opplevelse med en synlig URL og TLS-sertifikat - nyttig for sikkerhetssensitive apper. Med 'display: fullscreen' skaper det fullstendige apper uten statuslinje eller synlig tilbakeknapp. Et sett med ikoner og farger definerer hvordan sprutskjermer eller tittellinjer vil se ut for appvinduet.
Det er noen manifestgeneratorer, for eksempel Web App Manifest Generator eller PWA Builder som også vil endre størrelsen på ikonet for deg i forskjellige oppløsninger hvis du gir en høyoppløselig (minimum 512 piksler).
Når du har koblet manifestfilen i HTML-dokumentet ditt, vil brukere kunne installere appen ved hjelp av forskjellige teknikker, avhengig av nettleseren, vanligvis kalt Legg til på startskjermen, Installer eller bare Legg til. Hvis PWA-en din kan gjennomsøkes av Bing, vil Microsoft automatisk legge den til i Microsoft Store, slik at Windows 10-brukere kan installere den derfra.
På noen operativsystemer vil din PWA ha muligheten til å fange lenker. Dette betyr at etter at brukeren har installert appen, vil en hvilken som helst URL innenfor omfanget av manifestet ditt åpnes innenfor appens grenser og ikke i nettleseren, uansett om den vises i nettleseren eller andre apper som WhatsApp, Facebook eller en e-post.
Hvis du oppfyller PWA-kravene som vi definerer her, vil noen plattformer tilby omgivelsesmerke (et lite ikon vanligvis i URL-linjen som angir at nettet kan installeres) eller et webapp-banner. Hvis du foretrekker det, kan du også legge til din egen tilpassede installasjonsknapp ved å bruke følgende kodebit:
window.addEventListener ("beforeinstallpr ompt", funksjon (e) {e.prompt (); // vil vise installasjons native prompt))
Hvis PWA er installert, vil hendelsen 'appinstallert' bli avfyrt på vindusobjektet slik at du kan spore statistikk som lytter etter den.
App-butikker
En av de største fordelene ved å installere fra en nettleser, er å kunne unngå godkjenningsprosessen for app-butikken eller å måtte betale for å være utgiver. Det kommer med åpenbare fordeler, for eksempel øyeblikkelig publisering, oppretting av private apper for selskaper eller apper som ikke skal aksepteres i butikkene.
Men noen selskaper ønsker å være i butikken. Per i dag er de eneste butikkene som offisielt godtar PWA, Windows Store og kaiOS Store. Heldigvis, med verktøy som kondensator (for tiden i Alpha) eller PWA Builder, kan vi også opprette og signere innfødte pakker for andre plattformer.
Det er noen PWAer som allerede er publisert i Google Play Store, for eksempel Twitter Lite og Google Maps Go, for tiden under tilpassede implementeringer. Chrome vil tilby en løsning fra Chrome 68 via pålitelige nettaktiviteter. Fra det punktet vil vi kunne lage en Android-pakke (APK) med en bærerakett til vår PWA og laste den opp til butikken. For Microsoft Store på Windows 10, hjelper nettstedet PWA Builder for øyeblikket med genereringen av en APPX Windows 10-pakke. Ved hjelp av en webvisning kan du kanskje opprette en iOS-app manuelt for App Store, men vær ekstremt forsiktig med butikkens regler.
Plattformintegrasjon
Ved å implementere progressive forbedringsteknikker vil du kunne bruke mange funksjoner, inkludert push-varsler, tilgang til kamera og mikrofon, geolokalisering, sensorer, betalinger, delingsdialoger og offline lagring. Alle disse funksjonene kjører direkte i nettleserens sikkerhetsmodell, inkludert tillatelsesdialoger.
Vi kan også kommunisere med andre apper gjennom URI-ordninger, for eksempel å åpne Twitter, YouTube eller WhatsApp gjennom deres URL-er eller tilpassede URI-er, for eksempel whatsapp: //.
Til slutt, når vi oppretter innfødte PWAer som blir publisert til butikken ved hjelp av kondensator eller til Microsoft Store, vil vi kunne bygge bro til native API-er som gjør det mulig for oss å utføre praktisk talt alle innfødte koder. Denne integrasjonen med Windows 10 inkluderer maskinvaretilgang, men også integrasjon med operativsystemet, og tilbyr alternativer som Pin to Start. For eksempel lar Twitter PWA deg feste enhver bruker til startskjermen.
Design og UX utfordringer
Å designe PWA har unike utfordringer, så det er viktig å bruke litt tid på å undersøke, teste så mye som mulig og vurdere følgende:
- Brukere vil forvente app-lignende opplevelser.
- Installasjonsprosessen er fortsatt ny, så vi må gjøre ekstra for å forklare hvordan vi installerer appen.
- Oppdatering av appen i bakgrunnen uten brukerinteraksjon er flott, men det gir også noen utfordringer for UX.
- På skrivebordet tar responsiv webdesign en ny grense da PWA-vinduer kan være små, mye mindre enn et mobilt visningsområde. Dette betyr at vi må lage spesifikke visninger eller små widgets for dette formatet, slik vi ser i Chrome OS i dag.
- Push-varsler skal bare gi verdi til brukeren, så lær deg å spørre i rett øyeblikk og ikke kast bort muligheten til å sende meldinger som ikke er nyttige eller interessante.
- Vi må designe for ytelse på nettet og for tilgang uten nett.
Året for PWAer
Med tillegg av iOS og desktop i år, er PWAer overalt i dag. Men vi må huske at reisen deres akkurat har startet, så forvent hyppige endringer og sørg for å holde deg oppdatert med de nyeste teknikkene og ideene for å levere en utmerket brukeropplevelse mens plattformen utvikler seg.
Denne artikkelen ble opprinnelig publisert i utgave 308 av nett, verdens mest solgte magasin for webdesignere og utviklere. Kjøp utgave 308 her eller abonner her.
