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

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 JavaScript webový pracovník 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: 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ě nekomunikuje 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 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.

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:

1. Zaregistrujte servisního pracovníka v prostředí globálního rozsahu.
2. Vytvořte soubor JavaScript service worker ve veřejném adresáři.

Přidání servisního pracovníka

Nejprve zaregistrujte servisního pracovníka. Aktualizujte src/pages/_app.js soubor 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';
exportdefaultfunctionApp({ Component, pageProps }) {
 useEffect(() => {
if ('serviceWorker'in navigator) {
 navigator.serviceWorker
 .register('/service-worker.js', { scope: '/' })
 .then((registration) => {
console.log(
'Service worker registered successfully. Scope:',
 registration.scope
 );
 })
 .catch((error) => {
console.error('Service worker registration failed:', error);
 });
 }
 }, []);
return<Component {...pageProps} />;
} 

The useEffect hák spouští, 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ŘENO Vývojářské nástroje Chrome okno (nebo ekvivalent vašeho prohlížeče) a přejděte do aplikace tab. Pod Servisní pracovníci měli byste 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í push notifikací.

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 následující kód service-worker.js soubor.

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. Pod Cache Storage části, měli byste vidět seznam aktiv v mezipaměti. Můžete také zkontrolovat Offline možnost pod Servisní pracovník a znovu načtěte 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é si uvědomit, že implementace a správa servisních pracovníků může být také složitá. Než je použijete, je důležité pečlivě zvážit potenciální výhody a nevýhody servisních pracovníků.