JavaScript Academy · Lekcja

Synchronizacja w tle i aktualizacje

Proszę aktualizować pamięć podręczną i synchronizować dane po ponownym połączeniu z siecią.

Synchronizacja w tle i aktualizacje to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Aktualizowanie pamięci podręcznych

Aplikacja działająca offline musi być aktualizowana w kontrolowany sposób: dostarczać nowe zasoby, usuwać stare i ponawiać nieudane działania po przywróceniu połączenia. Service workery zapewniają narzędzia do wszystkich tych zadań.

Wersjonowane nazwy pamięci podręcznych

Najprostszym mechanizmem aktualizacji jest wersjonowana nazwa pamięci podręcznej. Zwiększenie numeru wersji tworzy nową pamięć podręczną, a stara pozostaje do usunięcia podczas aktywacji.

const CACHE = 'app-v2'; // was 'app-v1'
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE).then(c => c.addAll(ASSETS))
  );
});

Usuwanie starych pamięci podręcznych

W zdarzeniu activate wyświetl wszystkie nazwy pamięci podręcznych i usuń te, które nie odpowiadają bieżącej wersji. Zwolni to miejsce i usunie nieaktualne zasoby.

self.addEventListener('activate', (e) => {
  e.waitUntil(
    caches.keys().then(names =>
      Promise.all(
        names.filter(n => n !== CACHE)
             .map(n => caches.delete(n))
      )
    )
  );
});

Worker w stanie oczekiwania

Domyślnie nowy worker zostaje zainstalowany, ale pozostaje w stanie waiting, dopóki wszystkie strony kontrolowane przez starego workera nie zostaną zamknięte. Zapobiega to niezgodności wersji w trakcie sesji.

skipWaiting

self.skipWaiting() nakazuje oczekującemu workerowi natychmiastową aktywację i przejęcie kontroli bez czekania na zamknięcie kart. Wywołaj ją w install, jeśli chcesz, aby aktualizacje zostały zastosowane od razu.

self.addEventListener('install', (event) => {
  self.skipWaiting(); // activate as soon as installed
});

clients.claim

Po aktywacji self.clients.claim() pozwala nowemu workerowi natychmiast przejąć kontrolę nad już otwartymi stronami, zamiast kontrolować tylko przyszłe nawigacje.

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

Wykrywanie aktualizacji na stronie

Strona może nasłuchiwać nowego workera za pośrednictwem zdarzenia updatefound rejestracji, a następnie poprosić użytkownika o ponowne załadowanie strony w celu pobrania najnowszej wersji.

reg.addEventListener('updatefound', () => {
  const sw = reg.installing;
  sw.addEventListener('statechange', () => {
    if (sw.state === 'installed') {
      console.log('new version available - reload to update');
    }
  });
});

Synchronizacja w tle

Background Sync API pozwala odroczyć działanie (takie jak wysłanie formularza) do czasu, aż urządzenie uzyska połączenie. Rejestrujesz tag synchronizacji, a przeglądarka wywołuje zdarzenie sync, gdy urządzenie jest online.

// In the page, after queuing data:
reg.sync.register('send-messages')
  .then(() => console.log('sync scheduled'));

Obsługa zdarzenia sync

W service workerze nasłuchuj zdarzenia sync i dopasuj tag. Użyj waitUntil, aby przeglądarka utrzymała workera przy życiu do czasu zakończenia ponownej próby.

self.addEventListener('sync', (event) => {
  if (event.tag === 'send-messages') {
    event.waitUntil(sendQueuedMessages());
  }
});

Wzorzec: kolejka, a następnie synchronizacja

Solidny przepływ działania offline wygląda następująco: zapisz oczekujące działanie w IndexedDB, zarejestruj synchronizację, a w module obsługi sync odczytaj kolejkę i wyślij elementy za pomocą POST, usuwając je po pomyślnym zakończeniu.

async function sendQueuedMessages() {
  const items = await readQueueFromIndexedDB();
  for (const item of items) {
    await fetch('/api/messages', {
      method: 'POST',
      body: JSON.stringify(item)
    });
  }
  await clearQueue();
}

Podsumowanie aktualizacji i synchronizacji

Razem funkcje te zwiększają odporność aplikacji: wersjonowane pamięci podręczne i ich czyszczenie zapewniają aktualność zasobów, skipWaiting/clients.claim kontrolują moment wdrożenia, a Background Sync niezawodnie kończy działania, gdy użytkownik ponownie znajdzie się online.

Szybki test

Sprawdź swoją wiedzę na temat aktualizacji i synchronizacji w tle.

Podsumowanie

Poznałeś(-aś) synchronizację w tle i aktualizacje:

Używaj wersjonowanych nazw pamięci podręcznych i usuwaj stare pamięci w zdarzeniu activate.
skipWaiting i clients.claim kontrolują moment aktualizacji.
Wykrywaj nowe wersje za pomocą updatefound.
Background Sync odracza działania do czasu uzyskania połączenia, korzystając ze zdarzenia sync.
Umieszczaj działania w kolejce w IndexedDB, a następnie opróżniaj ją podczas synchronizacji.

Ukończyłeś(-aś) kurs Service Workers i pamięci podręcznych offline.

Często zadawane pytania

Czy lekcja „Synchronizacja w tle i aktualizacje” jest bezpłatna?

Tak — pełny tekst „Synchronizacja w tle i aktualizacje” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Synchronizacja w tle i aktualizacje”?

Proszę aktualizować pamięć podręczną i synchronizować dane po ponownym połączeniu z siecią. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Synchronizacja w tle i aktualizacje”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy