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

Synchronizuj dane aplikacji internetowej w tle, aby zwiększyć wygodę korzystania z aplikacji

Jeff Posnick
Joe Medley
Joe Medley
GitHub

Czy kiedykolwiek wystąpiła u Ciebie któraś z poniższych sytuacji?

  • Jazda pociągiem lub metrem przy niestabilnym lub braku połączenia.
  • Ograniczenie przez operatora po obejrzeniu zbyt wielu filmów
  • Życie w kraju, w którym przepustowość jest trudno nadążyć za popytem

Jeśli tak, to z pewnością czuliście frustrację określone czynności w internecie, i zastanawialiśmy się, dlaczego aplikacje na konkretnych platformach tak często radzą sobie lepiej. w takich sytuacjach. Aplikacje działające na określonych platformach mogą pobierać aktualne treści, np. artykuły informacyjne lub pogodę informacji z wyprzedzeniem. Nawet jeśli w metrze nie ma sieci, możesz wiadomości.

Okresowa synchronizacja w tle umożliwia okresową synchronizację aplikacji internetowych danych w tle, co przybliża aplikacje internetowe do działania .

Wypróbuj

Możesz wypróbować okresową synchronizację w tle, korzystając z prezentacji na żywo Przed użyciem upewnij się, że:

  • Używasz Chrome 80 lub nowszej wersji.
  • Ty instalacja aplikację internetową, zanim włączysz okresową synchronizację w tle.

Pojęcia i wykorzystanie

Okresowa synchronizacja w tle pozwala wyświetlać aktualne treści, gdy progresywna aplikacja internetowa działa lub uruchomiono stronę wspieraną przez skrypt service worker. Odbywa się to przez pobranie danych w w tle, gdy aplikacja lub strona nie są używane. Uniemożliwi to aplikacji treści, które nie są odświeżane po uruchomieniu. Na razie zapobiega wyświetlaniu w aplikacji wskaźnika postępu przed odświeżeniem.

Bez okresowej synchronizacji w tle aplikacje internetowe muszą używać alternatywnych metod, pobrać dane. Typowym przykładem jest używanie powiadomienia push do wybudzania usługi. . Przerwanemu przez użytkownika komunikatowi np. „Dostępne są nowe dane” Aktualizacja danych jest zasadniczo efektem ubocznym. Nadal masz możliwość korzystania z powiadomień push w przypadku naprawdę ważnych informacji, takich jak aktualności.

Okresową synchronizację w tle można łatwo pomylić z synchronizacją w tle. Chociaż mają podobne nazwy, różnią się od siebie ich zastosowaniami. Poza innymi rzeczami synchronizacji w tle używa się najczęściej do ponownego wysyłania danych na serwer, poprzednie żądanie zakończyło się niepowodzeniem.

Odpowiednie zaangażowanie użytkowników

Nieprawidłowo wykonane – okresowa synchronizacja w tle może niepotrzebnie zużywać i zasobami Google Cloud. Przed opublikowaniem przeglądarka Chrome przeprowadziła okres próbny, aby czy był on słuszny. W tej sekcji opisujemy niektóre decyzje projektowe Chrome w celu zapewnienia jak największej przydatności tej funkcji.

Pierwszą decyzją podjętą w Chrome było to, że aplikacja internetowa może używać synchronizacji w tle, jeśli użytkownik zainstalował ją na swoim urządzeniu i uruchomiła ją jako odrębną aplikację. Okresowa synchronizacja w tle jest niedostępna w kontekście zwykłej karty w Chrome.

