Jak zintegrować Service Workers z aplikacjami Next.js

Service Workery to skrypty działające w tle, zapewniające zaawansowane możliwości buforowania i inne funkcje nowoczesnym aplikacjom internetowym.

Funkcje te zapewniają płynną i przyjazną dla użytkownika obsługę aplikacji natywnych w przeglądarce internetowej.

Pracownicy usług są podstawowym elementem tworzenia progresywnych aplikacji internetowych (PWA).

Zrozumienie pracowników usług

Pracownik serwisu to taki typ Pracownik sieciowy JavaScript który działa w tle, oddzielony od głównego wątku JavaScript, dzięki czemu nie blokuje. Oznacza to, że nie powoduje opóźnień ani przerw w działaniu interfejsu użytkownika aplikacji ani interakcji użytkownika z nią.

Workery usług działają jako serwery proxy — znajdujące się pomiędzy aplikacjami internetowymi a siecią. Mogą przechwytywać żądania i odpowiedzi, buforować zasoby i zapewniać wsparcie w trybie offline. Dzięki temu aplikacje internetowe działają płynniej i są bardziej przyjazne dla użytkownika, nawet gdy nie jest on online.

Kluczowe aplikacje dla pracowników usług

Istnieje kilka aplikacji dla pracowników usług. Zawierają:

• PWA: Pracownicy usług zapewniają ogromną moc progresywnym aplikacjom internetowym. Wykonują niestandardowe żądania sieciowe, powiadomienia push, obsługę offline i szybkie ładowanie.
• Buforowanie: Pracownicy usług mogą przechowywać zasoby aplikacji — obrazy, kod JavaScript i pliki CSS — w pamięci podręcznej przeglądarki. Dzięki temu przeglądarka może pobrać je ze swojej pamięci podręcznej, zamiast pobierać je ze zdalnego serwera przez sieć. W rezultacie zawartość ładuje się szybciej, co jest szczególnie przydatne dla użytkowników z wolnym lub zawodnym łączem internetowym.
• Synchronizacja w tle: Service Workers mogą synchronizować dane i uruchamiać inne zadania w tle, nawet gdy użytkownik nie wchodzi w aktywną interakcję z aplikacją lub gdy aplikacja nie jest otwarta w przeglądarce.

Integracja Service Workerów w aplikacjach Next.js

Zanim zagłębisz się w kod, warto zrozumieć, jak pracują pracownicy usług. Istnieją dwie kluczowe fazy korzystania z pracowników usług: rejestracja I aktywacja.

W pierwszej fazie przeglądarka rejestruje pracownika usługi. Oto prosty przykład:

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

Kod najpierw sprawdza, czy przeglądarka obsługuje Service Workers, co robią wszystkie nowoczesne przeglądarki internetowe. Jeśli taka obsługa istnieje, następuje rejestracja pracownika usługi znajdującego się w określonej ścieżce pliku.

W fazie aktywacji musisz zainstalować i aktywować pracownika serwisu, słuchając zainstalować I Aktywuj zdarzenia za pomocą Detektory zdarzeń JavaScript. Oto jak możesz to osiągnąć:

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

Kod ten możesz dodać zaraz po procesie rejestracji. Powinien działać zaraz po pomyślnym zakończeniu procesu rejestracji pracownika usługi.

Kod tego projektu znajdziesz w jego pliku GitHub magazyn.

Utwórz projekt Next.js

Aby rozpocząć, uruchom to polecenie, aby lokalnie utworzyć szkielet projektu Next.js:

npx create-next-app next-project

Dodanie Service Workera do aplikacji Next.js obejmuje następujące kroki:

1. Zarejestruj pracownika usługi w środowisku o zasięgu globalnym.
2. Utwórz plik JavaScript procesu roboczego usługi w katalogu publicznym.

Dodawanie pracownika serwisu

