Elgondolkozott már azon, hogy egyes webhelyek hogyan működnek továbbra is offline állapotban? A titok egyszerű: ezeken a webhelyeken vannak szervizmunkások.
A modern webalkalmazások számos natív alkalmazásszerű funkciója mögött a szervizmunkások jelentik a kulcsfontosságú technológiát.
Mik azok a szervizmunkások?
A szervizmunkások egy speciális típus JavaScript webmunkások. A service worker egy JavaScript-fájl, amely kicsit úgy működik, mint egy proxyszerver. Elkapja az alkalmazás kimenő hálózati kéréseit, lehetővé téve egyéni válaszok létrehozását. Kiszolgálhatja például a gyorsítótárazott fájlokat a felhasználónak, amikor offline állapotban van.
A szervizmunkások lehetővé teszik olyan szolgáltatások hozzáadását is a webalkalmazásokhoz, mint a háttérben történő szinkronizálás.
Miért pont szolgáltató dolgozók?
A webfejlesztők már régóta próbálják bővíteni alkalmazásaik képességeit. Mielőtt a szervizesek megjelentek volna, különféle megoldásokat használhatott ennek lehetővé tételére. Különösen figyelemre méltó az AppCache, amely kényelmessé tette az erőforrások gyorsítótárazását. Sajnos voltak olyan problémák, amelyek miatt a legtöbb alkalmazás számára nem volt praktikus megoldás.
Az AppCache jó ötletnek tűnt, mert lehetővé tette a gyorsítótárba helyezendő eszközök megadását nagyon egyszerűen. Azonban sok feltételezést fogalmazott meg azzal kapcsolatban, hogy mit próbált tenni, majd borzalmasan összeomlott, amikor az alkalmazás nem követte pontosan ezeket a feltételezéseket. Olvassa el Jake Archibald (sajnos a címe, de jól megírva) Az alkalmazás-gyorsítótár egy Douchebag további részletekért. (Forrás: MDN)
A szervizmunkások jelenleg arra törekszenek, hogy csökkentsék a webalkalmazások korlátait, az olyan technológia hátrányai nélkül, mint az AppCache.
Használati esetek szervizmunkások számára
Tehát pontosan mit engednek meg a szervizesek? A szervizmunkások lehetővé teszik a natív alkalmazásokra jellemző funkciók hozzáadását webalkalmazásához. Normál élményt nyújthatnak olyan eszközökön is, amelyek nem támogatják a szervizmunkásokat. Az ehhez hasonló alkalmazásokat néha hívják Progresszív webalkalmazások (PWA).
Íme néhány olyan szolgáltatás, amelyet a szervizesek lehetővé tesznek:
- Hagyja, hogy a felhasználó továbbra is használja az alkalmazást (vagy legalábbis annak egy részét), amikor már nem csatlakozik az internethez. A szervizmunkások ezt úgy érik el, hogy a kérésekre válaszul gyorsítótárazott eszközöket szolgálnak ki.
- A Chromium-alapú böngészőkben a webalkalmazások telepíthetőségének egyik követelménye a szervizmunkás.
- A szervizmunkásokra van szükség ahhoz, hogy webalkalmazása leküldéses értesítéseket tudjon megvalósítani.
A szolgáltató munkás életciklusa
A szolgáltató munkatársai a teljes webhelyre vagy a webhely oldalainak csak egy részére vonatkozó kéréseket irányíthatnak. Egy adott weboldalon csak egy aktív szervizmunkás lehet, és minden szervizmunkásnak van eseményalapú életciklusa. Egy szervizmunkás életciklusa általában így néz ki:
- A dolgozó regisztrációja és letöltése. A szervizmunkás élete akkor kezdődik, amikor egy JavaScript-fájl regisztrálja. Ha a regisztráció sikeres, a Service Worker letölti, majd egy speciális szálon belül futni kezd.
- Amikor a szervizmunkás által vezérelt oldal betöltődik, a szervizmunkás „telepítési” eseményt kap. Mindig ez az első esemény, amelyet a szervizmunkás kap, és beállíthat egy figyelőt az eseményhez a dolgozón belül. Az „install” esemény általában a szervizmunkásnak szükséges erőforrások lekérésére és/vagy gyorsítótárazására szolgál.
- Miután a szervizmunkás befejezte a telepítést, „aktiválás” eseményt kap. Ez az esemény lehetővé teszi a dolgozó számára, hogy megtisztítsa a korábbi szervizmunkások által használt redundáns erőforrásokat. Ha szervizmunkást frissít, az aktiválási esemény csak akkor indul el, ha biztonságosan megteheti. Ez azt jelenti, hogy nincs olyan betöltött oldal, amely továbbra is a Service Worker régi verzióját használja.
- Ezt követően a szervizmunkás teljes mértékben felügyeli az összes olyan oldalt, amely a sikeres regisztráció után betöltődött.
- Az életciklus utolsó szakasza a redundancia, amely akkor következik be, amikor a szervizmunkást eltávolítják vagy újabb verzióra cserélik.
A Service Workers használata JavaScriptben
A Service Worker API (MDN) biztosítja azt a felületet, amely lehetővé teszi, hogy JavaScriptben hozzon létre és kommunikáljon velük.
A szervizmunkások elsősorban hálózati kérésekkel és egyéb aszinkron eseményekkel foglalkoznak. Ennek eredményeként a Service Worker API erősen kihasználja Ígéretek és aszinkron programozás.
Service worker létrehozásához először fel kell hívnia a navigator.serviceWorker.register() módszer. Ez így nézhet ki:
ha ('szervizmunkás' a navigátorban) {
navigator.serviceWorker.register('/sw.js').then(funkció(bejegyzés){
console.log('A szervizmunkás regisztrációja sikerült:', bejegyzés);
}).catch((hiba) => { console.log('A szervizmunkás regisztrációja nem sikerült:', hiba); });
} más {
console.log('A szervizmunkások nem támogatottak.');
}
A legkülső if-blokk jellemző észlelést végez. Biztosítja, hogy a szervizmunkásokhoz kapcsolódó kód csak a szervizmunkásokat támogató böngészőkön fut.
Ezután a kód meghívja a Regisztráció módszer. Átadja az elérési utat a szervizmunkásnak (a webhely eredetéhez képest), hogy regisztrálja és letöltse. Az Regisztráció A metódus elfogadja a hatókör nevű opcionális paramétert is, amellyel korlátozható a dolgozó által vezérelt oldalak száma. A szervizmunkások alapértelmezés szerint az alkalmazás összes oldalát felügyelik. Az Regisztráció metódus egy ígéretet ad vissza, amely jelzi, hogy a regisztráció sikeres volt-e.
Ha az ígéret megoldódik, a szervizmunkás sikeresen regisztrált. A kód ezután a regisztrált szervizmunkást képviselő objektumot nyomtatja ki a konzolra.
Ha a regisztrációs folyamat sikertelen, a kód elkapja a hibát, és naplózza a konzolon.
Következő egy egyszerűsített példa arra, hogyan nézhet ki maga a szervizmunkás:
self.addEventListener('telepítés', (esemény) => {
event.waitUntil(újÍgéret((feloldás, elutasítás) => {
console.log("beállítási dolgokat csinál")
elhatározás()
}))
console.log("A szervizmunkás befejezte a telepítést")
})self.addEventListener('aktiválja', (esemény) => {
event.waitUntil(újÍgéret((feloldás, elutasítás) => {
console.log("takarítással foglalkozik!")
elhatározás()
}))
console.log('aktiválás megtörtént!')
})
self.addEventListener('elhozni', (esemény) => {
console.log("A kérést elfogták", esemény)
});
Ennek a demó szolgáltatónak három eseményfigyelője van, saját maga ellen regisztrálva. Van egy az "install" eseményhez, az "Activation" eseményhez és a "fetch" eseményhez.
Az első két figyelőn belül a kód a várj amíg módszer. Ez a módszer elfogadja az ígéretet. Feladata annak biztosítása, hogy a szervizmunkás megvárja az ígéret megoldását vagy elutasítását, mielőtt a következő eseményre lépne.
A lekérési figyelő minden alkalommal aktiválódik, amikor a szervizmunkás által vezérelt erőforrásra vonatkozó kérés érkezik.
A szervizmunkás által felügyelt erőforrások magukban foglalják az általa vezérelt összes oldalt, valamint az ezeken az oldalakon hivatkozott eszközöket.
Bővítse webalkalmazásait szervizmunkásokkal
A szervizmunkások a webmunkások különleges fajtái, amelyek egyedi célt szolgálnak. A hálózati kérések előtt állnak, hogy lehetővé tegyék az olyan funkciókat, mint az offline alkalmazások elérése. A szervizmunkások webalkalmazásban való használata jelentősen javíthatja a felhasználói élményt. A Service Worker API segítségével létrehozhat szervizmunkásokat, és kapcsolatba léphet velük.
