Większe możliwości w trybie offline dzięki interfejsowi Periodic Background Sync API

Synchronizuj dane aplikacji internetowej w tle, aby usługa bardziej przypominała aplikację

Czy kiedykolwiek zdarzyło Ci się być w którejś z poniższych sytuacji?

  • Jazda pociągiem lub metrem ma problemy z połączeniem sieciowym lub jego brak
  • Twój operator ograniczył dostęp po obejrzeniu zbyt wielu filmów
  • Życie w kraju, w którym przepustowość ma problem z zaspokajaniem popytu

Jeśli tak, to pewnie czujesz frustrację związaną z wykonywaniem pewnych czynności w internecie i zastanawiasz się, dlaczego aplikacje na konkretnej platformie tak często radzą sobie lepiej w takich sytuacjach. Aplikacje na danej platformie mogą z wyprzedzeniem pobierać aktualne treści, np. artykuły z wiadomościami czy informacje o pogodzie. Możesz czytać wiadomości, nawet jeśli w metrze nie ma żadnej sieci.

Okresowa synchronizacja w tle umożliwia aplikacjom internetowym okresowe synchronizowanie danych w tle, dzięki czemu aplikacje internetowe działają bliżej aplikacji z konkretnej platformy.

Wypróbuj

Możesz wypróbować okresową synchronizację w tle z aplikacją demonstracyjną na żywo. Zanim z niej skorzystasz, sprawdź, czy:

  • Używasz Chrome 80 lub nowszej wersji.
  • Zainstaluj aplikację internetową przed włączeniem okresowej synchronizacji w tle.

Pojęcia i zastosowanie

Okresowa synchronizacja w tle umożliwia wyświetlanie nowych treści po uruchomieniu progresywnej aplikacji internetowej lub strony wspomaganej przez mechanizmy Service Worker. Dane są pobierane w tle, gdy nie korzystasz ze strony lub aplikacji. Zapobiega to odświeżaniu zawartości aplikacji po jej uruchomieniu podczas jej wyświetlania. Dodatkowo dzięki temu aplikacja nie będzie pokazywać wskaźnika postępu ładowania treści przed odświeżeniem.

Bez okresowej synchronizacji w tle aplikacje internetowe muszą pobierać dane za pomocą alternatywnych metod. Typowym przykładem jest używanie powiadomienia push do wybudzania skryptu service worker. Działanie użytkownika kończy się komunikatem, np. „Dostępne są nowe dane”. Aktualizacja danych jest zasadniczo efektem ubocznym. Nadal możesz używać powiadomień push o naprawdę ważnych wiadomościach, takich jak ważne wiadomości.

Okresową synchronizację w tle można łatwo pomylić z synchronizacją w tle. Mimo że nazwy te mają podobne nazwy, ich zastosowania różnią się od siebie. Synchronizacja w tle jest zwykle używana do ponownego wysyłania danych na serwer, gdy poprzednie żądanie zakończyło się niepowodzeniem.

Właściwe zwiększanie zaangażowania użytkowników

Nieprawidłowo przeprowadzana okresowa synchronizacja w tle może powodować marnowanie zasobów. Przed wydaniem aplikacji Chrome przeprowadził okres próbny, aby sprawdzić, czy wszystko działa prawidłowo. W tej sekcji opisujemy wybrane decyzje projektowe, aby ta funkcja była jak najbardziej przydatna.

Pierwszą decyzją projektową, którą podjęła Chrome, jest to, że aplikacja internetowa może korzystać z okresowej synchronizacji w tle dopiero po zainstalowaniu jej na urządzeniu i uruchomieniu przez użytkownika jako oddzielnej aplikacji. Okresowa synchronizacja w tle nie jest dostępna w kontekście zwykłej karty w Chrome.

