Indhold
- Stigningen af PWA'er
- PWA'er er i aktion i dag
- Installation
- Offline og øjeblikkelig lancering
- Første klasses oplevelse
- App-butikker
- Platform integration
- Design og UX udfordringer
- Året for PWA'er
Ligesom responsivt webdesign lukkede kløften mellem desktop- og mobilwebsites for et par år siden, lukker progressive webappteknikker i øjeblikket kløften mellem internettet og appverdenen. Da brugeroplevelser fra desktop til mobile apps hurtigt konvergerer, ser det ud til, at et meget slankere og mere effektivt internet udvikler sig - selv om det uundgåeligt ikke uden nogle væsentlige ændringer i dets underliggende genetiske kode.
- Sådan oprettes en progressiv webapp
Der er åbenbart nogle betydelige selektive pres, der driver dette. Først og fremmest er oprettelse af indfødte apps til hver niche ikke nødvendigvis en effektiv ressourceudnyttelse: brugere ender med hundreder af store apps, der spilder båndbredde og værdifuld diskplads, og virksomheder bruger en masse penge på at skabe apps, kun for at de skal opgives. efter deres første versioner. Og de fleste af disse apps er bare drevet af webindhold: oplysninger, der kommer fra webtjenester eller et indholdsstyringssystem.
Definitionen af en progressiv webapp er ikke konkret. En PWA er bare en webapp, der bruger flere nye API'er og evner i webplatformen ved hjælp af progressiv forbedring for at tilbyde en app-lignende oplevelse på hver platform med den samme kodebase. Det er mere et sæt bedste praksis og API-brug, der skaber en fremragende app-lignende oplevelse for dine brugere, så det er ikke som om du har eller ikke har en PWA; det er mere som dit websted er mere eller mindre PWA.
Er du ved at begynde at opbygge et nyt sted? Prøv at bruge en webstedsbygger. Og sørg for, at du også får den support, du har brug for, fra en anstændig webhostingtjeneste. Eller for noget lidt andet, se vores guide til den bedste skylagring.
Stigningen af PWA'er
Mens navnet PWA blev opfundet i 2015 i artiklen Escaping Tabs Without Losing our Soul af Alex Russell, der arbejdede hos Google for Chrome-teamet, startede deres rejse faktisk ikke der. Vi havde tidligere HTML-applikationer (HTA'er), som blev oprettet af Microsoft i 1999 sammen med mange andre webappsplatforme fra Nokia, BlackBerry og andre virksomheder. Derefter præsenterede Steve Jobs i 2007, hvad der på det tidspunkt var den eneste måde at oprette apps til den originale iPhone: PWA'er, omend med et andet navn. Chrome startede derfra, forbedrede API'erne et par år senere og opfandt PWA-navnet.
Da så mange tidligere mislykkede oplevelser forsøgte at bringe webindhold til en verden af apps, hvorfor tror vi, det fungerer nu? Nå primært er det ned til de virksomheder, der nu arbejder og promoverer teknologierne bag PWA'er, såsom Microsoft, Google, Apple og Mozilla, for blot at nævne nogle få. Desuden nåede webplatformens ydeevne et punkt, hvor der ikke er nogen opfattet forskel, når du sammenligner en veldesignet PWA med en native app. Disse forhold har aldrig eksisteret før, og det er en grund til, at websamfundet har besluttet, at tiden er kommet for PWA'er.
PWA'er er i aktion i dag
I dag er PWA'er fuldt funktionelle og kan installeres på:
- Android med de fleste browsere, hvor Chrome giver den bedste oplevelse
- iOS med Safari
- Chromebooks
- Windows 10 fra Microsoft Store
- Funktionstelefoner med KaiOS - en fork fra Firefox OS - er i øjeblikket tilgængelig for millioner af brugere, hovedsageligt i Indien
Support kommer også til macOS, Windows og Linux via Chrome senere på året. Den er tilgængelig i dag som et eksperimentelt flag 'Desktop PWA', hvis du vil prøve det nu. Installation på Windows on Edge uden brug af butikken kommer også senere, selvom der ikke er defineret nogen specifik tidsramme.
Hvis du læser listen igen, kan du se, at hver platform har eller er ved at have support til fuldt installerbare PWA'er i de følgende måneder. Og fordi en PWA bare er et websted med funktioner ovenpå, der kun aktiveres i kompatible browsere, kan vi endda sige, at det er kompatibelt med alle browsere fra dets grundlæggende funktionalitet.
Der genereres i øjeblikket også PWA'er fra de fleste CLI'er til forskellige rammer, herunder Angular 6+ CLI, React Create App, PWA Starter Kit fra Polymer og Preact CLI. Endelig kom Ionic Framework-teamet med ideen om Capacitor, en open source-udskiftning af Cordova, der gør indfødte PWA'er mulige i hver appbutik.
Installation
Et af de kritiske aspekter ved en PWA er installationen af appen. Denne proces udføres i to valgfri trin: download og offline lagring af appens filer og ikoninstallationen i operativsystemet. Da begge trin er valgfri, kan du tilbyde en offline oplevelse i browseren, eller du kan tilbyde et ikon uden offline installation. Men en ægte PWA skal indeholde begge dele: den skal serveres med TLS under HTTPS, og brugeren vil beslutte, om de vil bruge den i browseren eller inden for sit eget installerede ikon.
Offline og øjeblikkelig lancering
Hjernen i en PWA er servicearbejderen, en JavaScript-fil installeret på brugerens enhed, der er ansvarlig for at downloade appens filer, gemme dem i en cache og senere betjene dem efter behov. Når servicearbejderen er installeret, fungerer den som en netværksproxy for hver ressource, som webappen har brug for: den kan beslutte at hente den fra netværket eller levere den fra den lokale cache, hvilket gør appen tilgængelig offline og også tilgængelig på bare et par millisekunder, selvom brugeren har forbindelse, efterligner en oprindelig appstart.
For at installere en servicearbejder skal dit HTML-dokument indeholde noget som:
hvis (’serviceWorker’ i navigator) navigator.serviceWorker.register ("sw.js");
Det vil installere filen "sw.js" på brugernes enheder til den aktuelle mappe i det aktuelle domæne - et koncept kendt som omfanget. Når den er installeret, administreres de næste besøg på enhver URL inden for dens anvendelsesområde af den pågældende servicearbejder.
Lad os sige, at vi har en PWA med fire filer: index.html, app.js, app.css og logo.png. Den første ting er at installere disse filer i cachen i sw.js-filen.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; selv. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). derefter (cache => cache.addAll (ressourcer)));});
Derefter for at PWA altid skal serveres fra cachen, er vi nødt til at lytte til hentningshændelsen inden for servicearbejderen og beslutte cache-politikken, der skal bruges, såsom cache først med følgende uddrag.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). derefter (res => res);
I dette tilfælde vil motoren hente filerne fra cachen hver gang brugeren får adgang til PWA (både fra en browser eller fra et installeret ikon). En fordel ved PWA'er i forhold til native apps er, at enheder ikke behøver at downloade alle filerne igen, når der er en ændring, kun den fil, der har ændret sig med en gennemsigtig proces. Vi kan også stadig downloade dele af appen efter behov.
Men udfordringen er, hvordan ved du, hvilke filer der blev opdateret på serveren, så du kan erstatte dem i cachen? Hvis du ikke ønsker at skrive en servicearbejder på lavt niveau til at styre dette, kan du bruge open source-biblioteket Workbox, som hjælper dig med genereringen af servicearbejderen og ressourcemanifestet til at opdatere den installerede pakke.
Vær opmærksom på, at filerne i din PWA slettes, hvis der er lagertryk på enheden, medmindre du beder om vedvarende lagring, hvis den er tilgængelig:
hvis ('lagring' i navigator && 'vedvarer' i navigator.storage) navigator.storage.persist ();
På Chrome og de fleste Android-browsere kan din app ikke bruge mere end fem procent af den tilgængelige plads; på iOS er det kun 50 MB (nær 50 MB) pr. vært; i Edge er det variabelt i henhold til den samlede hukommelsesstørrelse, og i Windows Store er det ubegrænset.
Første klasses oplevelse
Vi har hjernen, og nu er det tid for hjertet: webappens manifest. Formålet med at omdanne et websted til en PWA er ikke kun at sikre, at det er tilgængeligt hurtigt eller mens det er offline, men også at gøre det muligt for det at have sit eget ikon i operativsystemet og tilbyde en helt enkeltstående oplevelse som enhver anden installeret app.
Manifestet er en JSON-fil, der definerer metadata til PWA, der bruges af en browser eller en appbutik for at definere installationsadfærden.
Filen definerer flere egenskaber som metadata for din PWA. Hvert operativsystem læser disse egenskaber og prøver sit bedste for at matche den oplevelse, du foretrækker. For eksempel læser Android 'display: standalone' og opretter en normal appoplevelse. Med 'display: minimal-ui' skaber det en oplevelse med en synlig URL og TLS-certifikat - nyttigt til sikkerhedsfølsomme apps. Med 'display: fuldskærm' skaber det helt fordybende apps uden statuslinje eller synlig tilbage-knap. Et sæt ikoner og farver definerer, hvordan stænkskærme eller titellinjer ser ud til din apps vindue.
Der er nogle manifestgeneratorer, såsom Web App Manifest Generator eller PWA Builder, der også vil ændre ikonet for dig i forskellige opløsninger, hvis du giver en høj opløsning (mindst 512 pixels).
Når du har linket manifestfilen til dit HTML-dokument, kan brugerne installere appen ved hjælp af forskellige teknikker afhængigt af browseren, typisk kaldet Føj til startskærm, Installer eller bare Tilføj. Hvis din PWA kan crawles af Bing, vil Microsoft automatisk føje den til Microsoft Store, så Windows 10-brugere kan installere den derfra.
På nogle operativsystemer har din PWA mulighed for at fange links. Dette betyder, at efter at brugeren har installeret appen, åbnes enhver URL inden for omfanget af dit manifest inden for rammerne af din app og ikke i browseren, uanset om den vises i browseren eller andre apps såsom WhatsApp, Facebook eller en e-mail.
Hvis du overholder PWA-kravene, som vi definerer her, vil nogle platforme tilbyde omgivende badging (et lille ikon normalt i URL-linjen, der angiver, at internettet kan installeres) eller et webapp-banner. Hvis du foretrækker det, kan du også tilføje din egen brugerdefinerede installationsknap ved hjælp af følgende uddrag:
window.addEventListener ("beforeinstallpr ompt", funktion (e) {e.prompt (); // viser installationens native prompt})
Hvis PWA er installeret, skyder begivenheden 'appinstalleret' på vindueobjektet, så du kan spore statistik, der lytter efter det.
App-butikker
En af de største fordele ved installation fra en browser er at være i stand til at undgå godkendelsesprocessen i app-butikken eller at skulle betale for at være en udgiver. Det kommer med åbenlyse fordele, såsom øjeblikkelig udgivelse, oprettelse af private apps til virksomheder eller apps, der ikke bør accepteres i butikkerne.
Men nogle virksomheder ønsker at være i butikken. Fra i dag er de eneste butikker, der officielt accepterer PWA'er, Windows Store og kaiOS Store. Heldigvis med værktøjer som kondensator (i øjeblikket i Alpha) eller PWA Builder kan vi også oprette og underskrive indfødte pakker til andre platforme.
Der er nogle PWA'er, der allerede er offentliggjort i Google Play Butik, såsom Twitter Lite og Google Maps Go, i øjeblikket under tilpassede implementeringer. Chrome tilbyder en løsning fra Chrome 68 via pålidelige webaktiviteter. Fra det tidspunkt vil vi være i stand til at oprette en Android-pakke (APK) med en launcher til vores PWA og uploade den til butikken. For Microsoft Store på Windows 10 hjælper webstedet PWA Builder i øjeblikket med genereringen af en APPX Windows 10-pakke. Ved hjælp af en webvisning kan du muligvis oprette en iOS-app manuelt til App Store, men vær yderst forsigtig med butikkens regler.
Platform integration
Ved at implementere progressive forbedringsteknikker vil du være i stand til at bruge mange funktioner, herunder push-underretninger, kamera- og mikrofonadgang, geolocation, sensorer, betalinger, delingsdialoger og offline-lagring. Alle disse funktioner kører direkte i browserens sikkerhedsmodel, herunder tilladelsesdialoger.
Vi kan også kommunikere med andre apps via URI-ordninger, såsom åbning af Twitter, YouTube eller WhatsApp via deres URL'er eller brugerdefinerede URI'er, såsom whatsapp: //.
Endelig, når vi opretter native PWA'er, der offentliggøres i butikken ved hjælp af Capacitor eller til Microsoft Store, vil vi være i stand til at bygge bro til native API'er, der gør det muligt for os at udføre stort set enhver native-kode. Denne integration med Windows 10 inkluderer hardwareadgang, men også integration med operativsystemet, der tilbyder muligheder som Pin to Start. For eksempel giver Twitter PWA dig mulighed for at fastgøre enhver bruger til din startskærm.
Design og UX udfordringer
At designe PWA'er har unikke udfordringer, så det er vigtigt at bruge lidt tid på at undersøge, teste så meget som muligt og overveje følgende:
- Brugere forventer app-lignende oplevelser.
- Installationsprocessen er stadig ny, så vi er nødt til at gøre en ekstra indsats for at forklare, hvordan vi installerer appen.
- Opdatering af appen i baggrunden uden brugerinteraktion er stor, men det tilføjer også nogle udfordringer for UX.
- På skrivebordet tager responsivt webdesign en ny grænse, da PWA-vinduer kan være små, meget mindre end en mobil visningsport. Dette betyder, at vi er nødt til at oprette specifikke visninger eller små widgets til dette format, som det ses i Chrome OS i dag.
- Push-underretninger skal kun tilføje værdi til brugeren, så lær at spørge i det rigtige øjeblik og spild ikke muligheden for at sende beskeder, der ikke er nyttige eller interessante.
- Vi er nødt til at designe til webpræstation og offline-adgang.
Året for PWA'er
Med tilføjelsen af iOS og desktop i år er PWA'er overalt i dag. Men vi skal huske, at deres rejse lige er begyndt, så forvent hyppige ændringer, og sørg for at holde dig opdateret med de nyeste teknikker og ideer for at levere en fremragende brugeroplevelse, mens platformen udvikler sig.
Denne artikel blev oprindeligt offentliggjort i nummer 308 af net, verdens bedst sælgende magasin til webdesignere og udviklere. Køb nummer 308 her eller abonner her.
