Servisní pracovníci představují skripty, které se spouštějí v pozadí a moderním webovým aplikacím otevírají cestu k efektivnímu ukládání do mezipaměti a dalším pokročilým funkcím.
Díky těmto možnostem se webové prohlížeče svými uživatelskými vlastnostmi a plynulostí přibližují nativním aplikacím.
Servisní pracovníci jsou klíčovou součástí při tvorbě progresivních webových aplikací (PWA).
Pochopení principů servisních pracovníků
Servisní pracovník je specifický typ JavaScriptového webového pracovníka, který operuje nezávisle na hlavním vlákně JavaScriptu. Tato izolace znamená, že neblokuje a nezpůsobuje prodlevy v uživatelském rozhraní aplikace ani neovlivňuje interakci uživatele.
Servisní pracovníci se chovají jako proxy servery, nacházející se mezi webovou aplikací a sítí. Mohou zachytávat příchozí požadavky a odchozí odpovědi, ukládat různé zdroje do mezipaměti a zajišťovat funkčnost aplikace i v offline režimu. Díky tomu webové aplikace běží plynuleji a jsou přívětivější, dokonce i když uživatel není připojen k internetu.
Hlavní využití servisních pracovníků
Servisní pracovníci mají široké spektrum aplikací, mezi které patří:
- PWA: Servisní pracovníci jsou nepostradatelnou součástí progresivních webových aplikací. Umožňují jim zpracovávat síťové požadavky, nabízet push notifikace, poskytovat offline podporu a zajišťovat rychlé načítání.
- Ukládání do mezipaměti: Servisní pracovníci mohou uchovávat statické prostředky aplikace, jako jsou obrázky, JavaScriptový kód a CSS soubory, v mezipaměti prohlížeče. Díky tomu prohlížeč může tyto prvky načítat z lokálního úložiště, namísto stahování ze vzdáleného serveru přes internet. Tento přístup vede k rychlejšímu načítání obsahu, což je zásadní zejména pro uživatele s nestabilním nebo pomalým připojením.
- Synchronizace na pozadí: Servisní pracovníci jsou schopni synchronizovat data a vykonávat další operace na pozadí, a to i v situaci, kdy uživatel s aplikací aktivně nepracuje, nebo když není otevřená v prohlížeči.
Implementace servisních pracovníků v aplikacích Next.js
Před tím, než se ponoříme do kódu, je užitečné porozumět mechanismu fungování servisních pracovníků. Používání servisních pracovníků se skládá ze dvou hlavních fází: registrace a aktivace.
V první fázi prohlížeč provádí registraci servisního pracovníka. Následující kód demonstruje jednoduchý příklad:
const registerServiceWorker = async () => {
if ("serviceWorker" in navigator) {
registration = await navigator.serviceWorker.register("/sw.js");
}
};registerServiceWorker();
Kód nejprve ověřuje, zda prohlížeč podporuje servisní pracovníky, což je standardní funkcionalita všech moderních prohlížečů. Pokud je podpora detekována, proběhne registrace servisního pracovníka, který se nachází na zadané cestě k souboru.
Ve fázi aktivace je nutné nainstalovat a aktivovat servisního pracovníka prostřednictvím naslouchání událostem instalace a aktivace s využitím JavaScriptových event listenerů. Zde je ukázka, jak toho dosáhnout:
registration.addEventListener("install", () => {
console.log("Servisní pracovník nainstalován");
});registration.addEventListener("activate", () => {
console.log("Servisní pracovník aktivován");
});
Tento kód lze umístit bezprostředně po procesu registrace. Měl by se spustit po úspěšném dokončení registrace servisního pracovníka.
Kód tohoto projektu je dostupný v úložišti na GitHubu.
Vytvoření projektu Next.js
Pro zahájení projektu Next.js použijte následující příkaz, který vytvoří lokální kopii projektu:
npx create-next-app next-project
Přidání servisního pracovníka do aplikace Next.js zahrnuje tyto kroky:
Přidání servisního pracovníka
Nejprve zaregistrujte servisního pracovníka. Upravte soubor src/pages/_app.js tak, aby obsahoval následující kód. Umístění kódu v tomto souboru zajistí registraci servisního pracovníka při každém načtení aplikace a umožní mu přístup ke všem jejím zdrojům.
import { useEffect } from 'react';export default function App({ Component, pageProps }) {
useEffect(() => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js', { scope: "https://www.makeuseof.com/" })
.then((registration) => {
console.log(
'Servisní pracovník úspěšně registrován. Rozsah:',
registration.scope
);
})
.catch((error) => {
console.error('Registrace servisního pracovníka selhala:', error);
});
}
}, []);
return <Component {...pageProps} />;
}
useEffect hook se spouští při připojení komponenty. Stejně jako v předchozím příkladu, kód nejprve ověřuje podporu servisních pracovníků v prohlížeči uživatele.
Pokud je podpora přítomna, zaregistruje se skript servisního pracovníka, který je umístěný na specifické cestě k souboru, a jeho rozsah je definován jako „/“. To znamená, že servisní pracovník má kontrolu nad všemi zdroji v aplikaci. Můžete zvolit i podrobnější rozsah, například „/products“.
V případě úspěšné registrace se zapíše zpráva o úspěchu spolu s rozsahem. Při výskytu chyby během registrace ji kód zachytí a vypíše chybovou zprávu.
Instalace a aktivace servisního pracovníka
Přidejte následující kód do nového souboru public/service-worker.js.
const installEvent = () => {
self.addEventListener('install', () => {
console.log('Servisní pracovník nainstalován!!!!');
});
};installEvent();
const activateEvent = () => {
self.addEventListener('activate', () => {
console.log('Servisní pracovník aktivován!!!');
});
};
activateEvent();
Chcete-li ověřit úspěšnou registraci, instalaci a aktivaci servisního pracovníka, spusťte vývojový server a otevřete aplikaci v prohlížeči.
npm run dev
Otevřete vývojářské nástroje prohlížeče Chrome (nebo ekvivalent ve vašem prohlížeči) a přejděte na kartu Aplikace. V sekci Service Workers byste měli vidět registrovaného servisního pracovníka.
Jakmile je servisní pracovník úspěšně zaregistrován, nainstalován a aktivován, můžete implementovat různé funkce, jako je ukládání do mezipaměti, synchronizace na pozadí nebo push notifikace.
Ukládání zdrojů do mezipaměti pomocí servisních pracovníků
Uchovávání zdrojů aplikací v mezipaměti zařízení uživatele vede ke zlepšení výkonu díky rychlejšímu přístupu, zejména v situacích s nestabilním internetovým připojením.
Pro ukládání prostředků aplikace do mezipaměti vložte následující kód do souboru service-worker.js.
const cacheName="test-cache";self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request).then((response) => {
return caches.open(cacheName).then((cache) => {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
Při prvním návštěvě domovské stránky uživatelem tento kód kontroluje, zda existuje odpověď na daný požadavek v mezipaměti. V případě, že je odpověď nalezena, je vrácena klientovi.
Pokud odpověď v mezipaměti neexistuje, servisní pracovník načte zdroj ze serveru přes internet. Následně je odpověď odeslána klientovi a zároveň uložena do mezipaměti pro budoucí použití.
Pro zobrazení uložených zdrojů otevřete kartu Aplikace ve vývojářských nástrojích. V sekci Cache Storage byste měli vidět seznam zdrojů uložených v mezipaměti. Můžete také zaškrtnout možnost Offline v sekci Service Worker a znovu načíst stránku pro simulaci offline prostředí.
Nyní, při každé návštěvě domovské stránky, bude prohlížeč načítat zdroje z mezipaměti, místo toho, aby se pokoušel o síťové požadavky.
Využití servisních pracovníků ke zvýšení výkonu
Servisní pracovníci jsou efektivním nástrojem pro optimalizaci výkonu aplikací Next.js. Umožňují ukládání zdrojů do mezipaměti, zachytávání požadavků a poskytování offline podpory, což vede ke zlepšení uživatelského dojmu.
Je však důležité mít na paměti, že implementace a správa servisních pracovníků může být komplexní. Před jejich použitím je tedy důležité pečlivě zvážit jejich výhody a nevýhody.