Poza tym Chrome nie chce, aby nieużywane lub rzadko używane aplikacje internetowe zużywały nieuzasadnione zużycie baterii lub danych, dlatego zaprojektowano okresową synchronizację w tle, dzięki której deweloperzy będą mogli na tym zarabiać. Chrome używa wyniku zaangażowania w witrynie (about://site-engagement/), aby określić, czy i jak często w przypadku danej aplikacji internetowej mogą występować okresowe synchronizacje w tle. Inaczej mówiąc, zdarzenie periodicsync nie zostanie w ogóle uruchomione, chyba że wynik zaangażowania będzie większy od zera, a jego wartość ma wpływ na częstotliwość uruchamiania tego zdarzenia periodicsync. Dzięki temu tylko aplikacje synchronizujące się w tle to te, których aktywnie używasz.

Okresowa synchronizacja w tle ma pewne podobieństwa do istniejących interfejsów API i metod działania na popularnych platformach. Na przykład jednorazowa synchronizacja w tle oraz powiadomienia push umożliwiają działanie logiki aplikacji internetowej nieco dłużej (za pomocą skryptu service worker) po zamknięciu strony przez użytkownika. Na większości platform użytkownicy mają często zainstalowane aplikacje, które okresowo łączą się z siecią w tle, aby zapewnić lepszą obsługę w przypadku krytycznych aktualizacji, pobierania z wyprzedzeniem treści, synchronizowania danych itd. Podobnie okresowa synchronizacja w tle wydłuża czas działania logiki aplikacji internetowej, tak aby uruchamiała się w regularnych odstępach czasu, przez co może trwać kilka minut.

Jeśli przeglądarka pozwoliła na wykonywanie tego często i bez ograniczeń, może to powodować problemy z prywatnością. Ryzyko okresowej synchronizacji w tle zajęto w ten sposób:

  • Synchronizacja w tle ma miejsce tylko w sieci, z którą urządzenie było wcześniej połączone. Chrome zaleca łączenie się tylko z sieciami obsługiwanymi przez wiarygodne firmy.
  • Tak jak w przypadku każdej komunikacji internetowej, okresowa synchronizacja w tle ujawnia adres IP klienta, serwer, z którym się komunikuje, oraz nazwę serwera. Aby ograniczyć ekspozycję aplikacji do tego, co by było, gdyby synchronizowała się tylko na pierwszym planie, przeglądarka ogranicza częstotliwość synchronizacji w tle, aby dostosować ją do tego, jak często użytkownik korzysta z aplikacji. Jeśli użytkownik przestanie często z niej korzystać, okresowa synchronizacja w tle zostanie zatrzymana. Jest to poprawa stanu rzeczy w porównaniu do sytuacji w aplikacjach na danej platformie.

Kiedy można go używać?

Zasady użytkowania różnią się w zależności od przeglądarki. Podsumowując, Chrome wprowadza te wymagania dotyczące okresowej synchronizacji w tle:

  • Konkretny wynik zaangażowania użytkownika.
  • Obecność wcześniej używanej sieci.

Programiści nie kontrolują czasu synchronizacji. Częstotliwość synchronizacji będzie się zgadzać z częstotliwością używania aplikacji. (Obecnie nie można tego robić w przypadku aplikacji na określonych platformach). Uwzględnia też stan zasilania i połączenia urządzenia.

Kiedy należy go używać?

Gdy skrypt service worker przebudza się, aby obsłużyć zdarzenie periodicsync, masz możliwość wysłania żądania danych, ale nie obowiązku, aby to zrobić. Podczas obsługi zdarzenia bierz pod uwagę warunki sieci i dostępną pamięć oraz w odpowiedzi pobierz różne ilości danych. Możesz skorzystać z tych zasobów:

Uprawnienia

Po zainstalowaniu skryptu service worker użyj interfejsu Permissions API, aby wysłać zapytanie dotyczące periodic-background-sync. Można to zrobić w oknie lub w kontekście skryptu service worker.

const status = await navigator.permissions.query({
  name: 'periodic-background-sync',
});
if (status.state === 'granted') {
  // Periodic background sync can be used.
} else {
  // Periodic background sync cannot be used.
}

Rejestrowanie okresowej synchronizacji

Jak już wspomnieliśmy, okresowa synchronizacja w tle wymaga skryptu service worker. Odbierz PeriodicSyncManager za pomocą ServiceWorkerRegistration.periodicSync i wywołaj na nim register(). Rejestracja wymaga zarówno tagu, jak i minimalnego odstępu czasu synchronizacji (minInterval). Tag identyfikuje zarejestrowaną synchronizację, aby można było zarejestrować wiele synchronizacji. W poniższym przykładzie nazwa tagu to 'content-sync', a minInterval to jeden dzień.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  try {
    await registration.periodicSync.register('content-sync', {
      // An interval of one day.
      minInterval: 24 * 60 * 60 * 1000,
    });
  } catch (error) {
    // Periodic background sync cannot be used.
  }
}

Weryfikacja rejestracji

Wywołaj periodicSync.getTags(), aby pobrać tablicę tagów rejestracji. W przykładzie poniżej użyto nazw tagów, aby potwierdzić, że aktualizacja pamięci podręcznej jest aktywna, i uniknąć ponownej aktualizacji.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  const tags = await registration.periodicSync.getTags();
  // Only update content if sync isn't set up.
  if (!tags.includes('content-sync')) {
    updateContentOnPageLoad();
  }
} else {
  // If periodic background sync isn't supported, always update.
  updateContentOnPageLoad();
}

Korzystając z getTags(), możesz też wyświetlić na stronie ustawień aplikacji internetowej listę aktywnych rejestracji, aby użytkownicy mogli włączać i wyłączać określone typy aktualizacji.

Reagowanie na okresowe zdarzenie synchronizacji w tle

Aby odpowiedzieć na okresowe zdarzenie synchronizacji w tle, dodaj moduł obsługi zdarzeń periodicsync do skryptu service worker. Przekazany do niego obiekt event będzie zawierał parametr tag pasujący do wartości użytej podczas rejestracji. Jeśli np. okresowa synchronizacja w tle została zarejestrowana o nazwie 'content-sync', event.tag będzie mieć wartość 'content-sync'.

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'content-sync') {
    // See the "Think before you sync" section for
    // checks you could perform before syncing.
    event.waitUntil(syncContent());
  }
  // Other logic for different tags as needed.
});

