Miten rakentaa progressiivisen web-sovelluksen

Jan 31, 2026
Miten tehdään

Mobiili on nyt yli puolet verkon liikenteestä, ja Web-sovellukset mahdollistavat käyttäjien tekemään asioita selaimessa, jotka kilpailevat native-sovelluksista, mutta on ongelma: yhteyksien ja laitteiden laatu vaihtelee massiivisesti kaikkialla maailmassa.

Catering Sekä käyttäjille, jotka ovat Salaman nopeita yhteyksiä Soulissa ja käyttäjiä maaseudun Intian vanhentuneessa puhelimessa, on uusin käytettävyyshaaste, ja progressiiviset web-sovellukset ovat ratkaisu.

PWAS käyttää progressiivista parannusta, jotta voit ladata tärkein sisältö ensin, lisää sitten esittelyssä ja toiminnallisia lisäominaisuuksia tarpeen mukaan, mikä tarkoittaa, että kaikki käyttäjät saavat saman ydinosaamisen mahdollisimman nopeasti. Jos haluat tavoittaa mahdollisimman suuren yleisön, PWAS on tapa mennä.

  • 10 vaihetta kytkettävään käyttäjäkokemukseen

Vaikka progressiiviset web-sovellukset tuovat paljon etuja ja toimivuutta verkkoon, ne eivät vaadi koko sovelluksen uudelleen kirjoittamista. Mikä tahansa sovellus voidaan muuntaa PWA: ksi lisäämällä siihen muutamia ylimääräisiä kerroksia.

Parhaan tuloksen saavuttamiseksi haluat korostaa voimakkaasti suorituskykyä alusta alkaen - mutta se on totta mistä tahansa web-sovelluksesta. Täällä kävelemme vaiheet, jotta sovelluksesi progressiivinen.

Jos haluat rakentaa sileän käynnissä olevan sivuston, varmista, että sivujen ylläpito on paikalla ja käyttää kunnon Verkkosivuston rakentaja .

01. Tarjoile https

Olkaamme rehellinen: sinun pitäisi tehdä tämä joka tapauksessa. SSL lisää ylimääräisen suojauskerroksen verkkoon, mikä auttaa käyttäjäsi tuntemaan turvallisena sivustosi käytössä. PWAS: llä HTTPS on välttämätöntä huoltotyöntekijöiden käytölle ja mahdollistaa aloitusnäytön asennuksen. Voit ostaa SSL-sertifikaatin verkkotunnuksesta rekisterinpitäjiltä pienellä kustannuksella ja määrittää sen sitten hosting-palvelun kautta.

02. Luo sovelluskuori

App Shell on ensimmäinen asia, joka lataa - ensimmäinen asia, jota käyttäjä näkee. Se on olemassa kokonaan indeksissä HTML-asiakirjallasi, jossa on Inline CSS, sen varmistamiseksi, että se näyttää mahdollisimman nopeasti ja käyttäjä ei tuijottaa valkoista näyttöä pidempään kuin on tarpeen. Sovelluskuori on osa progressiivisen parannuksen mallia. Sovelluksen tulisi antaa käyttäjälle mahdollisimman pian ja asteittain parantaa sitä enemmän tietoja (todennäköisesti JavaScript) kuormituksina.

Alla oleva esimerkki otetaan React.js-sovelluksesta. Käyttäjä on esitetty sovelluksen ja lastausilmaisin index.html: n latausilmaisimella. Sitten, kun JavaScript lataa ja reagoi saappaat ylös, koko sovellus tehdään kuoren sisällä. 

 & lt;! - index.html - & gt;
& lt; body & gt;
& lt; div id = "root" & gt;
  & lt; div id = "kontti" & gt;
  & lt; div luokka = "sisäastio" & gt;
  & lt; div id = "otsikko" & gt;
  & lt; img src = "/ omaisuus / icon.png" Alt = "Logo" / & GT;
  & lt; h1 & gt; chat & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "Loading-kontti" & gt;
  & lt; img src = "/ varat / icon.png" Alt = "Logo" ID = "Loader" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / body & gt;
// index.js
Reachom.Render (
& lt; app / & gt;
document.gettelementbyid ('root')
);

03. Rekisteröi palvelutoimihenkilö

Voit napauttaa PWA-herkkujen täydelliseen spektriin (push ilmoitukset, välimuisti, asenna kehotteet) tarvitset palvelutoimineen.

Onneksi he ovat melko helppo perustaa. Alla, tarkistamme ensin, jos käyttäjän selain tukee palveluntyöntekijöitä. Sitten, jos on, voimme edetä rekisteröitymällä palvelun työntekijätiedoston kanssa Service-Worker.js . Huomaa, että et tarvitse mitään erityistä sisältä tätä tiedostoa tässä vaiheessa - se voi olla tyhjä.

Seuraavassa esimerkissä kuitenkin näytämme, miten voit hyödyntää kolmea avainhenkilökuntaa elinkaarta. Nämä ovat "asennus", kun käyttäjä ensin vierailee sivulla; "Aktivoi", ennen kuin rekisteröinti on valmis; ja "nouta", kun sovellus tekee verkkopyynnön. Viimeinen on merkityksellinen välimuistin ja offline-valmiuksien kannalta. 

& lt; skripti & gt;
  Jos ("Serviceworker" navigaattorissa) {
  window.addeventlistener ("kuorma", toiminto () {
  navigator.serviceworker.register ('Service-Worker.js'). Sitten (toiminto (rekisteröinti) {
  // Rekisteröinti onnistui
  konsoli.log ("Rekisteröity!");
  }, toiminto (ERR) {
  // Rekisteröityminen epäonnistui :(
  Console.log ("Serviceworker Rekisteröinti epäonnistui:", err);
  }). Saalis (toiminto (ERR) {
  konsoli.log (ERR);
  });
  });
  } muu {
  Console.log ("Palvelun työntekijää ei tueta");
  }
  & lt; / script & gt;
// huoltotyöntekijä.js
SELF.ADDEVENTLISTER ("Asenna", toiminto () {
  Console.log ('Asenna!');
});
SELF.ADDEVENTLISTER ("Aktivoi", tapahtuma = & gt; {
  Console.log ('Activoi!');
});
Self.AddeventListener ("Fetch", toiminto (tapahtuma) {
  konsoli.log ("Fetch!", Event.request);
});

04. Lisää push-ilmoituksia

Palvelualan työntekijöiden avulla käyttäjät voivat vastaanottaa push-ilmoituksia Web Push API: n kautta. Voit käyttää sitä, voit napauttaa Self.registration.Pushmanager palvelusta työntekijätiedostosta. Koska push-ilmoitusten lähettäminen perustuu voimakkaasti backendasetuksellesi, emme sukeltaa siihen täällä.

Jos aloitat sovelluksen tyhjästä, Googlen Firebase-palvelulla on firebase-pilviviestit suhteellisen kivuttomille push-ilmoituksille (muista: Varmista, että pidät suunnittelutiedostot turvallisina pilvivarasto) . Alla oleva koodi osoittaa, miten rekisteröidyt push-ilmoitukset työntöliittimen kautta. 

 navigator.serviceworker.ready.Then (toiminto (rekisteröinti) {
  Jos (! Rekisteröinti.Pushmanager) {
    hälytys ("ei push-ilmoituksia tukea");
    palauta väärä;
  }
  // Tilaa "push-ilmoitus" Push Managerista
  Rekisteröinti.Pushmanager.Subscribe ({
  UserviisibleNly: True // Näytä aina ilmoituksen vastaanotetusta
  }))
  .Tää (funktio (tilaus) {
  konsoli.log ("merkitty");
  }))
  .Catch (toiminto (virhe) {
  konsoli.log ("tilausvirhe:", virhe);
  });
})

05. Lisää web-sovelluksen ilmeinen

Jotta sovelluksesi voidaan asentaa, sinun on sisällytettävä a Manifest.json Hakemuksen juurihakemistossa. Voit ajatella tätä sovelluksen kuvauksena, joka on samanlainen kuin App Storeen. Se sisältää kuvakkeet, splash-näyttö, nimi ja kuvaus.

