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

Synchronizuj dane aplikacji internetowej w tle, aby uzyskać lepsze wrażenia z korzystania z aplikacji

Czy kiedykolwiek znalazłeś(-aś) się w którejś z tych sytuacji?

  • jazda pociągiem lub metrem przy niestabilnym lub nieobecnym połączeniu z internetem;
  • Ograniczenie przez operatora po obejrzeniu zbyt wielu filmów
  • mieszkasz w kraju, w którym przepustowość nie nadąża za zapotrzebowaniem;

Jeśli tak, to z pewnością czujesz frustrację, jaką daje robienie pewnych rzeczy w internecie, i zastanawiasz się, dlaczego w takich sytuacjach aplikacje przeznaczone na konkretne platformy radzą sobie tak lepiej. Aplikacje przeznaczone dla konkretnej platformy mogą z wyprzedzeniem pobierać nowe treści, takie jak artykuły lub informacje o pogodzie. Wiadomości możesz czytać, nawet jeśli w metrze nie ma sieci.

Okresowa synchronizacja w tle umożliwia aplikacjom internetowym okresową synchronizację danych w tle, dzięki czemu ich działanie jest zbliżone do działania aplikacji na danej platformie.

Wypróbuj

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

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

Pojęcia i zastosowanie

Okresowa synchronizacja w tle umożliwia wyświetlanie aktualnych treści po uruchomieniu progresywnej aplikacji internetowej lub strony obsługiwanej przez usługę workera. Robi to, pobierając dane w tle, gdy aplikacja lub strona nie są używane. Zapobiega to odświeżaniu treści aplikacji po jej uruchomieniu, gdy jest wyświetlana. Co więcej, zapobiega wyświetlaniu przez aplikację Spinnera treści przed odświeżeniem.

Bez okresowej synchronizacji w tle aplikacje internetowe muszą używać alternatywnych metod pobierania danych. Typowym przykładem jest użycie powiadomienia push do przebudzenia procesu usługi. Użytkownik jest przerywany przez komunikat, np. „Dostępne są nowe dane”. Aktualizacja danych jest w istocie efektem ubocznym. Nadal możesz używać powiadomień push w przypadku naprawdę ważnych aktualizacji, takich jak ważne informacje.

Okresową synchronizację w tle można łatwo pomylić z synchronizacją w tle. Chociaż mają podobne nazwy, ich zastosowania różnią się od siebie. Synchronizacja w tle służy m.in. do ponownego wysyłania danych na serwer, gdy poprzednie żądanie zakończyło się niepowodzeniem.

Zapewnienie odpowiedniego zaangażowania użytkowników

Nieprawidłowo przeprowadzona okresowa synchronizacja w tle może powodować marnotrawienie zasobów użytkowników. Zanim wprowadziliśmy tę funkcję, przeprowadziliśmy okres próbny, aby się upewnić, że działa prawidłowo. W tej sekcji opisano niektóre decyzje projektowe, które pomogły w uczynieniu tej funkcji jak najbardziej przydatnej.

Pierwsza decyzja projektowa Chrome polega na tym, że aplikacja internetowa może korzystać z okresowej synchronizacji w tle dopiero po zainstalowaniu jej na urządzeniu i uruchomieniu jako osobnej aplikacji. Okresowa synchronizacja w tle nie jest dostępna na zwykłej karcie w Chrome.

