Hogyan építsünk progresszív webes alkalmazást

Jan 31, 2026

kézikönyv

A mobil most a web forgalmának több mint felét teszi ki, és a webes alkalmazások lehetővé teszik a felhasználók számára, hogy a rivális natív alkalmazások böngészőjében dolgokat végezzenek, de van egy probléma: a kapcsolatok és eszközök minősége hatalmasan változik a világon.

Vendéglátás mind a felhasználók, mind a villámgyors kapcsolatok Szöulban, és a felhasználók a vidéki India egy elavult telefon, a legújabb használhatósági kihívás, és a progresszív webes alkalmazások a megoldás.

PWAs használjon progresszív növelése betölteni a legfontosabb tartalom az első, majd adjunk hozzá prezentációs és funkcionális extrák szükség, ami azt jelenti, hogy az összes felhasználó kap ugyanolyan alapvető élmény a lehető leggyorsabban. Ha el szeretné érni a lehető legszélesebb közönséget, a PWAS az út.

10 lépés egy vonzó felhasználói élményhez

Bár a progresszív webes alkalmazások sok előnyöket és funkcionalitást hoznak az interneten, nem igényelnek átírni az egész alkalmazást. Bármely alkalmazás átalakítható PWA-nak, néhány extra réteg hozzáadásával.

A legjobb eredmény érdekében nagy hangsúlyt fektethet a teljesítményre a kezdetektől - de ez igaz minden webes alkalmazásra. Itt járunk a lépcsőn, hogy az alkalmazás progresszív legyen.

Ha sima futóhelyet szeretne építeni, győződjön meg róla, hogy a web hosting a helyszínen van, és tisztességes weboldal építője .

01. Tálaljuk a HTTPS-t

Légy őszinte: Mindenesetre meg kell csinálnod. Az SSL egy extra biztonsági réteget ad az interneten, segítve a felhasználókat biztonságban a webhely használatával. A PWAS-val a HTTPS elengedhetetlen a szolgáltató munkavállalók használatához és a kezdőképernyő telepítéséhez. SSL-tanúsítványt vásárolhat a domain regisztrátorából kis költséggel, majd konfigurálhatja azt a hosting szolgáltatáson keresztül.

02. Hozzon létre egy alkalmazási héjat

Az alkalmazáshéj az első dolog, ami betölti - az első dolog, amit a felhasználó lát. Teljesen az index HTML-dokumentumban kell lennie, az Inline CSS-vel, hogy biztosítsa, hogy a lehető leggyorsabban jelenjen meg, és a felhasználó nem bámul egy fehér képernyőn hosszabb ideig. Az alkalmazási héj a progresszív javítás mintázatának részét képezi. Az alkalmazásnak a lehető leghamarabb megadnia kell a felhasználói tartalmat, majd fokozatosan fokozza azt, mint több adat (valószínű JavaScript) terhelés.

Az alábbi példa egy React.js alkalmazásból származik. A felhasználó az alkalmazás körvonalával és az index.html betöltésével jelenik meg. Ezután, miután a JavaScript terheléseket és reagálni kell, a teljes alkalmazás a héjban van.

 & lt;! - index.html - & gt;
& lt; test & gt;
& lt; div id = "root" & gt;
  & lt; div id = "konténer" & gt;
  & lt; div osztály = "belső konténer" & gt;
  & lt; div id = "fejléc" & gt;
  & lt; img src = "/ eszközök / icon.png" alt = "logo" / & gt;
  & lt; h1 & gt; chat & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "rakodótartály" & gt;
  & lt; img src = "/ eszközök / icon.png" alt = "logo" id = "betöltő" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / test & gt;
// index.js
Reagrestem.render (
& lt; app / & gt;
document.getelementbyid ('Root')
);

03. Regisztráljon egy szolgáltatót

Ahhoz, hogy megérintse a PWA Goodies teljes spektrumát (Push Értesítések, gyorsítótárazás, telepítés kéri), szüksége lesz egy szolgáltatónak.

Szerencsére nagyon könnyen felállíthatók. Az alábbiakban először ellenőrizzük, hogy a felhasználó böngészője támogatja-e a szolgáltatókat. Ezután, ha igen, akkor továbbléphetünk a szolgáltatási munkavállalói fájl regisztrálásával, itt szerviz-worker.js . Ne feledje, hogy ebben a pontban nincs szükség semmire a fájlba, amelyre üres lehet.

Az alábbi példában azonban megmutatjuk, hogyan kell megérinteni a három kulcsfontosságú szolgáltatási életciklus eseményt. Ezek "telepítve", amikor a felhasználó először látogatja meg az oldalt; "Aktiválja", a regisztráció előtt közvetlenül; és a "Fetch", ha az alkalmazás hálózati kérelmet nyújt. Az utolsó a gyorsítótárazás és az offline képesség szempontjából releváns.

