Progresywne aplikacje internetowe: przechodzenie do trybu offline

1. Witamy

Z tego modułu dowiesz się, jak przenieść aplikację internetową do trybu offline. To pierwsze z serii ćwiczeń z programowania w ramach warsztatów progresywnych aplikacji internetowych. W tej serii jest jeszcze 7 ćwiczeń.

Czego się nauczysz

• Ręczne zapisywanie skryptu service worker
• Dodawanie skryptu service worker do istniejącej aplikacji internetowej
• Użyj skryptu Service Worker i interfejsu Cache Storage API, aby udostępnić zasoby offline

Co warto wiedzieć

• Podstawowy HTML i JavaScript

Czego potrzebujesz

• Przeglądarka obsługująca skrypt service worker

2. Konfiguracja

Najpierw skopiuj lub pobierz kod startowy niezbędny do ukończenia tego ćwiczenia:

Kopiowanie repozytorium

Pobierz aplikację Zip

Jeśli skopiujesz repozytorium, upewnij się, że jesteś w gałęzi starter. Plik ZIP zawiera też kod tej gałęzi.

Ta baza kodu wymaga Node.js 14 lub nowszego. Gdy uzyskasz dostępny kod, uruchom npm ci z poziomu wiersza poleceń w folderze code, aby zainstalować wszystkie potrzebne elementy zależności. Następnie uruchom polecenie npm start, aby uruchomić serwer programowania do ćwiczeń z programowania.

Kod źródłowy README.md w pliku źródłowym zawiera wyjaśnienie dotyczące wszystkich rozproszonych plików. Dodatkowo poniżej znajdują się główne pliki, nad którymi będziesz pracować w tym ćwiczeniu z programowania:

Pliki kluczy

• js/main.js – plik JavaScript aplikacji głównej
• service-worker.js – plik service worker aplikacji

3. Testuj offline

Zanim wprowadzisz jakiekolwiek zmiany, przetestujmy, czy aplikacja internetowa nie działa offline. Aby to zrobić, wyłącz komputer i załaduj ponownie aplikację internetową lub, jeśli używasz Chrome:

1. Otwieranie Narzędzi deweloperskich w Chrome
2. Przełącz na kartę Aplikacja
3. Przełącz się na sekcję Service Worker
4. Zaznacz pole wyboru Offline
5. Odśwież stronę bez zamykania Narzędzi deweloperskich w Chrome

Po przetestowaniu witryny i załadowanie jej w trybie offline nie udało się dodać niektórych funkcji online. Odznacz pole wyboru i przejdź do następnego kroku.

4. Włącz tryb offline

Czas dodać podstawowy skrypt service worker. Będzie to 2 kroki: zarejestrowanie skryptu service worker i zapisanie zasobów w pamięci podręcznej.

Rejestrowanie skryptu service worker

Jest już pusty plik skryptu service worker, więc aby mieć pewność, że zmiany się wyświetlą, zarejestrujmy je w naszej aplikacji. Aby to zrobić, dodaj na górze strony js/main.js ten kod:

import swURL from 'sw:../service-worker.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 {
      const reg = await navigator.serviceWorker.register(swURL);
      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

Składnia importu adresu URL skryptu service worker jest niezbędna, aby nasze narzędzie do kompilacji WMR mogło prawidłowo skompilować skrypt service worker. Jeśli nie używasz WMR, zamiast tego ustaw w swURL ścieżkę do skryptu service worker.

Wyjaśnienie

Ten kod rejestruje pusty plik skryptu service worker service-worker.js po załadowaniu strony i tylko wtedy, gdy witryna obsługuje takie mechanizmy.

Zasoby w pamięci podręcznej

Aby aplikacja internetowa działała offline, przeglądarka musi odpowiadać na żądania sieci i wybierać miejsce kierowania. Aby to zrobić, dodaj do grupy service-worker.js te elementy:

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

Wróć do przeglądarki, zamknij kartę podglądu i otwórz ją ponownie. Powinny się wyświetlić console.log odnoszące się do różnych zdarzeń w skrypcie service worker.

Jeśli zdarzenia console.log się nie wyświetlają, sprawdź obszar Service Worker na karcie Aplikacje, aby upewnić się, że nie występują żadne błędy skryptu service worker i że nie jest on w stanie oczekiwania.

Jeszcze raz przejdź w tryb offline i odśwież stronę. Powinien się załadować, mimo że jesteś offline.

Wyjaśnienie

Podczas zdarzenia instalacji skryptu service worker nazwana pamięć podręczna jest otwierana za pomocą interfejsu Cache Storage API. Pliki i trasy określone w zasadzie precacheResources są następnie wczytywane do pamięci podręcznej za pomocą metody cache.addAll. Nazywa się to buforowaniem, ponieważ zapobiegawczo zapisuje zbiór plików w czasie instalacji, a nie w pamięci podręcznej, gdy jest potrzebny lub wymagany.

Gdy skrypt service worker kontroluje witrynę, wymagane zasoby przechodzą przez skrypt service worker jak serwer proxy. Każde żądanie aktywuje zdarzenie pobierania, które w przypadku tego skryptu service worker wyszukuje w pamięci podręcznej dopasowanie, jeśli znajdzie dopasowanie, odpowiadając za pomocą zasobu z pamięci podręcznej. Jeśli nie udało się dopasować, żądanie zasobu jest wysyłane normalnie.

Takie zasoby pozwalają aplikacji działać offline, unikając żądań sieciowych. Teraz aplikacja może odpowiadać, używając kodu stanu 200 offline.

5. Gratulacje!

Wiesz już, jak przenieść aplikację internetową do trybu offline przy użyciu mechanizmów service worker i interfejsu API pamięci podręcznej.

Następnym kursem z serii jest Working with Workbox.