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;
- Twój dostawca usług internetowych 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ą 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, aby otrzymywać naprawdę ważne informacje, takie jak ważne wiadomości.
Okresowa synchronizacja w tle może być mylona z synchronizacją w tle. Chociaż mają podobne nazwy, ich zastosowania różnią się od siebie. Synchronizacja w tle jest najczęściej używana 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ą się synchronizować 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 jej service workera) działanie przez pewien czas po zamknięciu strony przez użytkownika. Na większości platform użytkownicy mają zainstalowane aplikacje, które okresowo uzyskują dostęp do sieci w tle, aby zapewnić lepsze działanie takich funkcji, jak ważne aktualizacje, wstępne pobieranie treści i synchronizacja danych. Podobnie okresowe synchronizowanie w tle wydłuża czas działania logiki aplikacji internetowej, która może działać 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 podmioty.
- 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 do poziomu zgodnego z 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 ogólna poprawa w porównaniu z obecną sytuacją w przypadku aplikacji na konkretne platformy.
Kiedy można go używać?
Zasady korzystania różnią się w zależności od przeglądarki. Podsumowując, Chrome stawia 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 dopasowana do częstotliwości korzystania z aplikacji. (uwaga: aplikacje przeznaczone dla konkretnej platformy obecnie tego nie robią). 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 API uprawnień, 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 workera. 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 tym przykładzie 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.
}
}
Weryfikacja rejestracji
Aby pobrać tablicę tagów rejestracji, wywołaj funkcję periodicSync.getTags(). W tym przykładzie nazwy tagów służą do potwierdzenia, ż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 element periodicsync event handler. 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ótkie omówienie interfejsów udostępnianych przez interfejs API Periodic Background Sync.
PeriodicSyncEvent. Przekazany do obsługi zdarzeńServiceWorkerGlobalScope.onperiodicsyncw czasie wybranym przez przeglądarkę.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
W następnych sekcjach znajdziesz kilka przykładów użycia interfejsu Periodic Background Sync API.
Prześlij treść
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(), dzięki czemu usługa nie zostanie zakończona, dopóki artykuły nie 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 okresowego synchronizowania w tle w aplikacji internetowej.
Debugowanie interfejsu Periodic Background Sync API
Podczas testowania lokalnie trudno jest uzyskać kompleksowy widok okresowej synchronizacji 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 Narzędziach dla deweloperów 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 wraz z kontekstem i zapisanymi metadanymi.
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ć od razu, bez czekania na zdarzenie o normalnej częstotliwości.
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ędzi deweloperskich
Począwszy od Chrome 81 w panelu Aplikacja w Narzędziach deweloperskich pojawi się sekcja Okresowa synchronizacja w tle.