& lt; script & gt;
  ha ("szolgáltató" a navigátorban) {
  window.addeventlistener ('terhelés, funkció () {
  navigator.serviceworker.register ("szolgáltatás-worker.js"). Ezután (funkció (regisztráció) {
  // Sikeres regisztráció
  konzol.log ("regisztrált!");
  }, funkció (hibás) {
  // a regisztráció meghiúsult :(
  konzol.log ("Serviceworker regisztráció sikertelen:", hibás);
  }). fogás (funkció (hibás) {
  konzol.log (hibás);
  });
  });
  } más {
  A konzol.log ("szolgáltató munkás nem támogatott");
  }
  & lt; / script & gt;
// szolgáltatás-worker.js
self.addeventlistener ("Telepítés", funkció () {
  konzol.log ("Telepítés!");
});
self.addeventlistener ("Aktiválás", esemény = & gt; {
  konzol.log ("Aktiválás!");
});
self.addeventlistener ("Fetch", funkció (esemény) {
  konzol.log ("Fetch!", esemény.request);
});

04. Add hozzá az értesítéseket

Szolgáltatási dolgozók teszik a felhasználók számára, hogy megkapja push értesítéseket az interneten keresztül push API-t. Ahhoz, hogy elérje, megérintheti self.registration.pushmanager a szolgáltatási munkás fájljában. Mivel a push értesítések küldése nagymértékben támaszkodik a backend beállításaira, itt nem merülünk bele.

Ha kezdő egy alkalmazást a semmiből, a Google Firebase szolgáltatás jön Firebase Cloud Messaging viszonylag fájdalommentes push bejelentéseket (emlékeztetőül: győződjön meg róla, hogy tartsa a tervezési fájlokat biztonságban felhő tárolás) . Az alábbi kód megmutatja, hogyan regisztrálhat a push értesítésekre a Push API segítségével.

 Navigator.serviceworker.Ready.Then (funkció (regisztráció) {
  Ha (! Regisztráció.Pushmanager) {
    riasztás ("Nincs push értesítések támogatása");
    vissza a hamis;
  }
  // a "Push Notification" előfizetése a Push Manager-től
  regisztrációs.Pushmanager.subscribe ({
  Uservisibleonly: True // Mindig jelenítse meg az értesítést, ha beérkezett
  })
  .hen (funkció (előfizetés) {
  konzol.log ("feliratkozott");
  })
  .catch (funkció (hiba) {
  konzol.log ("előfizetési hiba:", hiba);
  });
})

05. Adjon hozzá egy webes alkalmazást

Annak érdekében, hogy az alkalmazás telepíthető legyen, be kell tartalmaznia a manifest.json Az alkalmazás root könyvtárában. Ezt úgy gondolhatja, hogy az alkalmazás leírása, hasonló ahhoz, amit az App Store-hoz nyújthat be. Ez magában foglalja az ikonokat, a splash képernyőt, a nevet és a leírást.

Van egy bizonyos konfiguráció, hogy az alkalmazás megjelenik a felhasználó kezdőképernyőjéből: Szeretné megmutatni a címsávot a böngészőben, vagy sem? Milyen színt szeretne az állapotsor? Stb. Vegye figyelembe, hogy megfelelő manifest.json Tartalmaznia kell egy teljes spektrumot ikonméreteket különböző eszközökhöz. Az alábbi kód a manifeszt egyes tulajdonságainak előnézete.

 {
  "Short_name": "Chat",
  "Név": "Chat",
  "Ikonok": [
  {
  "SRC": "/ Eszközök / Icon.png",
  "Méretek": "192x192",
  "Típus": "Kép / PNG"
  }
  ],
  "START_URL": "/? UTM_SOURCE = HOMESCREEN",
  "Background_color": "# E05A47",
  "Theme_color": "# E05A47",
  "Kijelző": "önálló"
}

06. Konfigurálja a telepítőelemet

Ha a felhasználó a PWA-t látogatja meg a szolgáltató munkás és manifeszt, akkor a Chrome automatikusan felkéri őket, hogy telepítsenek otthonuk képernyőjére, tekintettel a következőkre: a felhasználónak kétszer meg kell látogatnia a webhelyet, öt perccel a látogatások között.

