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).
Table of Contents
Porozumění servisním pracovníkům
Service worker je typ webového pracovníka 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í.
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: Pracovníci služeb 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 aktivně nepracuje s aplikací nebo když aplikace není otevřená 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.
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 je třeba nainstalovat a aktivovat servisního pracovníka poslechem událostí instalace a aktivace pomocí posluchačů 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.
Kód tohoto projektu najdete v něm GitHub úložiště.
Vytvořte projekt Next.js
Chcete-li začít, spusťte tento příkaz a lokálně složte projekt Next.js:
npx create-next-app next-project
Přidání servisního pracovníka do aplikace Next.js zahrnuje následující kroky:
Přidání servisního pracovníka
Nejprve zaregistrujte servisního pracovníka. Aktualizujte soubor src/pages/_app.js následovně. Zahrnutí kódu do tohoto souboru zajistí, že se servisní pracovník zaregistruje při načtení aplikace a bude mít přístup ke všem prostředkům aplikace.
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(
'Service worker registered successfully. Scope:',
registration.scope
);
})
.catch((error) => {
console.error('Service worker registration failed:', error);
});
}
}, []);
return <Component {...pageProps} />;
}
Háček useEffect se spustí, když se komponenta připojí. Stejně jako v předchozím příkladu kód nejprve zkontroluje, zda prohlížeč uživatele podporuje servisní pracovníky.
Pokud podpora existuje, zaregistruje skript service worker umístěný na zadané cestě k souboru a určí jeho rozsah jako „/“. To znamená, že servisní pracovník má kontrolu nad všemi prostředky v aplikaci. Pokud chcete, můžete poskytnout podrobnější rozsah, např. „/products“.
Pokud je registrace úspěšná, zaprotokoluje zprávu o úspěchu spolu s jejím rozsahem. Pokud během procesu registrace dojde k chybě, kód ji zachytí a zaznamená chybovou zprávu.
Nainstalujte a aktivujte Service Worker
Přidejte následující kód do nového souboru public/service-worker.js.
const installEvent = () => {
self.addEventListener('install', () => {
console.log('service worker installed!!!!');
});
};installEvent();
const activateEvent = () => {
self.addEventListener('activate', () => {
console.log('service worker activated!!!');
});
};
activateEvent();
Chcete-li otestovat, zda byl servisní pracovník úspěšně zaregistrován, nainstalován a aktivován, spusťte vývojový server a otevřete aplikaci v prohlížeči.
npm run dev
Otevřete okno Nástroje pro vývojáře prohlížeče Chrome (nebo ekvivalent ve vašem prohlížeči) a přejděte na kartu Aplikace. V části Service Workers byste měli vidět servisního pracovníka, kterého jste zaregistrovali.
Když se servisní pracovník úspěšně zaregistruje, nainstaluje a aktivuje, můžete implementovat několik funkcí, jako je ukládání do mezipaměti, synchronizace na pozadí nebo odesílání oznámení push.
Ukládání zdrojů do mezipaměti pomocí servisních pracovníků
Ukládání prostředků aplikací do mezipaměti na zařízení uživatele může zlepšit výkon tím, že umožní rychlejší přístup, zejména v situacích s nespolehlivým připojením k internetu.
Chcete-li aktiva aplikace ukládat do mezipaměti, vložte do souboru service-worker.js následující kód.
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;
});
});
})
);
});
Když uživatel poprvé vstoupí na domovskou stránku, tento kód zkontroluje, zda je v mezipaměti odpověď na požadavek uložená v mezipaměti. Pokud existuje odpověď uložená v mezipaměti, služba ji vrátí klientovi.
Pokud neexistuje žádná odpověď uložená v mezipaměti, servisní pracovník načte prostředek ze serveru přes síť. Slouží odpověď klientovi a ukládá ji do mezipaměti pro budoucí požadavky.
Chcete-li zobrazit prostředky uložené v mezipaměti, otevřete kartu Aplikace v nástrojích pro vývojáře. V části Cache Storage byste měli vidět seznam prostředků uložených v mezipaměti. Můžete také zaškrtnout možnost Offline v části Service Worker a znovu načíst stránku, abyste simulovali offline prostředí.
Nyní, jakmile navštívíte domovskou stránku, bude prohlížeč poskytovat prostředky uložené v mezipaměti místo toho, aby se pokoušel o síťové požadavky na načtení dat.
Použití Service Workers ke zvýšení výkonu
Servisní pracovníci jsou výkonným nástrojem pro zvýšení výkonu aplikací Next.js. Mohou ukládat prostředky do mezipaměti, zachycovat požadavky a poskytovat offline podporu, což vše může zlepšit uživatelskou zkušenost.
Je však důležité poznamenat, že implementace a správa servisních pracovníků může být také složitá. Je důležité pečlivě zvážit potenciální výhody a nevýhody servisních pracovníků předtím, než je použijete.