Hvordan bygge en progressiv web app

Sep 16, 2025
hvordan
[1. 3]

Mobil står nå for over halvparten av webens trafikk, og webapplikasjoner gjør det mulig for brukere å gjøre ting i nettleseren som rivaliserer innfødte apper, men det er et problem: Kvaliteten på tilkoblinger og enheter varierer massivt over hele verden.

Catering både til brukere på lynrask tilkoblinger i Seoul, og brukere i landlige India på en utdatert telefon, er den nyeste brukervennlige utfordringen, og progressive webapplikasjoner er løsningen.

PWAs bruker progressiv forbedring for å laste det viktigste innholdet først, deretter legge til presentasjons- og funksjonelle tilleggsutstyr etter behov, noe som betyr at alle brukerne får samme kjerneopplevelse så raskt som mulig. Hvis du vil nå det bredest mulige publikum, er Pwas veien å gå.

  • 10 trinn til en engasjerende brukeropplevelse

Selv om progressive webapplikasjoner gir mange fordeler og funksjonalitet til nettet, krever de ikke omskrivning hele applikasjonen. Enhver app kan konverteres til en PWA ved å legge til noen ekstra lag til det.

For best resultat vil du legge stor vekt på ytelse fra begynnelsen - men det er sant for en hvilken som helst webapp. Her går vi gjennom trinnene for å gjøre App Progressive.

Hvis du vil bygge et jevnt løpende nettsted, må du sørge for at Web Hosting. er spot on og bruk en anstendig Nettstedbygger .

01. Serve over HTTPS

La oss være ærlige: Du bør gjøre dette uansett. SSL legger til et ekstra lag av sikkerhet på nettet, og hjelper brukerne til å føle seg trygge i å bruke nettstedet ditt. Med Pwas er HTTPS viktig for bruk av servicearbeidere og tillater installasjon av hjemmeskjerm. Du kan kjøpe et SSL-sertifikat fra domeneregistratoren din på Lite utgifter, og konfigurere den gjennom din hosting-tjeneste.

02. Opprett et programskall

App-skallet ditt er det første som laster - det første brukeren ser. Det skal eksistere helt i Index HTML-dokumentet, med Inline CSS, for å sikre at den vises så fort som mulig, og brukeren din ikke stirrer på en hvit skjerm for lengre tid enn nødvendig. Søknadsskallet er en del av mønsteret av progressiv forbedring. Din app bør gi brukerinnholdet så snart som mulig, og deretter gradvis forbedre det som flere data (sannsynligvis javascript) laster.

Eksemplet nedenfor er hentet fra en reakt.js-applikasjon. Brukeren presenteres med en oversikt over appen og en lastindikator i index.html. Deretter, når JavaScript laster og reagerer støvler opp, blir hele applikasjonen gjengitt i skallet. 

 & lt;! - index.html - & gt;
& lt; body & gt;
& lt; div id = "root" & gt;
  & lt; div id = "container" & gt;
  & lt; div class = "inner-container" & gt;
  & lt; div id = "header" & gt;
  & lt; img src = "/ eiendeler / icon.png" alt = "logo" / & gt;
  & lt; h1 & gt; chat & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "loading-container" & gt;
  & lt; img src = "/ eiendeler / icon.png" alt = "logo" id = "loader" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / body & gt;
// index.js.
Reactdom.render (
& lt; app / & gt;
Document.GetelementByid ('root')
);

03. Registrer en tjenestearbeider

For å tappe inn i det fulle spekteret av PWA-godbiter (Push Notifications, Caching, Installer-instruksjoner), trenger du en servicevirksomhet.

Heldigvis er de ganske enkle å sette opp. Nedenfor sjekker vi først om brukerens nettleser støtter servicearbeidere. Så, i så fall kan vi gå videre med å registrere servicearbeiderfilen, her kalt service-arbeider.js. . Merk at du ikke trenger noe spesielt inne i filen på dette punktet - det kan være tomt.

I eksemplet nedenfor viser vi imidlertid hvordan vi trykker på de tre viktige arbeidstakernes livssyklushendelser. Disse er 'installere', når brukeren først besøker siden din; 'Aktiver', rett før registrering fullføres; og 'Hent', når søknaden gjør en nettverksforespørsel. Den siste er relevant for caching og offline evne. 