Co więcej, Chrome nie chce, aby nieużywane lub rzadko używane aplikacje internetowe dosadnie zużywały baterię lub dane, dlatego zaprojektowała okresową synchronizację w tle, na której deweloperzy będą musieli zarabiać, zapewniając użytkownikom wartość. W szczególności Chrome używa oceny zaangażowania w witrynę (about://site-engagement/), aby określić, czy i jak często można przeprowadzać okresowe synchronizacje w tle w przypadku danej aplikacji internetowej. Innymi słowy, zdarzenie periodicsync nie zostanie wywołane, dopóki ocena zaangażowania nie będzie większa od zera, a jej wartość wpływa na częstotliwość wywoływania zdarzenia periodicsync. Dzięki temu jedynymi aplikacjami synchronizującymi w tle są te, których aktywnie używasz.

Okresowa synchronizacja w tle jest podobna do istniejących interfejsów API i praktyk na popularnych platformach. Na przykład jednorazowa synchronizacja w tle i powiadomienia push umożliwiają aplikacji internetowej (poprzez service workera) działanie przez pewien czas (po zamknięciu strony) zgodnie z logiką aplikacji. Na większości platform użytkownicy mają zainstalowane aplikacje, które okresowo uzyskują dostęp do sieci w tle, aby zapewnić lepsze wrażenia podczas pobierania ważnych aktualizacji, wstępnego pobierania treści, synchronizowania danych itp. Podobnie okresowa synchronizacja w tle wydłuża czas działania logiki aplikacji internetowej, która jest uruchamiany w regularnych odstępach czasu (np. co kilka minut).

Jeśli przeglądarka zezwala na takie sytuacje często i bez ograniczeń, może to spowodować problemy z prywatnością. Oto jak Chrome radzi sobie z ryzykiem okresowej synchronizacji w tle:

  • Synchronizacja w tle odbywa się tylko w sieci, z którą urządzenie było wcześniej połączone. Chrome zaleca nawiązywanie połączenia tylko z sieciami obsługiwanymi przez zaufane strony.
  • Podobnie jak w przypadku wszystkich innych komunikacji internetowych, okresowa synchronizacja w tle ujawnia adresy IP klienta i serwera, z którym się komunikuje, oraz nazwę tego serwera. Aby ograniczyć tę ekspozycję do poziomu, który byłby odpowiedni, gdyby aplikacja była synchronizowana tylko wtedy, gdy była na pierwszym planie, przeglądarka ogranicza częstotliwość synchronizacji aplikacji w tle, aby dopasować ją do częstotliwości korzystania z aplikacji przez użytkownika. Jeśli użytkownik przestanie często korzystać z aplikacji, okresowa synchronizacja w tle przestanie się uruchamiać. Jest to znaczna poprawa w porównaniu z obecną sytuacją w przypadku aplikacji dla poszczególnych platform.

Kiedy można go używać?

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

  • określony wynik zaangażowania użytkownika;
  • obecność wcześniej używanej sieci;

Czas synchronizacji nie jest kontrolowany przez deweloperów. Częstotliwość synchronizacji będzie zależała od tego, jak często aplikacja jest używana. (uwaga: aplikacje przeznaczone dla konkretnej platformy nie mają obecnie tej możliwości). Uwzględnia też stan zasilania i połączenia urządzenia.

Kiedy warto go używać?

Gdy mechanizm Service Worker obudzi się w celu obsłużenia zdarzenia periodicsync, masz możliwośćżądania danych, ale nie obowiązkuuwzględniania w tym celu różnych ilości danych i możliwości ich przechowywania. Możesz skorzystać z tych zasobów:

Uprawnienia

Po zainstalowaniu pracownika usługi użyj interfejsu Permissions API, aby wysłać zapytanie dotyczące periodic-background-sync. Możesz to zrobić w kontekście okna lub service workera.

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 wykorzystania usługi. Pobierz PeriodicSyncManager za pomocą ServiceWorkerRegistration.periodicSync i zadzwoń z register(). Rejestracja wymaga zarówno tagu, jak i minimalnego interwału synchronizacji (minInterval). Tag identyfikuje zarejestrowaną synchronizację, dzięki czemu można zarejestrować wiele synchronizacji. W przykładzie poniżej nazwa tagu to 'content-sync', a minInterval to 1 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.
  }
}

Weryfikowanie rejestracji

Wywołaj funkcję periodicSync.getTags(), aby pobrać tablicę tagów rejestracji. Przykład poniżej używa nazw tagów, aby potwierdzić, że aktualizowanie pamięci podręcznej jest aktywne, aby uniknąć ponownego aktualizowania.

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();
}

Za pomocą 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.

Odpowiadanie na okresowe zdarzenie synchronizacji w tle