Poza tym Chrome nie chce, aby nieużywane lub rzadko używane aplikacje internetowe zużywają baterię lub dane, Chrome zaprojektował okresową synchronizację w tle, będą musieli na niej zarabiać. Konkretnie: Chrome używa wyniku zaangażowania w witrynie (about://site-engagement/), aby określić, czy i jak często mogą być przeprowadzane okresowe synchronizacje w tle. dla danej aplikacji internetowej. Inaczej mówiąc, zdarzenie periodicsync nie zostanie w ogóle uruchomione, chyba że zdarzenie związane z zaangażowaniem wynik jest większy od zera, a jego wartość wpływa na częstotliwość, z jaką Wywoływane zdarzenie: periodicsync. Dzięki temu jedyne aplikacje synchronizujące się to te, z których aktywnie korzystasz.

Okresowa synchronizacja w tle ma pewne podobieństwa z istniejącymi interfejsami API oraz na popularnych platformach. Na przykład jednorazowa synchronizacja w tle oraz powiadomienia push pozwalają wydłużyć działanie logiki aplikacji internetowej (dzięki skrypt service worker) po zamknięciu strony przez użytkownika. Na większości platform często mają zainstalowane aplikacje, które okresowo korzystają z sieci w tle, aby zapewnić większy komfort użytkownikom w przypadku krytycznych aktualizacji, pobierania treści z wyprzedzeniem, synchronizowania danych itd. Podobnie okresowa synchronizacja w tle Wydłuża okres przechowywania logiki aplikacji internetowej tak, aby uruchamiała się regularnie co może zająć kilka minut.

Jeśli przeglądarka pozwoliła na występowanie tego błędu często i bez ograniczeń, może budzić pewne obawy dotyczące prywatności. Oto jak Chrome rozwiązał ten problem ryzyko okresowej synchronizacji w tle:

  • Synchronizacja w tle działa tylko w sieci, w której urządzenie które były wcześniej połączone. Chrome zaleca, by łączyć się tylko z sieciami obsługiwanymi przez wiarygodnych podmiotów.
  • Tak jak w przypadku każdej komunikacji internetowej, okresowa synchronizacja w tle ujawnia adres IP adres klienta, serwer, z którym komunikuje się, oraz nazwa serwera. Aby ograniczyć ekspozycję do mniejszości, gdyby aplikacja synchronizowana, gdy działała na pierwszym planie, przeglądarka ogranicza częstotliwość jej tło synchronizuje się zgodnie z częstotliwością używania jej przez użytkownika. Jeśli osoba przestaje często korzystać z aplikacji, okresowa synchronizacja w tle; przestanie się aktywować. To lepsze rozwiązanie w porównaniu z obecnym statusem w przypadku platform aplikacji.

Kiedy można go używać?

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

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

Czas synchronizacji nie jest kontrolowany przez programistów. częstotliwość synchronizacji będzie zależała od tego, jak często aplikacja jest używana. (Pamiętaj, że aplikacje działające na poszczególnych platformach tego nie robią). Zajmuje się też mocą urządzenia, stan połączenia.

Kiedy należy go używać?

Gdy mechanizm Service Worker obudzi się, aby obsłużyć zdarzenie periodicsync, masz już możliwość zażądania danych, ale nie obowiązek do tego. Obsługa musisz wziąć pod uwagę warunki sieciowe i dostępne miejsce na dane rozważanie zakupu i pobieranie w odpowiedzi różnej ilości danych. Za pomocą następujące zasoby, które mogą okazać się pomocne:

Uprawnienia

Po zainstalowaniu skryptu service worker użyj Uprawnienia API do wysyłania zapytań za periodic-background-sync. Możesz to zrobić w oknie lub kontekstu 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 synchronizacji okresowej

Jak już wspomnieliśmy, okresowa synchronizacja w tle wymaga skryptu service worker. Odzyskaj PeriodicSyncManager z użyciem ServiceWorkerRegistration.periodicSync i wywołaj register(). Rejestracja wymaga tagu i minimalnej liczby interwał synchronizacji (minInterval). Tag identyfikuje zarejestrowaną synchronizację co umożliwia zarejestrowanie wielu synchronizacji. W przykładzie poniżej nazwa tagu to 'content-sync' i 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 funkcję periodicSync.getTags(), aby pobrać tablicę tagów rejestracji. poniższy przykład używa nazw tagów do potwierdzenia, że aktualizacja pamięci podręcznej jest aktywna. Pozwoli to uniknąć Aktualizuję.

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

Możesz też użyć narzędzia getTags(), aby wyświetlić listę aktywnych rejestracji w witrynie. na stronie ustawień aplikacji, aby użytkownicy mogli włączyć lub wyłączyć określone typy aktualizacje.

Reagowanie na okresowe zdarzenie synchronizacji w tle

Aby reagować na okresowe zdarzenie synchronizacji w tle, dodaj zdarzenie periodicsync do skryptu service worker. Przekazany do niej obiekt event będzie zawierać Parametr tag pasujący do wartości użytej podczas rejestracji. Jeśli na przykład plik zarejestrowano okresową synchronizację w tle z nazwą 'content-sync', a następnie event.tag będzie mieć '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(), podając nazwę synchronizację, 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 dostępnych w ramach raportu okresowego Interfejs API synchronizacji.

  • PeriodicSyncEvent Przekazuje do modułu obsługi zdarzeń ServiceWorkerGlobalScope.onperiodicsync w przez przeglądarkę.
  • PeriodicSyncManager Rejestruje i wyrejestrowuje okresowe synchronizacje oraz udostępnia tagi dla zarejestrowanych synchronizacji. Pobierz instancję tej klasy z instancji ServiceWorkerRegistration.periodicSync usłudze.
  • ServiceWorkerGlobalScope.onperiodicsync Rejestruje moduł obsługi, który otrzymuje PeriodicSyncEvent.
  • ServiceWorkerRegistration.periodicSync Zwraca odwołanie do PeriodicSyncManager.

Przykład

Aktualizowanie treści

W tym przykładzie użyto okresowej synchronizacji w tle do pobierania i zapisywania w pamięci podręcznej aktualnych artykułów z witryny z wiadomościami lub bloga. Zwróć uwagę na nazwę tagu, która wskazuje rodzaj tej synchronizacji ('update-articles'). Wywołanie updateArticles() jest zawartym w elemencie event.waitUntil(), więc skrypt service worker nie zakończy działania, dopóki artykuły nie zostaną pobrane i zapisane.

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, aby dodać okresową synchronizację w tle z istniejącą aplikacją PWA. Ten przykład zawiera kilka przydatnych instrukcji rejestrowania, które opisują stan okresowej synchronizacji w tle z aplikacją internetową.

Debugowanie

Uzyskanie pełnego obrazu okresowej synchronizacji w tle może być wyzwaniem. podczas testowania lokalnego. Informacje o aktywnych rejestracjach, przybliżona synchronizacja i odstępy czasu, a dzienniki wcześniejszych zdarzeń synchronizacji dostarczają cennego kontekstu podczas debugowania zachowanie aplikacji internetowej. Na szczęście wszystkie te informacje dzięki eksperymentalnej funkcji w Narzędziach deweloperskich w Chrome.

Nagrywanie lokalnej aktywności

Sekcja Okresowa synchronizacja w tle w Narzędziach deweloperskich skupia się na kluczowych zdarzeniach. w okresowym cyklu życia synchronizacji w tle: zarejestrowanie się w celu synchronizacji, synchronizacji w tle i wyrejestrowania. Aby uzyskać informacje o tych zdarzeniach, kliknij Rozpocznij nagrywanie.

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

Podczas nagrywania w Narzędziach deweloperskich pojawią się pozycje odpowiadające zdarzeniom, kontekst i metadane dla każdego z nich.

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

Po jednokrotnym włączeniu nagrywania będzie ono aktywne przez maksymalnie 3 dni. dzięki którym Narzędzia deweloperskie mogą rejestrować informacje na potrzeby debugowania lokalnego związane z synchronizacją w tle. które mogą mieć miejsce nawet w kilku godzinach w przyszłości.

Symuluję zdarzenia

Nagrywanie aktywności w tle może być pomocne, ale zdarzają się sytuacje, chcesz natychmiast przetestować moduł obsługi periodicsync, bez czekania na aby było uruchamiane z normalną częstotliwością.

Możesz to zrobić w sekcji Skrypty service worker w panelu Aplikacje w Narzędzia deweloperskie w Chrome. W polu Synchronizacja okresowa możesz podać tag zdarzenia i wywoływać je dowolną liczbę razy.

Skrypty Service Workers panelu aplikacji jest widoczny komunikat o synchronizacji okresowej. polu tekstowym i przycisku.

Korzystanie z interfejsu Narzędzi deweloperskich

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

Panel aplikacji z sekcją Okresowa synchronizacja w tle