& lt; script & gt;
  hvis ('servicearbeideren' i navigatoren) {
  window.addeventlistener ('last', funksjon () {
  navigator.serviceworker.register ('service-worker.js'). Deretter (funksjon (registrering) {
  // Registrering var vellykket
  konsoll.log ('registrert!');
  }, funksjon (ERR) {
  // registrering feilet :(
  Console.log ('Serviceprosesser Registrering mislyktes:', Err);
  }). Fangst (funksjon (ERR) {
  Console.log (Err);
  });
  });
  } else {
  Console.log ('Servicearbeider støttes ikke');
  }
  & lt; / script & gt;
// service-arbeider.js
self.addeventlistener ('install', funksjon () {
  konsoll.log ('installer!');
});
Self.addeventlistener ("Aktiver", Event = & GT; {
  Console.log ('Aktiver!');
});
self.addeventlistener ('hente', funksjon (begivenhet) {
  Console.log ('Hent!', Event.Request);
});

04. Legg til pushvarsler

Tjenestearbeidere gjør at brukerne kan motta pushvarsler via nettet Push API. For å få tilgang til det, kan du tappe inn self.registration.pushmanager Fra din service arbeider fil. Siden sendingen av push notifications er avhengig av din backend oppsett, vil vi ikke dykke inn i det her.

Hvis du starter en app fra bunnen av, kommer Googles Firebase-tjeneste med Firebase Cloud Messaging for relativt smertefrie push-varsler (Husk: Pass på at du holder designfilene dine trygge i skylagring) . Koden nedenfor viser hvordan du registrerer deg for pushvarsler via Push API. 

 navigator.serviceworker.ready.then (funksjon (registrering) {
  hvis (! registrering.pushmanager) {
    varsel ('Ingen push-varsler støtte.');
    returnere false;
  }
  // for å abonnere `push melding` fra push manager
  registrering.pushmanager.subscribe ({
  UservisibleOnly: True // alltid vis varsel når mottatt
  })
  .Nå (funksjon (abonnement) {
  konsoll.log ('abonnert');
  })
  .Catch (funksjon (feil) {
  konsoll.log ('abonnementsfeil:', feil);
  });
})

05. Legg til en web app manifest

For å gjøre søknaden din installert, må du inkludere en manifest.json. i programmets rotkatalog. Du kan tenke på dette som en beskrivelse av søknaden din, som ligner på hva du kan sende til App Store. Den inneholder ikoner, en splash-skjerm, et navn og en beskrivelse.

Det er også noen konfigurasjon for hvordan programmet ditt vises når det lanseres fra brukerens startskjerm: Ønsker du å vise adresselinjen i nettleseren eller ikke? Hvilken farge vil du at statuslinjen skal være? Og så videre. Legg merke til at en riktig manifest.json. bør inneholde et fullt spekter av ikonstørrelser for ulike enheter. Koden nedenfor er en forhåndsvisning av noen av egenskapene som manifestet kan inkludere. 

 {
  "short_name": "chat",
  "Navn": "Chat",
  "Ikoner": [
  {
  "SRC": "/ Eiendeler / Icon.png",
  "Størrelser": "192x192",
  "Type": "bilde / png"
  }
  ],
  "Start_url": "/? Utm_source = homescreen",
  "BAKGRUNN_COLOR": "# E05A47",
  "Theme_Color": "# E05A47",
  "Display": "frittstående"
}

06. Konfigurer installasjonsprompten

Når en bruker besøker en PWA med en servicevirksomhet og manifest, vil Chrome automatisk spørre dem om å installere den til hjemmeskjermen, gitt følgende: Brukeren må besøke nettstedet to ganger, med fem minutter mellom besøk.

Ideen her er å vente til brukeren demonstrerer interesse i søknaden din, og deretter be dem om å gjøre det til en fixtur av enheten deres (dette er i skarp kontrast til den innfødte app-tilnærmingen, som ber om den investeringen opp foran).

Men det kan være tilfeller hvor du vil vise installasjonsprompten i forskjellige situasjoner, for eksempel etter at brukeren tar en spesiell nyttig handling. Å gjøre det, vi skjuler FØRSTALLPROMPT. Event og lagre det for senere, og deretter distribuere spørringen når vi passer. 

 window.addeventlistener ('førinstallprompt', e = & gt; {
  Console.log ('TonstallPrompt Event Fired');
  e.preventdefault ();
  // Stash hendelsen slik at den kan utløses senere.
  this.deferredprompt = e;
  returnere false;
  });
// Når du vil utløse spørsmål:
this.deferredprompt.prompt ();
  this.deferredprompt.Userchoice.then (Choice = & gt; {
  konsoll.log (valg);
  });
this.deferredprompt = null;

07. Analyser appens ytelse

