Jak integrovat servisní pracovníky do aplikací Next.js

Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Servisní pracovníci jsou skripty, které běží na pozadí a poskytují moderním webovým aplikacím výkonné možnosti ukládání do mezipaměti a další funkce.

Tyto funkce přinášejí do webového prohlížeče bezproblémový a uživatelsky přívětivý zážitek z nativních aplikací.

Servisní pracovníci jsou základní složkou při vytváření progresivních webových aplikací (PWA).

Porozumění servisním pracovníkům

Servisní pracovník je typ Webový pracovník JavaScriptu který běží na pozadí, odděleně od hlavního vlákna JavaScriptu, takže je neblokující. To znamená, že nezpůsobuje zpoždění nebo přerušení uživatelského rozhraní aplikace nebo interakce uživatele s ní.

Displej notebooku s kódem na obrazovce a držák na pera s pery na boku.

Servisní pracovníci fungují jako proxy servery – sedí mezi webovými aplikacemi a sítí. Mohou zachycovat požadavky a odpovědi, ukládat prostředky do mezipaměti a poskytovat offline podporu. To pomáhá zajistit, že webové aplikace budou bezproblémovější a uživatelsky přívětivější, i když uživatel není online.

Klíčové aplikace pro servisní pracovníky

Existuje několik aplikací pro servisní pracovníky. Obsahují:

PWA: Servisní pracovníci poskytují progresivním webovým aplikacím velkou sílu. Provádějí vlastní síťové požadavky, push notifikace, offline podporu a rychlé načítání.
Ukládání do mezipaměti: Servisní pracovníci mohou ukládat prostředky aplikace – obrázky, kód JavaScript a soubory CSS – do mezipaměti prohlížeče. To prohlížeči umožňuje načíst je ze své mezipaměti místo toho, aby je načítal ze vzdáleného serveru přes síť. V důsledku toho se obsah načítá rychleji, což je užitečné zejména pro uživatele s pomalým nebo nespolehlivým internetovým připojením.
Synchronizace na pozadí: Servisní pracovníci mohou synchronizovat data a spouštět další úlohy na pozadí, i když uživatel s aplikací aktivně neinteraguje nebo když aplikace není otevřena v prohlížeči.

Integrace Service Workers v aplikacích Next.js

Než se ponoříte do kódu, pomůže vám pochopit, jak servisní pracovníci pracují. Existují dvě klíčové fáze používání servisních pracovníků: Registrace a aktivace .

jak vidět dpi obrázku

Během první fáze prohlížeč zaregistruje servisního pracovníka. Zde je jednoduchý příklad:

const registerServiceWorker = async () => { 
  if ("serviceWorker" in navigator) { 
    registration = await navigator.serviceWorker.register("/sw.js"); 
  } 
}; 
 
registerServiceWorker();

Kód nejprve zkontroluje, zda prohlížeč podporuje servisní pracovníky, což dělají všechny moderní webové prohlížeče. Pokud tato podpora existuje, pokračuje v registraci servisního pracovníka umístěného na zadané cestě k souboru.

Ve fázi aktivace musíte nainstalovat a aktivovat servisního pracovníka poslechem Nainstalujte a aktivovat události pomocí Posluchače událostí JavaScriptu . Zde je návod, jak toho můžete dosáhnout:

registration.addEventListener("install", () => { 
    console.log("Service worker installed"); 
}); 
 
registration.addEventListener("activate", () => { 
    console.log("Service worker activated"); 
});

Tento kód můžete vložit hned po procesu registrace. Mělo by se spustit hned po úspěšném procesu registrace servisního pracovníka.