Aby reagować na okresowe zdarzenie synchronizacji w tle, dodaj do skryptu obsługi zdarzeń periodicsync moduł obsługi zdarzeń. Przekazany do niego obiekt event będzie zawierać parametr tag pasujący do wartości użytej podczas rejestracji. Jeśli na przykład okresowa synchronizacja w tle została zarejestrowana pod nazwą 'content-sync', to event.tag będzie '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 funkcję periodicSync.unregister() z nazwą synchronizacji, którą chcesz odrejestrować.

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 API Periodic Background Sync.

  • PeriodicSyncEvent. Przekazywane do metody obsługi zdarzenia ServiceWorkerGlobalScope.onperiodicsync w dowolnym wybranym przez przeglądarkę momencie.
  • PeriodicSyncManager. Rejestruje i odrejestruje okresowe synchronizacje oraz udostępnia tagi dla zarejestrowanych synchronizacji. Pobierz instancję tej klasy z właściwości ServiceWorkerRegistration.periodicSync.
  • ServiceWorkerGlobalScope.onperiodicsync. Rejestruje moduł obsługi, aby odbierać zdarzenie PeriodicSyncEvent.
  • ServiceWorkerRegistration.periodicSync. Zwraca odwołanie do PeriodicSyncManager.

Przykład

Aktualizowanie treści

W tym przykładzie do pobierania i przechowywania w pamięci podręcznej aktualnych artykułów z witryny z wiadomości lub bloga służy okresowa synchronizacja w tle. Zwróć uwagę na nazwę tagu, która wskazuje rodzaj synchronizacji ('update-articles'). Wywołanie funkcji updateArticles() jest otoczone funkcją event.waitUntil(), aby usługa nie została zakończona, zanim artykuły zostaną pobrane i zmagazynowane.

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ł niezbędny do dodania okresowej synchronizacji w tle do istniejącej aplikacji PWA. Ten przykład zawiera wiele przydatnych instrukcji logowania, które opisują stan okresowej synchronizacji w tle w aplikacji internetowej.

Debugowanie

Uzyskanie pełnego wglądu w okresową synchronizację w tle podczas testowania lokalnego może być wyzwaniem. Informacje o aktywnych rejestracjach, przybliżonych interwałach synchronizacji i logach z poprzednich zdarzeń synchronizacji stanowią cenny kontekst podczas debugowania działania aplikacji internetowej. Na szczęście wszystkie te informacje możesz znaleźć w funkcji eksperymentalnej w Narzędziach deweloperskich Chrome.

Rejestrowanie aktywności lokalnej

Sekcja Okresowa synchronizacja w tle w Narzędziach deweloperskich skupia się na kluczowych zdarzeniach w cyklu okresowym synchronizacji w tle, takich jak rejestrowanie się do synchronizacji, wykonywanie synchronizacji w tle i wyrejestrowanie. Aby uzyskać informacje o tych zdarzeniach, kliknij Rozpocznij rejestrowanie.

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

Podczas nagrywania w DevTools będą pojawiać się wpisy odpowiadające zdarzeniom, zawierające kontekst i zapisywane w ramach każdego z nich metadane.

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

Po jednorazowym włączeniu nagrywania będzie ono aktywne przez maksymalnie 3 dni. Narzędzie DevTools będzie mogło rejestrować informacje debugowania dotyczące synchronizacji w tle, która może nastąpić nawet po kilku godzinach.

Symulowanie zdarzeń

Chociaż nagrywanie aktywności w tle może być przydatne, czasami periodicsync handlera trzeba przetestować natychmiast, bez oczekiwania na wywołanie zdarzenia w normalnym tempie.

Możesz to zrobić w sekcji Skrypty service worker w panelu Aplikacje w Narzędziach deweloperskich w Chrome. W polu Okresowa synchronizacja możesz podać tag zdarzenia, którego chcesz użyć, i wywoływać go tak często, jak chcesz.

W sekcji „Service Workers” (Pracownicy usługi) w panelu Aplikacja widać pole tekstowe i przycisk „Synchronizacja okresowa”.

Korzystanie z interfejsu Narzędzia deweloperskie

Począwszy od Chrome 81 w panelu Aplikacja w Narzędziach deweloperskich pojawi się sekcja Okresowa synchronizacja w tle.

Panel aplikacji z sekcją Okresowa synchronizacja w tle