On myös joitain kokoonpanoja, miten sovellus tulee näkyviin, kun se käynnistetään käyttäjän aloitusnäytöstä: Haluatko näyttää osoitekirjan selaimessa vai ei? Mitä väriä haluat tilapalkin olevan? Ja niin edelleen. Huomaa, että oikea Manifest.json Olisi sisältää täydellisen spektri kuvakeikokoista eri laitteille. Alla oleva koodi on esikatselu eräistä ominaisuuksista, jotka ovat ilmeisiä, voivat sisältää. 

 {
  "SHORT_NAME": "Chat",
  "Nimi": "Chat",
  "Kuvakkeet": [
  {
  "SRC": "/ varat / icon.png",
  "Koot": "192x192",
  "Tyyppi": "Kuva / PNG"
  }
  ],
  "START_URL": "/? utm_source = homescreen",
  "Background_color": "# E05A47",
  "teema_color": "# E05A47",
  "Näyttö": "Standalone"
}

06. Määritä asennuspyyntö

Kun käyttäjä vierailee PWA: n palvelutoimiston ja ilmeisen kanssa, Chrome kehottaa niitä automaattisesti asentamaan sen kotikärehtiin, kun otetaan huomioon seuraavat tiedot: Käyttäjän on vierailla sivustolla kahdesti, viiden minuutin välillä vierailujen välillä.

Ajatus tässä on odottaa, kunnes käyttäjä osoittaa kiinnostusta sovelluksessanne ja pyytää heitä tekemään siitä laitteen kiinnitys (tämä on jyrkkä kontrasti alkuperäisen sovelluksen lähestymistapaan, joka pyytää tätä investointeja ylöspäin).

Mutta voi olla tapauksia, joissa haluat näyttää asennuspyynnön eri tilanteissa, kuten sen jälkeen, kun käyttäjä ottaa erityisen hyödyllisen toiminnan. Tehdä niin, me siepaamme ENNENSTALLPROMPT Tapahtuma ja tallenna se myöhemmin, ota sitten kehote, kun näemme sopivan. 

 Window.AdDeventListener ("PresinstallPrompt", E = & GT; {
  Console.log ("PresinstallPROMPT Event Affed");
  E.Preventdefault ();
  // Stash tapahtuma, jotta se voidaan käynnistää myöhemmin.
  tämä.deforredprompt = e;
  palauta väärä;
  });
// Kun haluat laukaista kehotteen:
Tämä.deferredprompt.promppt ();
  tämä.deferredprompt.userchoice.then (valinta = & gt; {
  konsoli.log (valinta);
  });
Tämä.deferredprompt = null;

07. Analysoi sovelluksesi suorituskykyäsi

Suorituskyky on PWASin sydän ja sielu. Sovelluksen pitäisi olla nopea käyttäjille kaikilla verkko-olosuhteilla. Vaihtoehto ja offline-valmius auttaa paljon, mutta päivän päätteeksi hakemuksesi on oltava nopea, vaikka käyttäjällä ei ole selainta palvelun työntekijöiden teknologiaa. Tämä on progressiivisen parannuksen määritelmä - tarjoavat suurta kokemusta kaikille riippumatta laitteiden nykyaikaisuudesta tai verkkoolosuhteista.

Voit tehdä niin, hyödyllinen mittausmittari on rautatiejärjestelmä. Rautatie on se, mitä Google kutsuu "käyttäjäkeskeisen suorituskyvyn mallin" - joukko ohjeita sovelluksen suorituskyvyn mittaamiseksi.

Lyhenne on vastaus (kuinka kauan sovelluksesi kestää käyttäjätoimintoihin), animaatio (pitää animaation nopeus 60 fps: ssä), tyhjäkäynnillä (käyttämällä aikaa, kun sovellus ei tee mitään muuta lataamaan ja välimuistiin lisää varoja) ja Lataa (sovelluksen lataaminen yhdeksi tai vähemmän).

Tässä on taulukko mielekkäistä vertailuarvoista sovelluskuormitukseen, kuten Meggin Kearney, Tech Writer Google-web-pohjaiset .

