Synchronizowanie danych aplikacji internetowej w tle, aby zapewnić wrażenia podobne do korzystania z aplikacji
Czy kiedykolwiek zdarzyła Ci się któraś z tych sytuacji?
- podczas jazdy pociągiem lub metrem, gdy połączenie jest niestabilne lub niedostępne;
- zostało ograniczone przez operatora po obejrzeniu zbyt wielu filmów,
- mieszkać w kraju, w którym przepustowość nie nadąża za popytem;
Jeśli tak, z pewnością znasz frustrację związaną z wykonywaniem pewnych czynności w internecie i zastanawiasz się, dlaczego aplikacje na konkretne platformy tak często radzą sobie lepiej w takich sytuacjach. Aplikacje na poszczególne platformy mogą z wyprzedzeniem pobierać nowe treści, takie jak artykuły informacyjne czy prognozy pogody. Nawet jeśli w metrze nie ma sieci, nadal możesz czytać wiadomości.
Okresowa synchronizacja w tle umożliwia aplikacjom internetowym okresową synchronizację danych w tle, co sprawia, że działają one podobnie do aplikacji na konkretną platformę.
Wypróbuj
DevTools Tips to progresywna aplikacja internetowa, która korzysta z interfejsu Periodic Background Sync API. Progresywna aplikacja internetowa DevTools Tips codziennie pobiera nowe wskazówki dotyczące narzędzi deweloperskich i przechowuje je w pamięci podręcznej, dzięki czemu użytkownicy mogą uzyskać do nich dostęp przy następnym otwarciu aplikacji, niezależnie od tego, czy są online. Aby interfejs Periodic Background Sync API był dostępny, zainstaluj aplikację.
Otwórz kod źródłowy na GitHubie. W szczególności aplikacja rejestruje okresową synchronizację w funkcji registerPeriodicSync(). W kodzie service worker aplikacja nasłuchuje zdarzenia periodicsync.
Pojęcia i użycie
Okresowa synchronizacja w tle umożliwia wyświetlanie aktualnych treści po uruchomieniu progresywnej aplikacji internetowej lub strony obsługiwanej przez service workera. W tym celu pobiera dane w tle, gdy aplikacja lub strona nie jest używana. Zapobiega to odświeżaniu treści aplikacji po jej uruchomieniu, gdy jest ona wyświetlana. Co więcej, zapobiega wyświetlaniu przez aplikację wskaźnika ładowania 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 wybudzenia service workera. Użytkownikowi wyświetla się komunikat, np. „dostępne są nowe dane”. Aktualizacja danych jest w zasadzie efektem ubocznym. Nadal możesz używać powiadomień push w przypadku naprawdę ważnych informacji, takich jak istotne, najnowsze wiadomości.
Okresowa synchronizacja w tle może być mylona z synchronizacją w tle. Chociaż mają podobne nazwy, ich zastosowania są różne. Synchronizacja w tle jest najczęściej używana do ponownego wysyłania danych na serwer, gdy poprzednie żądanie nie powiodło się.
Prawidłowe zaangażowanie użytkowników
Nieprawidłowo przeprowadzona okresowa synchronizacja w tle może powodować marnowanie zasobów użytkowników. Przed udostępnieniem Chrome przetestował tę funkcję, aby upewnić się, że działa prawidłowo. W tej sekcji wyjaśniamy niektóre decyzje projektowe, które podjęliśmy, aby ta funkcja była jak najbardziej przydatna.
Pierwszą decyzją projektową Chrome było to, ż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 w kontekście zwykłej karty w Chrome.
Ponadto Chrome nie chce, aby nieużywane lub rzadko używane aplikacje internetowe bez potrzeby zużywały baterię lub dane, dlatego okresowa synchronizacja w tle została zaprojektowana tak, aby deweloperzy musieli na nią zasłużyć, zapewniając użytkownikom wartość. Chrome używa oceny zaangażowania w witrynę (about://site-engagement/), aby określić, czy i jak często mogą występować okresowe synchronizacje w tle w przypadku danej aplikacji internetowej. Innymi słowy, zdarzenie periodicsync nie zostanie wywołane, chyba że ocena zaangażowania jest większa od zera, a jej wartość wpływa na częstotliwość wywoływania zdarzenia periodicsync. Dzięki temu w tle będą synchronizowane tylko te aplikacje, 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 pozwalają logice aplikacji internetowej działać nieco dłużej (za pomocą jej skryptu service worker) 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 wrażenia podczas wykonywania takich działań jak ważne aktualizacje, wstępne pobieranie treści i synchronizacja danych. Podobnie okresowa synchronizacja w tle wydłuża czas działania logiki aplikacji internetowej, która może być uruchamiana regularnie przez kilka minut.
Gdyby przeglądarka często i bez ograniczeń zezwalała na takie działanie, mogłoby to budzić kwestie dotyczące prywatności. Oto jak Chrome radzi sobie z tym zagrożeniem 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 łączenie się tylko z sieciami obsługiwanymi przez zaufane podmioty.
- Podobnie jak w przypadku wszystkich połączeń internetowych, okresowa synchronizacja w tle ujawnia adresy IP klienta, serwera, z którym się komunikuje, oraz nazwę serwera. Aby ograniczyć to narażenie do poziomu, który byłby osiągnięty, gdyby aplikacja synchronizowała się tylko wtedy, gdy jest na pierwszym planie, przeglądarka ogranicza częstotliwość synchronizacji w tle aplikacji, aby dostosować ją do tego, jak często użytkownik korzysta z danej aplikacji. Jeśli użytkownik przestanie często korzystać z aplikacji, okresowa synchronizacja w tle przestanie się uruchamiać. Jest to poprawa w stosunku do obecnego stanu rzeczy w aplikacjach na konkretne platformy.
Kiedy można z niej korzystać?
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żytkowników.
- Obecność wcześniej używanej sieci.
Deweloperzy nie mają wpływu na czas synchronizacji. Częstotliwość synchronizacji będzie zależeć od tego, jak często używana jest aplikacja. (Pamiętaj, że aplikacje na konkretne platformy tego nie robią). Uwzględnia też stan zasilania i połączenia urządzenia.
Kiedy należy go używać?
Gdy proces roboczy usługi zostanie wybudzony w celu obsługi zdarzenia periodicsync, masz możliwość zażądania danych, ale nie obowiązek tego robić. Podczas obsługi zdarzenia należy wziąć pod uwagę warunki sieciowe i dostępną pamięć oraz pobrać odpowiednią ilość danych. Aby uzyskać pomoc, możesz skorzystać z tych materiałów:
Uprawnienia
Po zainstalowaniu usługi Service Worker użyj interfejsu Permissions API, aby wysłać zapytanie o periodic-background-sync. Możesz to zrobić w kontekście okna lub procesu roboczego usługi.
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. Odzyskaj PeriodicSyncManager za pomocą ServiceWorkerRegistration.periodicSync i zadzwoń na register(). Rejestracja wymaga tagu i minimalnego interwału synchronizacji (minInterval). Tag identyfikuje zarejestrowaną synchronizację, dzięki czemu można zarejestrować wiele synchronizacji. W poniższym przykładzie nazwa tagu to 'content-sync', a wartość 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 periodicSync.getTags(), aby pobrać tablicę tagów rejestracji. W tym przykładzie 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();
}
Możesz też użyć getTags(), aby wyświetlić listę aktywnych rejestracji na stronie ustawień aplikacji internetowej, dzięki czemu użytkownicy będą mogli włączać i wyłączać określone typy aktualizacji.
Odpowiadanie na okresową synchronizację w tle
Aby odpowiedzieć na zdarzenie okresowej synchronizacji w tle, dodaj do pliku service worker periodicsync event
handler. Przekazany do niego obiekt event będzie zawierać parametr tag zgodny z wartością używaną podczas rejestracji. Jeśli na przykład okresowa synchronizacja w tle została zarejestrowana pod nazwą 'content-sync', to 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 funkcję periodicSync.unregister() z 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 podsumowanie interfejsów udostępnianych przez interfejs Periodic Background Sync API.
PeriodicSyncEvent. Przekazywane do modułu obsługi zdarzeńServiceWorkerGlobalScope.onperiodicsyncw 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 będzie odbieraćPeriodicSyncEvent.ServiceWorkerRegistration.periodicSync. Zwraca odniesienie doPeriodicSyncManager.
Przykład
W kolejnych sekcjach znajdziesz przykłady użycia interfejsu Periodic Background Sync API.
Prześlij treść
W przykładzie poniżej użyto okresowej synchronizacji w tle do pobierania i buforowania aktualnych artykułów z witryny z wiadomościami lub bloga. Zwróć uwagę na nazwę tagu, która wskazuje rodzaj synchronizacji ('update-articles'). Wywołanie updateArticles() jest zawarte w event.waitUntil(), aby skrypt service worker nie został zakończony 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 kilka przydatnych instrukcji logowania, które opisują stan okresowej synchronizacji w tle w aplikacji internetowej.
Debugowanie interfejsu Periodic Background Sync API
Uzyskanie kompleksowego wglądu w okresową synchronizację w tle podczas testowania lokalnego może być trudne. Informacje o aktywnych rejestracjach, przybliżonych interwałach synchronizacji i dziennikach poprzednich zdarzeń synchronizacji dostarczają cennego kontekstu podczas debugowania działania aplikacji internetowej. Na szczęście wszystkie te informacje znajdziesz w eksperymentalnej funkcji Narzędzi deweloperskich w Chrome.
Rejestrowanie aktywności lokalnej
Sekcja Okresowa synchronizacja w tle w Narzędziach deweloperskich jest podzielona na kluczowe zdarzenia w cyklu życia okresowej synchronizacji w tle: rejestracja synchronizacji, przeprowadzanie synchronizacji w tle i wyrejestrowywanie. Aby uzyskać informacje o tych zdarzeniach, kliknij Zacznij nagrywać.
Podczas nagrywania w Narzędziach deweloperskich będą się pojawiać wpisy odpowiadające zdarzeniom, a dla każdego z nich będą rejestrowane kontekst i metadane.
Po jednorazowym włączeniu nagrywania pozostanie ono włączone przez maksymalnie 3 dni, dzięki czemu Narzędzia deweloperskie będą mogły rejestrować lokalne informacje na potrzeby debugowania dotyczące synchronizacji w tle, które mogą wystąpić nawet za kilka godzin.
Symulowanie zdarzeń
Nagrywanie aktywności w tle może być przydatne, ale czasami chcesz od razu przetestować moduł obsługi periodicsync bez czekania na wywołanie zdarzenia w normalnym tempie.
Możesz to zrobić w sekcji Service Workers w panelu Aplikacja w Narzędziach deweloperskich w Chrome. Pole Okresowa synchronizacja umożliwia podanie tagu, którego zdarzenie ma używać, i wywoływanie go dowolną liczbę razy.
Korzystanie z interfejsu Narzędzi deweloperskich
W panelu Narzędzi deweloperskich Aplikacja zobaczysz sekcję Okresowa synchronizacja w tle.
