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).
Spis treści:
Zrozumienie pracowników usług
Service Worker to typ web workera 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: Pracownicy usług mogą synchronizować dane i uruchamiać inne zadania w tle, nawet jeśli 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 Service Workerów: 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 należy zainstalować i aktywować pracownika usługi, nasłuchując zdarzeń instalacji i aktywacji za pomocą detektorów 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:
Dodawanie pracownika serwisu
Najpierw zarejestruj pracownika serwisu. Zaktualizuj plik src/pages/_app.js 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';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} />;
}
Hak useEffect 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 Worker 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. „/produkty”.
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 wychwyci i zapisze 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
Otwórz okno Narzędzi dla programistów przeglądarki Chrome (lub jego odpowiednik w przeglądarce) i przejdź do karty Aplikacja. W sekcji Pracownicy serwisu 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, dołącz następujący kod do pliku 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;
});
});
})
);
});
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. W sekcji Pamięć podręczna powinna zostać wyświetlona lista zasobów przechowywanych w pamięci podręcznej. Możesz także zaznaczyć opcję Offline w sekcji Service Worker i ponownie załadować stronę, aby zasymulować 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 przed ich użyciem.