Przedstawiamy synchronizację w tle

Jake Archibald
Jake Archibald

Synchronizacja w tle to nowy internetowy interfejs API, który pozwala odroczyć działania do czasu uzyskania stabilnego połączenia użytkownika. Dzięki temu masz pewność, że wszystko, co użytkownik chce wysłać, zostanie rzeczywiście wysłane.

Problem

Internet to świetne miejsce do marnowania czasu. Bez marnowania czasu w internecie nie dowiedzielibyśmy się, że koty nie lubią kwiatów, kameleony uwielbiają baniek ani że nasz Eric Bidelman jest bohaterem piłki nożnej lat 90..

Ale czasem nie chcemy marnować czasu. Pożądany komfort użytkownika wygląda mniej więcej tak:

  1. Wyjęto telefon z kieszeni.
  2. Osiągnięcie drobnych celów.
  3. Telefon w kieszeni.
  4. Wznów tryb życia.

Niestety ta funkcja jest często utrudniona ze względu na słabą jakość połączenia. Wszyscy to znamy. Wpatrujesz się w biały ekran lub wskaźnik postępu i wiesz, że musisz się poddać i iść dalej, ale na wszelki wypadek daj mu jeszcze 10 sekund. Po 10 sekundach? Nic.

Ale dlaczego teraz się poddawać? Twój czas już kosztował, więc wyjście bez niczego nie byłoby stratą, więc możesz dalej czekać. W tym momencie chcesz się poddać, ale wiesz, że gdy to zrobisz, jest druga połowa, zanim wszystko załaduje się, gdy tylko Ty będziesz czekać.

Skrypty service worker rozwiązują część ładowania strony, umożliwiając wyświetlanie treści z pamięci podręcznej. Ale co w sytuacji, gdy strona musi wysłać coś na serwer?

Obecnie, jeśli użytkownik kliknie „Wyślij” na wiadomości, musi patrzeć na wskaźnik postępu, aż zostanie ukończona. Jeśli użytkownik spróbuje przejść na inną stronę lub ją zamknąć, użyjemy onbeforeunload, aby wyświetlić komunikat typu „Nie, popatrz na ten wskaźnik postępu. Przepraszamy”. Jeśli użytkownik nie ma połączenia, poinformujemy go „Musisz wrócić później i spróbować jeszcze raz”.

To śmieci. Synchronizacja w tle pomaga lepiej wykorzystać możliwości urządzenia.

Rozwiązanie

Poniższy film przedstawia Emojoy – wersję demonstracyjną czatu zawierającą tylko emotikony. To progresywna aplikacja internetowa, która działa najpierw offline. Aplikacja używa wiadomości push i powiadomień oraz synchronizacji w tle.

Jeśli użytkownik spróbuje wysłać wiadomość, gdy nie będzie mógł połączyć się z siecią, wiadomość zostanie wysłana w tle po nawiązaniu połączenia.

Od marca 2016 r. synchronizacja w tle jest dostępna w Chrome od wersji 49 i nowszych. Aby je zobaczyć, wykonaj te czynności:

  1. Otwórz Emojoy.
  2. Przejdź do trybu offline (użyj trybu samolotowego lub odwiedź lokalną klatkę Faradaya).
  3. Wpisz wiadomość.
  4. Wróć do ekranu głównego (opcjonalnie zamknij kartę lub przeglądarkę).
  5. Przejdź do trybu online.
  6. Wiadomość jest wysyłana w tle.

Możliwość wysyłania takich treści w tle również wpływa na poprawę wydajności. Aplikacja nie musi robić aż takich dużych postępów w wysyłaniu wiadomości, więc może od razu dodać wiadomość do danych wyjściowych.

Jak poprosić o synchronizację w tle

W rzeczywistości rozbudowany styl sieci jest to niskopoziomowa funkcja, która daje Ci swobodę działania. prosisz, aby zdarzenie było wywoływane, gdy użytkownik połączy się z siecią, czyli natychmiast, gdy ma połączenie z internetem. Następnie słuchasz tego zdarzenia i wykonujesz odpowiednie czynności.

Podobnie jak w przypadku komunikatów push, jako celu zdarzenia używa skryptu service worker, który umożliwia działanie, gdy strona nie jest otwarta. Aby rozpocząć, zarejestruj na synchronizację na stronie:

// Register your service worker:
navigator.serviceWorker.register('/sw.js');

// Then later, request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
  return swRegistration.sync.register('myFirstSync');
});
 ```

Then listen for the event in `/sw.js`:

```js
self.addEventListener('sync', function(event) {
  if (event.tag == 'myFirstSync') {
    event.waitUntil(doSomeStuff());
  }
});

Gotowe! W powyższym wierszu doSomeStuff() powinien zwrócić komunikat informujący o powodzeniu lub niepowodzeniu. Jeśli operacja się uda, synchronizacja się zakończy. W przypadku niepowodzenia zostanie zaplanowana kolejna próba synchronizacji. Ponowne synchronizacje także czekają na połączenie i wykorzystują wykładniczy czas ponowienia.