Wyrejestrowywanie synchronizacji

Aby zakończyć zarejestrowaną synchronizację, wywołaj periodicSync.unregister() i podaj nazwę synchronizacji, którą chcesz wyrejestrować.

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
  await registration.periodicSync.unregister('content-sync');
}

Interfejsy

Oto krótkie omówienie interfejsów udostępnianych przez interfejs Periodic Background Sync API.

  • PeriodicSyncEvent. Przekazano do modułu obsługi zdarzeń ServiceWorkerGlobalScope.onperiodicsync w momencie wybranym przez przeglądarkę.
  • PeriodicSyncManager. Rejestruje i wyrejestrowuje okresowe synchronizacje oraz udostępnia tagi zarejestrowanych synchronizacji. Pobierz instancję tej klasy z właściwości ServiceWorkerRegistration.periodicSync.
  • ServiceWorkerGlobalScope.onperiodicsync. Rejestruje moduł obsługi, który może odbierać PeriodicSyncEvent.
  • ServiceWorkerRegistration.periodicSync. Zwraca odwołanie do obiektu PeriodicSyncManager.

Przykład

Aktualizuję treść

W poniższym przykładzie użyto okresowej synchronizacji w tle, aby pobrać i zapisać w pamięci podręcznej aktualne artykuły z witryny z wiadomościami lub bloga. Zwróć uwagę na nazwę tagu, która wskazuje rodzaj synchronizacji, jaką jest 'update-articles'. Wywołanie updateArticles() jest pakowane w pole event.waitUntil(), aby skrypt service worker nie zakończył działania przed pobraniem i zapisaniem artykułów.

async function updateArticles() {
  const articlesCache = await caches.open('articles');
  await articlesCache.add('/api/articles');
}

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-articles') {
    event.waitUntil(updateArticles());
  }
});

Dodawanie okresowej synchronizacji w tle do istniejącej aplikacji internetowej

Ten zestaw zmian był potrzebny, aby dodać okresową synchronizację w tle do istniejącej aplikacji PWA. Ten przykład zawiera wiele przydatnych instrukcji logowania opisujących stan okresowej synchronizacji w tle w aplikacji internetowej.

Debugowanie

Uzyskanie pełnego obrazu okresowej synchronizacji w tle podczas testów lokalnych może być trudne. Informacje o aktywnych rejestracjach, przybliżonych interwałach synchronizacji i dziennikach wcześniejszych zdarzeń synchronizacji dostarczają cennego kontekstu podczas debugowania działania aplikacji internetowej. Na szczęście wszystkie te informacje można znaleźć w eksperymentalnej funkcji w Narzędziach deweloperskich w Chrome.

Rejestrowanie aktywności lokalnej

Sekcja Okresowa synchronizacja w tle narzędzi deweloperskich jest uporządkowana według kluczowych zdarzeń w cyklu okresowej synchronizacji w tle: rejestracji w celu synchronizacji, przeprowadzenia synchronizacji w tle i wyrejestrowania. Aby uzyskać informacje o tych zdarzeniach, kliknij Rozpocznij rejestrowanie.

Przycisk nagrywania w Narzędziach deweloperskich
Przycisk rejestrowania w Narzędziach deweloperskich

Podczas nagrywania w Narzędziach deweloperskich pojawią się wpisy odpowiadające poszczególnym zdarzeniom, a każde z nich zostanie zarejestrowane z uwzględnieniem kontekstu i metadanych.

Przykład zarejestrowanych danych okresowej synchronizacji w tle
Przykład zarejestrowanych danych okresowej synchronizacji w tle

Po jednorazowym włączeniu nagrywania będzie ono włączone przez maksymalnie 3 dni, co umożliwi Narzędziom deweloperskim przechwytywanie lokalnych informacji debugowania dotyczących synchronizacji w tle, które mogą mieć miejsce nawet w przyszłości.

Symulowanie zdarzeń

Rejestrowanie aktywności w tle może być pomocne, ale czasami warto przetestować moduł obsługi periodicsync od razu, bez czekania na uruchomienie zdarzenia z normalną częstotliwością.

Możesz to zrobić w sekcji Skrypty service worker w panelu aplikacji w Narzędziach deweloperskich w Chrome. W polu Synchronizacja okresowa możesz podać tag zdarzenia, który ma być używany, i wywoływać go dowolną liczbę razy.

Sekcja „Service Workers” w panelu Application zawiera pole tekstowe i przycisk „Okresowa synchronizacja”.

Korzystanie z interfejsu Narzędzi deweloperskich

Od Chrome 81 w panelu aplikacji Narzędzi deweloperskich będzie widoczna sekcja Okresowa synchronizacja w tle.

Panel aplikacji z sekcją Okresowa synchronizacja w tle