Najpierw zarejestruj pracownika serwisu. Zaktualizuj src/pages/_app.js plik w następujący sposób. Dołączenie kodu do tego pliku gwarantuje, że pracownik usługi zarejestruje się podczas ładowania aplikacji i będzie miał dostęp do wszystkich zasobów aplikacji.

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 użyjEfektu hook uruchamia się po zamontowaniu komponentu. Podobnie jak w poprzednim przykładzie, kod najpierw sprawdza, czy przeglądarka użytkownika obsługuje service workery.

Jeśli obsługa istnieje, rejestruje skrypt Service Workera znajdujący się w określonej ścieżce pliku i określa jego zakres jako „/”. Oznacza to, że pracownik usługi ma kontrolę nad wszystkimi zasobami aplikacji. Jeśli chcesz, możesz podać bardziej szczegółowy zakres, np. „/products”.

Jeżeli rejestracja przebiegła pomyślnie, rejestrowany jest komunikat o powodzeniu wraz z zakresem. Jeśli podczas procesu rejestracji wystąpi błąd, kod go wykryje i zarejestruje komunikat o błędzie.

Zainstaluj i aktywuj Service Workera

Dodaj następujący kod do nowego pliku, 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();

Aby sprawdzić, czy Service Worker został pomyślnie zarejestrowany, zainstalowany i aktywowany, uruchom serwer deweloperski i otwórz aplikację w przeglądarce.

npm run dev

otwarty Narzędzia programistyczne Chrome (lub odpowiedniku przeglądarki) i przejdź do Aplikacja patka. Pod Pracownicy usług w tej sekcji powinieneś zobaczyć zarejestrowanego pracownika serwisu.

Po pomyślnym zarejestrowaniu, zainstalowaniu i aktywowaniu Service Workera można wdrożyć kilka funkcji, takich jak buforowanie, synchronizacja w tle lub wysyłanie powiadomień push.

Buforowanie zasobów za pomocą procesów Service Workers

Buforowanie zasobów aplikacji na urządzeniu użytkownika może poprawić wydajność, umożliwiając szybszy dostęp, szczególnie w sytuacjach zawodnych połączeń internetowych.

Aby buforować zasoby aplikacji, umieść następujący kod w pliku service-worker.js plik.

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;
 });
 });
 })
 );
});

Gdy użytkownik po raz pierwszy uzyskuje dostęp do strony głównej, ten kod sprawdza, czy w pamięci podręcznej znajduje się odpowiedź na żądanie. Jeśli istnieje odpowiedź w pamięci podręcznej, usługa zwraca ją klientowi.

Jeśli nie istnieje żadna odpowiedź w pamięci podręcznej, proces roboczy usługi pobiera zasób z serwera za pośrednictwem sieci. Podaje odpowiedź klientowi i buforuje ją na potrzeby przyszłych żądań.

Aby wyświetlić zasoby w pamięci podręcznej, otwórz kartę Aplikacja w narzędziach programistycznych. Pod Pamięć podręczna sekcji, powinna zostać wyświetlona lista buforowanych zasobów. Możesz także sprawdzić Nieaktywny opcja pod Pracownik serwisu sekcję i załaduj ponownie stronę, aby symulować działanie offline.

Teraz, gdy odwiedzisz stronę główną, przeglądarka będzie udostępniać zasoby przechowywane w pamięci podręcznej, zamiast próbować wysyłać żądania sieciowe w celu pobrania danych.

Korzystanie z pracowników usług w celu zwiększenia wydajności

Service Workery to potężne narzędzie zwiększające wydajność aplikacji Next.js. Mogą buforować zasoby, przechwytywać żądania i zapewniać wsparcie w trybie offline, a wszystko to może poprawić komfort użytkownika.

Należy jednak pamiętać, że wdrożenie pracowników usług i zarządzanie nimi może być również skomplikowane. Ważne jest, aby dokładnie rozważyć potencjalne zalety i wady pracowników usług, zanim z nich skorzystasz.