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 połączeniu z internetem lub bez niego;
- Twój dostawca usług ograniczył prędkość po obejrzeniu zbyt wielu filmów
- mieszkasz w kraju, w którym przepustowość nie nadąża za zapotrzebowaniem;
Jeśli tak, to pewnie wiesz, jak frustrujące jest wykonywanie niektórych czynności w internecie i zastanawiasz się, dlaczego w takich sytuacjach aplikacje na konkretne platformy tak często radzą sobie lepiej. Aplikacje platformowe mogą z wyprzedzeniem pobierać nowe treści, takie jak artykuły informacyjne czy informacje o pogodzie. Nawet jeśli w metro nie ma sieci, nadal możesz czytać wiadomości.
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. Przed jej użyciem upewnij się, że:
- 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 nowych 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 uruchomieniu podczas jej wyświetlania. Co więcej, zapobiega wyświetlaniu przez aplikację Spinnera treści przed odświeżeniem.
Bez okresowej synchronizacji w tle aplikacje internetowe muszą stosować alternatywne metody pobierania danych. Typowym przykładem jest użycie powiadomienia push do pobudzenia 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.
Okresowa synchronizacja w tle jest łatwo mylona 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 upewnić się, ż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 jest niedostępna w kontekście zwykłej karty w Chrome.
Ponadto, ponieważ Chrome nie chce, aby nieużywane lub rzadko używane aplikacje internetowe bez potrzeby zużywały baterię lub dane, Chrome zostało zaprojektowane tak, aby okresowa synchronizacja w tle była możliwa tylko wtedy, gdy deweloperzy zapewnią użytkownikom odpowiednią 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 tylko aktywnie używane aplikacje będą synchronizowane w tle.
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 to często i bez ograniczeń, może to naruszać prywatność. Oto, jak Chrome rozwiązał ten problem w przypadku 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 połączeń 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 stawia następujące 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 dopasowana do częstotliwości korzystania z aplikacji. (uwaga: aplikacje przeznaczone do konkretnej platformy nie mają obecnie takiej możliwości). Uwzględnia też stan zasilania i połączenia urządzenia.
Kiedy warto go używać?
Gdy Twój serwis worker wybudzi się, aby obsłużyć zdarzenie periodicsync, masz możliwość wysłania żądania danych, ale nie masz obowiązku robić tego. Podczas obsługi tego zdarzenia powinieneś wziąć pod uwagę warunki sieci i dostępną pamięć masową oraz pobrać w odpowiedzi różne ilości danych. Możesz skorzystać z tych materiałó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 usługi w tle. 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
Aby pobrać tablicę tagów rejestracji, wywołaj funkcję periodicSync.getTags(). 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 okresową synchronizację w tle, dodaj do swojego serwisu workera periodicsync. Przekazywany mu obiekt event będzie zawierać parametr tag o wartości odpowiadającej 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.
});
Rejestrowanie 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ótki przegląd interfejsów udostępnianych przez interfejs API Periodic Background Sync.
PeriodicSyncEvent. Przekazany do obsługi zdarzeńServiceWorkerGlobalScope.onperiodicsyncw 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ć zdarzeniePeriodicSyncEvent.ServiceWorkerRegistration.periodicSync. Zwraca odwołanie doPeriodicSyncManager.
Przykład
Aktualizowanie treści
W tym przykładzie używana jest okresowa synchronizacja w tle, aby pobierać i przechowywać 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 ('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ł potrzebny do dodania okresowej synchronizacji w tle do istniejącej PWA. Ten przykład zawiera wiele przydatnych instrukcji logowania, które opisują stan okresowej synchronizacji w tle w aplikacji internetowej.
Debugowanie
Podczas testowania lokalnie trudno jest uzyskać kompleksowy wgląd w okresową synchronizację w tle. Informacje o aktywnych rejestracjach, przybliżonych interwałach synchronizacji i logach z poprzednich zdarzeń synchronizacji stanowią cenny kontekst podczas debugowania zachowania 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 DevTools jest zorganizowana wokół kluczowych zdarzeń w cyklu okresowej synchronizacji w tle: rejestrowanie się na potrzeby synchronizacji, wykonywanie synchronizacji w tle i wyrejestrowanie. Aby uzyskać informacje o tych zdarzeniach, kliknij Rozpocznij nagrywanie.
Podczas nagrywania w DevTools będą pojawiać się wpisy odpowiadające zdarzeniom, zawierające kontekst i zapisywane w ramach każdego z nich metadane.
Po jednorazowym włączeniu nagrywania będzie ono aktywne przez maksymalnie 3 dni, co pozwoli Narzędziom deweloperskim rejestrować informacje o debugowaniu lokalnym dotyczące synchronizacji w tle, które mogą wystąpić nawet za kilka godzin.
Symulowanie zdarzeń
Chociaż nagrywanie aktywności w tle może być przydatne, czasami periodicsync zechcesz przetestować metodę obsługi od razu, bez czekania na wystąpienie zdarzenia w normalnym tempie.
Możesz to zrobić w sekcji Service Workers w panelu Aplikacja w Narzędziach deweloperskich Chrome. W polu Okresowa synchronizacja możesz podać tag zdarzenia, którego chcesz użyć, i wywoływać go tak często, jak chcesz.
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.