Ytelsen er hjertet og sjelen til Pwas. Appen din skal være rask for brukere på alle nettverksforhold. Caching og frakoblet evne hjelper mye, men på slutten av dagen skal søknaden din være rask, selv om brukeren ikke har nettleseren til å støtte service arbeidstaker teknologi. Dette er definisjonen av progressiv forbedring - gir en god opplevelse for alle, uavhengig av enhetens modernitet eller nettverksforhold.

For å gjøre det er et nyttig sett med beregninger skinnsystemet. Rail er hva Google kaller en "bruker-sentrert ytelse modell" - et sett med retningslinjer for måling av vår apps ytelse.

Akronymet står for svar (hvor lang tid det tar for at appen din skal svare på brukerhandlinger), animasjon (Holde animasjonshastighet på 60fps), tomgang (bruker tid når appen din ikke gjør noe annet å laste og buffer ytterligere eiendeler) og Last (lasting av appen din på ett sekund eller mindre).

Her er et bord med meningsfulle referanser for applikasjonslasting, som levert av Meggin Kearney, Tech Writer på Google Web Fundamentals. .

delay and user reaction

Klikk på ikonet øverst til høyre for å forstørre bildet

08. Revisjon din app med fyrtårn

Google er den største mesteren som presser progressive webapps som fremtiden for nettet. Som sådan har det levert et nyttig verktøy for å lede din PWA-utvikling.

Tidligere kalt fyrtårn og leveres som en krom-forlengelse, som av Chrome 60 er det en del av Chrome Devtools, under kategorien "revisjoner". Hva fyrtårn gjør, er å kjøre søknaden din under forskjellige forhold og måle svaret og suksessen i henhold til PWAs retningslinjer. Det gir deg en poengsum ut av 100. Det kan også score appen din på nettet beste praksis på samme tid.

Følgende tekst er en liste over verdiene fyrtårnet målt. I bruk viser også beskrivelser.

  • Registrerer en servicevirksomhet
  • Reagerer med en 200 når offline
  • Inneholder noe innhold når Javascript ikke er tilgjengelig
  • Bruker https.
  • Omdirigerer HTTP-trafikk til HTTPS
  • Sidebelastningen er rask nok på 3G
  • Brukeren kan bli bedt om å installere webappen
  • Konfigurert for en egendefinert splash-skjerm
  • Adressefeltet samsvarer med merkens farger
  • Har en & lt; meta navn = "visningsport" & gt; tag med. bredde eller Innledende skala
  • Innholdet er dimensjonert riktig for visningsporten

Denne artikkelen opprinnelig dukket opp i webdesigner; Abonner her .

Relaterte artikler:

  • PWAs: Velkommen til den mobile revolusjonen
  • Slik bruker du animasjon i mobilapper
  • 9 fantastiske PWA-hemmeligheter

hvordan - Mest populære artikler

Lino PrintMaking: En introduksjon

hvordan Sep 16, 2025

[1. 3] (Bilde Kreditt: Meg Buick) Lino PrintMaking er en metode for lettelseutskrift, som innebærer å lage en tegnin..

Slik lager du en tegneserie

hvordan Sep 16, 2025

[1. 3] Denne opplæringen vil vise deg hvordan du lager en tegneserie. Selv om vi bruker Clip Studio Paint. Her er ..

Hvordan lage dine egne lerretskort

hvordan Sep 16, 2025

[1. 3] Å gjøre dine egne lerretskort er morsomt, raskt og kan spare deg for penger. Det gir deg også et overlegen produkt og fl..

3D Tekstveiledning for grafiske designere

hvordan Sep 16, 2025

[1. 3] Side 1 av 2: Komme i gang med Cinema 4D Komme i gang med Cinema 4D ..

Mal et furry pet portrett

hvordan Sep 16, 2025

Vårt ferdige kattportrett Maleri kjæledyr og tegne dyr kan være mye moro. Mens det er flott ..

mock up ar grafikk med ettervirkninger

hvordan Sep 16, 2025

Etter effekter har noen kraftige verktøy som vi kan bruke til å etterligne forstørret virkelighet. Du kan finne dette nødvendig hvis du for eksempel ønsket å lage en tonehøydevideo for..

Hvordan få mer fra digitale teksturer

hvordan Sep 16, 2025

[1. 3] Digital arbeider frigjør deg for å gjøre så mange feil som du vil, i et arbeidsområde hvor risikoen er tatt bort. Diss..

Topptips for å male uttrykksfulle hender

hvordan Sep 16, 2025

[1. 3] Hendene er trolig det vanskeligste anatomielementet å vite Hvordan male , enda mer når de må formidle en ..

Kategorier