delay and user reaction

Klikkaa yläosassa olevaa kuvaketta suurentaaksesi kuvaa

08. Tarkastaa sovelluksesi majakka

Google on suurin mestari, joka työntää progressiivisia web-sovelluksia verkon tulevaisuuteen. Sellaisena se on toimittanut hyödyllisen työkalun PWA-kehityksen ohjaamiseen.

Aiemmin kutsuttu majakka ja toimitetaan kromi-laajennuksena Chrome 60: sta se on osa Chrome detools -välineitä "Audits" -välilehdessä. Mikä majakka toimii hakemuksen eri olosuhteissa ja mittaa sen vastaus ja menestys PWA-ohjeiden mukaisesti. Sitten se antaa sinulle pisteet 100. Se voi myös pistää sovelluksesi verkkosivuilla parhaiden käytäntöjen samanaikaisesti.

Seuraava teksti on luettelo mitattujen arvojen majakka. Käytössä on myös kuvauksia.

  • Rekisteröi huoltotyöntekijä
  • Vastaa 200 offline-tilassa
  • Sisältää jonkin verran sisältöä, kun JavaScript ei ole käytettävissä
  • Käyttää HTTPS: tä
  • Ohjaa HTTP-liikenne HTTPS: ään
  • Sivun lataus on tarpeeksi nopea 3G
  • Käyttäjää voidaan pyytää asentamaan web-sovellus
  • Määritetty mukautettu splash-näyttö
  • Osoitekarja vastaa tuotemerkin värejä
  • On a & lt; meta nimi = "Viewport" & gt; tunnistaa leveys tai alkuperäinen
  • Sisältö on mitoitettu oikein

Tämä artikkeli ilmestyi alun perin web-suunnittelija; Tilaa täältä .

Aiheeseen liittyvät artikkelit:

  • PWAS: Tervetuloa Mobile Revolutioniin
  • Kuinka käyttää animaatiota mobiilisovelluksissa
  • 9 Amazing PWA Secrets

Miten tehdään - Suosituimmat artikkelit

Miten kuvakäsikirjoitus Photoshopissa

Miten tehdään Jan 31, 2026

(Kuva luotto: Mark Evan Lim) Storekuva Photoshopissa voi olla erinomainen tapa saada ideasi kartoitettu. Tässä työ..

21 vaiheet Super Speedy JavaScript

Miten tehdään Jan 31, 2026

(Kuva luotto: PEXELS.com) Ensi silmäyksellä rinnakkainen käsittely kuulostaa kutsusta ilmaiseen lounaan - pystyy k..

Miten rakentaa bloggauspaikka Gatsbyn kanssa

Miten tehdään Jan 31, 2026

Kehykset, kuten reagoida vain Lähetä JavaScript alas asiakkaille, jota käytetään sitten elementtien luomiseksi näytöllä. ..

Kuinka perustaa sivuston teeman CSS-muuttujien kanssa

Miten tehdään Jan 31, 2026

CSS mukautetut ominaisuudet, jotka yleisesti kutsutaan CSS-muuttujina, tukee nyt kaikki tärkeimmät modernit selaimet. Tämä ta..

Kuinka havainnollistaa eläinten silmät

Miten tehdään Jan 31, 2026

(Kuva luotto: Jill Tisbury) Kun oppiminen Kuinka vetää eläimiä , yksi hankala näkökohta hallita ..

Lisää visuaalisia vihjeitä sivustoosi

Miten tehdään Jan 31, 2026

Se on ärsyttävää sivuston käyttäjille napsauttamalla linkkiä vain löytääksesi, että verkkosivu ei ole kiinnostunut, tu..

Luo upeita terveellisiä tekstuureja tehosekoittimessa

Miten tehdään Jan 31, 2026

Sivu 1/2: Sivu 1 Sivu 1 Sivu 2 ..

Luo alhainen poly-taustakuva C4D: ssä

Miten tehdään Jan 31, 2026

Sivu 1/2: Luo alhainen Poly-taustakuva C4D: ssä: Vaiheet 01-06 Luo alhai..

Luokat