Az ötlet az, hogy várjon, amíg a felhasználó érdekli az alkalmazás iránti érdeklődést, majd kérje meg őket, hogy tegyék meg az eszközüket (ez éles ellentétben áll a natív alkalmazás megközelítéssel, amely kéri a beruházást.

De esetleg olyan esetek lehetnek, amikor a telepítési kérelmet különböző helyzetekben szeretné megmutatni, például a felhasználónak egy adott hasznos műveletet. Ehhez elfogjuk a előzetesenstalllombirat Esemény és mentés később, majd telepítse a parancsot, amikor jól látjuk.

 ablak.addeventlistener ("előzetesenstalllprompt", e = & gt; {
  console.log ("előzetesen telepített esemény");
  e.preventdefault ();
  // stash az esemény, így később aktiválható.
  Ez.deferredPrompt = E;
  vissza a hamis;
  });
// Ha parancsot szeretne indítani:
ez.deferredprompt.prompt ();
  ez.deferredprompt.Userchoice.then (választás = & gt; {
  konzol.log (választás);
  });
ez.deferredPrompt = null;

07. Elemezze az alkalmazás teljesítményét

A teljesítmény a pwas szíve és lelke. Az alkalmazásnak gyorsnak kell lennie a felhasználók számára az összes hálózati feltételre. A gyorsítótár és az offline képességek segítenek sokat, de a nap végén az alkalmazásnak gyorsnak kell lennie, még akkor is, ha a felhasználónak nincs böngészője a szerviz munkás technológiájának támogatására. Ez a progresszív javítás meghatározása - nagyszerű élményt nyújt mindenkinek, függetlenül az eszköz modernitásától vagy a hálózati feltételektől.

Ehhez egy hasznos metrikészlet a vasúti rendszer. A sín az, amit a Google a "felhasználó-központi teljesítménymodell" - egy sor iránymutatás az alkalmazás teljesítményének mérésére.

A mozaikszó jelentése Response (meddig tart az alkalmazáshoz reagálni a felhasználói műveletek), animáció (vezetésére animáció sebessége másodpercenként 60 képkocka), Idle (a idő, amikor az alkalmazás nem csinál mást a terhelés és cache további eszközöket) és Terhelés (az alkalmazás betöltése egy másodpercen belül vagy kevesebb).

Itt van egy táblázat az értelmes referenciaértékek az alkalmazás betöltésére, amelyet a MEGGIN Kearney, a Tech Writer Google Web Alapjai .

delay and user reaction — Kattintson az ikonra a jobb felső sarokban a kép nagyításához

08. Ellenőrizze az alkalmazást világítótoronysal

A Google a legnagyobb bajnok nyomja a progresszív webes alkalmazásokat, mint a web jövőjét. Mint ilyen, hasznos eszközt szolgáltatott a PWA fejlesztésének irányításához.

Korábban világítótoronynak nevezték, és krómozott kiterjesztésként szolgáltak, a Chrome 60-tól a Chrome Devtools része, az "Auditok" lap alatt. Milyen világítótorony van a kérelmet különböző körülmények között, és mérje meg válaszát és sikerét a PWA iránymutatásai szerint. Ezután 100-as pontszámot ad neked. Ez ugyanúgy pontot szerezhet az alkalmazás webes bevált gyakorlatokon is.

A következő szöveg a mért értékek listája. A használatban leírást mutat.

Regisztrálja a szolgáltatót
Válaszoljon 200-ra, amikor offline állapotban van
Tartalmaz néhány tartalmat, ha a JavaScript nem érhető el
HTTPS-t használ
Átirányítja a http forgalmat a https-re
Az oldalterhelés elég gyors a 3G-n
A felhasználó kérheti, hogy telepítse a webes alkalmazást
Egyéni splash képernyőre van beállítva
A címsor mérkőzések a márka színekkel
Van egy & lt; meta név = "nézetablak" & gt; címkéz szélesség vagy kezdeti
A tartalom helyesen méretezik a nézetablakhoz

Ez a cikk eredetileg a webtervezőben jelent meg; Iratkozzon fel itt .

Kapcsolódó cikkek:

Pwas: Üdvözöljük a mobil forradalomban
Hogyan kell használni animációt mobilalkalmazásokban
9 Amazing PWA titkok

Hogyan építsünk progresszív webes alkalmazást

01. Tálaljuk a HTTPS-t

02. Hozzon létre egy alkalmazási héjat

03. Regisztráljon egy szolgáltatót

04. Add hozzá az értesítéseket

05. Adjon hozzá egy webes alkalmazást

06. Konfigurálja a telepítőelemet

07. Elemezze az alkalmazás teljesítményét

08. Ellenőrizze az alkalmazást világítótoronysal

kézikönyv - Most Popular Articles

Hogyan kell felhívni a nyakát és vállát

Az animáció összetétele: Ismerje meg az alapokat

Hogyan lehet megfordítani a WordPress vizuális építővé

5 forró új CSS funkciók és hogyan kell használni őket

Festék hullámzó víz olajokban

A CSS kijelző tulajdonának megértése

Ismerje meg, hogy futtassa a tervezést és a tartalom sprinteket

Készítsen logót az Illustrator-ban

Kategóriák