Nazwa tagu synchronizacji („myFirstSync” w powyższym przykładzie) powinna być niepowtarzalna dla danej synchronizacji; Jeśli zarejestrujesz się na synchronizację przy użyciu tego samego tagu co w przypadku oczekujących synchronizacji, zostanie ona połączona z dotychczasową synchronizacją. Oznacza to, że możesz zarejestrować funkcję synchronizacji ze skrzynką nadawczą za każdym razem, gdy użytkownik wysyła wiadomość. Jeśli jednak użytkownik wyśle 5 wiadomości w trybie offline, otrzymasz tylko jedną synchronizację po przejściu w tryb online. Jeśli chcesz mieć 5 osobnych zdarzeń synchronizacji, użyj unikalnych tagów.

Oto prosta prezentacja, która spełnia minimalne wymagania: do wyświetlenia powiadomienia wykorzystuje zdarzenie synchronizacji.

Do czego mogę używać synchronizacji w tle?

Najlepiej jest używać go do planowania wysyłania danych, które są dla Ciebie ważne poza okresem ważności strony. Wiadomości na czacie, e-maile, aktualizacje dokumentów, zmiany ustawień, przesłane zdjęcia... wszystko, co chcesz, aby można było dotrzeć do serwera nawet wtedy, gdy użytkownik opuści lub zamknie kartę. Strona może je przechowywać w magazynie „skrzynki nadawczej” w IndexDB, a instancja service worker pobiera je i wysyła.

Można też używać jej do pobierania niewielkich porcji danych...

Kolejna prezentacja!

To jest wersja demonstracyjna offline Wikipedii utworzona przeze mnie na potrzeby superładowania strony. Od tamtej pory dodałem do niej funkcje synchronizacji w tle.

Zobacz, jak to działa. Upewnij się, że używasz Chrome 49 lub nowszego, a potem:

  1. Otwórz dowolny artykuł, na przykład Chrome.
  2. Przejdź do trybu offline (użyj trybu samolotowego lub dołącz do kiepskiego operatora komórkowego).
  3. Kliknij link do innego artykułu.
  4. Powinien zostać wyświetlony komunikat, że nie udało się wczytać strony (wyświetla się również, jeśli wczytywanie strony trwa tylko chwilę).
  5. Zaakceptuj powiadomienia.
  6. Zamknij przeglądarkę.
  7. Włącz tryb online
  8. Otrzymasz powiadomienie, gdy artykuł zostanie pobrany, zapisany w pamięci podręcznej i będzie gotowy do wyświetlenia.

Korzystając z tego wzoru, użytkownik może włożyć telefon do kieszeni i kontynuować pracę, wiedząc, że telefon powiadomi go o pobieraniu.

Uprawnienia

Pokazane przeze mnie demonstracje korzystają z powiadomień internetowych, które wymagają uprawnień, ale sama synchronizacja w tle ich nie wymaga.

Synchronizacja zdarzeń jest często zakończona, gdy użytkownik ma otwartą stronę, więc wymaganie zgody użytkownika może nie być dla Ciebie przydatne. Zamiast tego ograniczamy, kiedy synchronizacje mogą być rejestrowane i uruchamiane, aby zapobiegać nadużyciom. Na przykład:

  • Możesz zarejestrować się na zdarzenie synchronizacji tylko wtedy, gdy użytkownik ma otwarte okno ze stroną.
  • Czas wykonywania zdarzenia jest ograniczony, więc nie można używać go do pingowania serwera co x sekund, wydobywania bitcoinów itp.

Oczywiście te ograniczenia mogą się zmniejszyć lub zaostrzeć w zależności od rzeczywistego użytkowania.

Stopniowe ulepszanie

Minie trochę czasu, zanim wszystkie przeglądarki będą obsługiwać synchronizację w tle, zwłaszcza że Safari i Edge nie obsługują jeszcze mechanizmów Service Worker. Stopniowe wprowadzanie udoskonaleń jest jednak pomocne:

if ('serviceWorker' in navigator && 'SyncManager' in window) {
  navigator.serviceWorker.ready.then(function(reg) {
    return reg.sync.register('tag-name');
  }).catch(function() {
    // system was unable to register for a sync,
    // this could be an OS-level restriction
    postDataFromThePage();
  });
} else {
  // serviceworker/sync not supported
  postDataFromThePage();
}

Jeśli mechanizmy Service Worker lub synchronizacja w tle nie są dostępne, po prostu opublikuj treść ze strony tak jak dotychczas.

Warto korzystać z synchronizacji w tle, nawet jeśli użytkownik ma dobre połączenie z internetem, ponieważ chroni przed poruszaniem się po ekranie i zamykaniem kart podczas wysyłania danych.

Przyszłość

Naszym celem jest udostępnienie funkcji synchronizacji w tle do stabilnej wersji Chrome w pierwszej połowie 2016 roku, a jednocześnie praca nad wariantem „okresowej synchronizacji w tle”. Dzięki okresowej synchronizacji w tle możesz poprosić o wydarzenie ograniczone przez przedział czasowy, stan baterii lub stan sieci. Wymaga to oczywiście zgody użytkownika. To także zależy od przeglądarki, kiedy i jak często te zdarzenia są wywoływane. Innymi słowy, strona z wiadomościami może zażądać synchronizacji co godzinę, ale przeglądarka może wiedzieć, że strona została odczytana tylko o 7:00, więc synchronizacja uruchamiała się codziennie o 06:50. To rozwiązanie nieco bardziej odległe od jednorazowej synchronizacji, ale warto nadążyć.

Stopniowo przenosimy do sieci udane wzorce z Androida i iOS, jednocześnie zachowując to, co sprawia, że sieć jest wspaniała.