1. Witamy
W tym module weźmiesz istniejącą aplikację internetową i sprawisz, że będzie działać w trybie offline. To pierwsze z serii ćwiczeń towarzyszących warsztatom na temat progresywnych aplikacji internetowych. W tej serii jest jeszcze 7 codelabów.
Czego się nauczysz
- Ręczne pisanie skryptu service worker
- Dodawanie Service Workera do istniejącej aplikacji internetowej
- Używanie skryptu service worker i interfejsu Cache Storage API do udostępniania zasobów w trybie offline
Co warto wiedzieć
- podstawowy HTML i JavaScript,
Wymagania
- Przeglądarka, która obsługuje Service Worker
2. Pierwsze kroki
Zacznij od sklonowania lub pobrania kodu startowego potrzebnego 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 kod będzie dostępny, uruchom npm ci z wiersza poleceń w folderze kodu, aby zainstalować wszystkie potrzebne zależności. Następnie uruchom npm start, aby uruchomić serwer programistyczny dla tego laboratorium.
Plik README.md kodu źródłowego zawiera wyjaśnienie wszystkich rozpowszechnianych plików. Oto najważniejsze pliki, z którymi będziesz pracować w trakcie tego ćwiczenia:
Kluczowe pliki
js/main.js– główny plik JavaScript aplikacjiservice-worker.js– plik skryptu service worker aplikacji
3. Test offline
Zanim wprowadzimy jakiekolwiek zmiany, przetestujmy aplikację, aby pokazać, że obecnie nie działa ona w trybie offline. Aby to zrobić, odłącz komputer od internetu i ponownie wczytaj aplikację internetową. Jeśli używasz Chrome:
- Otwórz Narzędzia deweloperskie w Chrome.
- Przejdź na kartę Aplikacja.
- Przejdź do sekcji Service Workers.
- Zaznacz pole wyboru Offline.
- Odświeżanie strony bez zamykania Narzędzi deweloperskich w Chrome
Po przetestowaniu witryny i potwierdzeniu, że nie wczytuje się w trybie offline, możesz dodać funkcje online. Odznacz pole wyboru offline i przejdź do następnego kroku.
4. Korzystanie z innych platform poza transmisjami
Czas dodać podstawowy service worker! Odbywa się to w 2 etapach: rejestrowanie skryptu service worker i buforowanie zasobów.
Rejestrowanie skryptu service worker
Istnieje już pusty plik service worker, więc aby mieć pewność, że zmiany zostaną wyświetlone, zarejestrujmy go w naszej 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 wczytaniu strony i tylko wtedy, gdy witryna obsługuje skrypty service worker.
Wczytywanie wstępne zasobów do pamięci podręcznej
Aby aplikacja internetowa działała w trybie offline, przeglądarka musi być w stanie odpowiadać na żądania sieciowe i wybierać, gdzie je kierować. Aby to zrobić, dodaj do 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ę pojawić console.log odpowiadające różnym zdarzeniom w usłudze Service Worker.
Następnie ponownie przejdź w tryb offline i odśwież stronę. 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 wczytywane do pamięci podręcznej za pomocą metody cache.addAll. Nazywa się to wstępnym buforowaniem, ponieważ zestaw plików jest buforowany z wyprzedzeniem podczas instalacji, a nie wtedy, gdy są potrzebne lub gdy użytkownik o nie poprosi.
Gdy service worker przejmie kontrolę nad witryną, żądane zasoby będą przechodzić 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 dopasowanie. Jeśli takie dopasowanie zostanie znalezione, skrypt odpowiada zasobem z pamięci podręcznej. Jeśli nie ma dopasowania, zasób jest żądany w normalny sposób.
Buforowanie zasobów umożliwia aplikacji działanie offline, ponieważ nie musi ona wysyłać żądań sieciowych. Teraz aplikacja może wyświetlać kod stanu 200, gdy jest offline.
5. Gratulacje!
Wiesz już, jak przełączyć aplikację internetową w tryb offline za pomocą mechanizmów Service Worker i interfejsu Cache Storage API.
Kolejny codelab z tej serii to Praca z Workboxem.