1. Witamy
W tym module weźmiesz istniejącą aplikację internetową i sprawisz, że będzie działać offline. To pierwszy z serii modułów towarzyszących warsztatom dotyczącym progresywnych aplikacji internetowych. Ta seria obejmuje jeszcze 7 modułów.
Czego się nauczysz
- Ręczne pisanie skryptu service worker
- Dodawanie skryptu service worker do istniejącej aplikacji internetowej
- Korzystanie ze skryptu service worker i interfejsu Cache Storage API, aby udostępniać zasoby offline
Co warto wiedzieć
- Podstawy HTML i JavaScript
Czego będziesz potrzebować
- Przeglądarka obsługująca skrypty service worker
2. Konfiguracja
Na początek sklonuj lub pobierz kod startowy potrzebny do ukończenia tego ćwiczenia:
Jeśli klonujesz repozytorium, upewnij się, że jesteś w gałęzi starter. Plik ZIP zawiera też kod tej gałęzi.
Ten kod wymaga Node.js w wersji 14 lub nowszej. Gdy masz już kod, uruchom polecenie npm ci w wierszu poleceń w folderze kodu, aby zainstalować wszystkie potrzebne zależności. Następnie uruchom polecenie npm start, aby uruchomić serwer deweloperski na potrzeby modułu.
Plik README.md w kodzie źródłowym zawiera wyjaśnienie wszystkich rozpowszechnianych plików. Oto kluczowe istniejące pliki, z którymi będziesz pracować w tym module:
Kluczowe pliki
js/main.js– główny plik JavaScript aplikacjiservice-worker.js– plik skryptu service worker aplikacji
3. Testowanie offline
Zanim wprowadzisz jakiekolwiek zmiany, przetestuj, czy aplikacja internetowa nie działa obecnie offline. Aby to zrobić, odłącz komputer od internetu i ponownie załaduj aplikację internetową lub, jeśli używasz Chrome:
- Otwórz Narzędzia deweloperskie w Chrome.
- Otwórz kartę Aplikacja.
- Otwórz sekcję Skrypty service worker.
- Zaznacz pole wyboru Offline.
- Odśwież stronę bez zamykania Narzędzi deweloperskich w Chrome.
Po przetestowaniu witryny i stwierdzeniu, że nie można jej załadować offline, czas dodać funkcje online. Odznacz pole wyboru Offline i przejdź do następnego kroku.
4. Uruchamianie offline
Czas dodać podstawowy skrypt service worker. Zrobisz to w 2 krokach: zarejestrujesz skrypt service worker i zapiszesz zasoby w pamięci podręcznej.
Rejestrowanie skryptu service worker
Istnieje już pusty plik skryptu service worker, więc aby zmiany były widoczne, zarejestruj go w aplikacji. Aby to zrobić, dodaj ten kod na początku pliku js/main.js:
// Register the service worker
if ('serviceWorker' in navigator) {
// Wait for the 'load' event to not block other work
window.addEventListener('load', async () => {
// Try to register the service worker.
try {
// Capture the registration for later use, if needed
let reg;
// Use ES Module version of our Service Worker in development
if (import.meta.env?.DEV) {
reg = await navigator.serviceWorker.register('/service-worker.js', {
type: 'module',
});
} else {
// In production, use the normal service worker registration
reg = await navigator.serviceWorker.register('/service-worker.js');
}
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
Wyjaśnienie
Ten kod rejestruje pusty plik skryptu service worker service-worker.js po załadowaniu strony i tylko wtedy, gdy witryna obsługuje skrypty service worker.
Wstępne zapisywanie zasobów w pamięci podręcznej
Aby aplikacja internetowa działała offline, przeglądarka musi być w stanie odpowiadać na żądania sieciowe i wybierać, gdzie je kierować. Aby to zrobić, dodaj ten kod do pliku service-worker.js:
// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
console.log('Service worker install event!');
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});
self.addEventListener('activate', (event) => {
console.log('Service worker activate event!');
});
// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}),
);
});
Teraz wróć do przeglądarki, zamknij kartę podglądu i otwórz ją ponownie. Powinny się wyświetlić komunikaty console.log odpowiadające różnym zdarzeniom w skrypcie service worker.
Następnie ponownie przejdź do trybu offline i odśwież witrynę. Powinna się załadować, mimo że jesteś offline.
Wyjaśnienie
Podczas zdarzenia instalacji skryptu service worker otwierana jest nazwana pamięć podręczna za pomocą interfejsu Cache Storage API. Pliki i trasy określone w precacheResources są następnie ładowane do pamięci podręcznej za pomocą metody cache.addAll. Nazywa się to wstępnym zapisywaniem w pamięci podręcznej, ponieważ zestaw plików jest zapisywany w pamięci podręcznej podczas instalacji, a nie wtedy, gdy są potrzebne lub gdy o nie poprosisz.
Gdy skrypt service worker kontroluje witrynę, żądane zasoby przechodzą przez niego jak przez serwer proxy. Każde żądanie wywołuje zdarzenie pobierania, które w tym skrypcie service worker wyszukuje w pamięci podręcznej pasujący element. Jeśli go znajdzie, odpowiada zasobem z pamięci podręcznej. Jeśli nie znajdzie pasującego elementu, zasób jest żądany normalnie.
Zapisywanie zasobów w pamięci podręcznej umożliwia aplikacji działanie offline, ponieważ nie musi ona wysyłać żądań sieciowych. Teraz aplikacja może odpowiadać kodem stanu 200, gdy jest offline.
5. Gratulacje!
Dowiedziałeś się, jak uruchomić aplikację internetową offline za pomocą skryptów service worker i interfejsu Cache Storage API.
Następny moduł z tej serii to Praca z Workbox.