Synchronizacja w tle to nowy internetowy interfejs API, który umożliwia odłożenie działań do momentu uzyskania stabilnego połączenia przez użytkownika. Dzięki temu użytkownik może wysłać dowolne dane.
Problem
Internet to świetne miejsce na marnowanie czasu. Bez marnowania czasu w internecie nie wiedzielibyśmy, że koty nie lubią kwiatów, kameleony uwielbiają bańki mydlane ani że nasz Eric Bidelman jest golfistą, który triumfował w golfie pod koniec lat 90.
Ale czasami, tylko czasami, nie chcemy marnować czasu. Pożądane wrażenia użytkownika:
- Telefon wyjęty z kieszeni.
- Osiągnij mniejszy cel.
- Telefon z powrotem w kieszeni.
- Wznów życie.
Niestety często jest to utrudnione przez słabe połączenie. Wszyscy to znamy. Patrzysz na biały ekran lub wirujący kołowrotek i wiesz, że powinieneś/powinnaś odpuścić i zająć się czymś innym, ale na wszelki wypadek czekasz jeszcze 10 sekund. Po tych 10 sekundach? Nic.
Ale dlaczego teraz się poddawać? Poświęciłeś już czas, więc rezygnacja z czegoś bez efektu byłaby stratą, więc czekasz dalej. W tym momencie chcesz się poddać, ale wiesz, że w ostatniej chwili wszystko się załaduje.
Skrypty service worker rozwiązują problem wczytywania strony, umożliwiając wyświetlanie treści z pamięci podręcznej. A co, jeśli strona musi wysłać coś na serwer?
Obecnie, gdy użytkownik kliknie „Wyślij”, musi patrzeć na wskaźnik postępu, dopóki wiadomość nie dobiegnie końca. Jeśli spróbuje przejść na inną kartę lub zamknąć kartę, użyjemy onbeforeunload, aby wyświetlić komunikat w odpowiednim momencie. Przepraszam”. Jeśli użytkownik nie ma połączenia, powiadomimy go: „Musisz wrócić później i spróbować ponownie”.
To bzdura. Synchronizacja w tle pozwala uzyskać lepsze wyniki.
Rozwiązanie
Ten film pokazuje Emojoy, czyli czat z emotikonami. Jest to progresywna aplikacja internetowa, która działa przede wszystkim offline. Aplikacja korzysta z wiadomości push i powiadomień oraz korzysta z synchronizacji w tle.
Jeśli użytkownik spróbuje wysłać wiadomość przy braku połączenia, na szczęście wiadomość zostanie wysłana w tle po uzyskaniu połączenia.
Od marca 2016 r. synchronizacja w tle jest dostępna w Chrome w wersji 49 i nowszych. Możesz to sprawdzić, wykonując te czynności:
- Otwórz Emojoy.
- Przejdź w tryb offline (za pomocą trybu samolotowego lub lokalnej klatki Faradaya).
- Wpisz wiadomość.
- Wróć do ekranu głównego (opcjonalnie zamknij kartę lub przeglądarkę).
- Przejdź do trybu online.
- Wiadomość zostanie wysłana w tle!
Wysyłanie w tle w ten sposób wpływa też na poprawę wydajności. Aplikacja nie musi zbytnio przejmować się wysyłaniem wiadomości, więc może od razu dodać ją do danych wyjściowych.
Jak poprosić o synchronizację w tle
W duchu rozszerzalności w internecie jest to funkcja na niskim poziomie, która daje Ci swobodę działania. Chcesz, aby zdarzenie było wywoływane, gdy użytkownik połączy się z siecią, czyli natychmiast, gdy jeszcze się z nią połączy. Następnie nasłuchujesz tego zdarzenia i robisz to, co musisz.
Podobnie jak w przypadku wiadomości push, jako celu zdarzenia używa skryptu service worker, co umożliwia działanie, gdy strona jest zamknięta. Aby rozpocząć, zarejestruj się 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());
}
});
To wszystko. W powyższym przykładzie funkcja doSomeStuff() powinna zwrócić obietnicę wskazującą powodzenie lub niepowodzenie próby wykonania danej czynności. Jeśli obietnicę się spełni, synchronizacja zostanie zakończona. Jeśli się nie powiedzie, zostanie zaplanowana kolejna próba synchronizacji. Ponowna synchronizacja również czeka na połączenie i wykorzystuje wzrastający czas do ponowienia.
Nazwa tagu synchronizacji (w tym przykładzie „mojePierwszeSynchronizacja”) powinna być niepowtarzalna dla danej synchronizacji. Jeśli zarejestrujesz synchronizację z użyciem tego samego tagu co w przypadku oczekującej synchronizacji, zostanie ona połączona z dotychczasową synchronizacją. Oznacza to, że możesz zarejestrować się do synchronizacji „wyczyszczenia skrzynki odbiorczej” za każdym razem, gdy użytkownik wyśle wiadomość, ale jeśli wyśle 5 wiadomości w trybie offline, otrzymasz tylko jedną synchronizację, gdy zaloguje się w internecie. Jeśli chcesz 5 osobnych zdarzeń synchronizacji, użyj unikalnych tagów.
Oto prosta demonstracja, która spełnia absolutne minimum. Wykorzystuje zdarzenie synchronizacji do wyświetlenia powiadomienia.
Do czego można używać synchronizacji w tle?
Najlepiej jest użyć go do zaplanowania wysyłania danych, które są ważne po wygaśnięciu strony. Wiadomości na czacie, e-maile, aktualizacje dokumentów, zmiany ustawień, przesłane zdjęcia... wszystko, co chcesz przekazać na serwer, nawet jeśli użytkownik opuści lub zamknie kartę. Strona może przechowywać te dane w schowalni „outbox” w indexedDB, a skrypt service worker może je pobrać i wysłać.
Możesz go jednak użyć do pobrania niewielkich ilości danych...
Kolejna prezentacja!
To jest prezentacja Wikipedii offline, którą stworzyłem do Supercharging Page Load. Dodałem do niego trochę magii synchronizacji w tle.
Spróbuj to zrobić. Upewnij się, że używasz Chrome 49 lub nowszej wersji, a następnie:
- Otwórz dowolny artykuł, na przykład Chrome.
- Przejdź do trybu offline (używając trybu samolotowego lub skorzystaj z usług operatora sieci komórkowych, tak jak ja).
- Kliknij link do innego artykułu.
- Powinien pojawić się komunikat o niemożności załadowania strony (pojawi się on również, gdy wczytanie trwa zbyt długo).
- zezwalanie na powiadomienia.
- Zamknij przeglądarkę.
- Włącz tryb online
- Otrzymasz powiadomienie, gdy artykuł zostanie pobrany, zapisany w pamięci podręcznej i będzie gotowy do wyświetlenia.
Dzięki temu użytkownik może schować telefon do kieszeni i zająć się swoimi sprawami, wiedząc, że telefon powiadomi go, gdy znajdzie to, czego potrzebuje.
Uprawnienia
Pokazane przeze mnie demonstracje korzystają z powiadomień internetowych, które wymagają uprawnień, ale sama synchronizacja w tle nie.
Zdarzenia synchronizacji często kończą się, gdy użytkownik ma otwartą stronę w witrynie, więc wymaganie zgody użytkownika nie przyniesie korzyści. Zamiast tego ograniczamy, kiedy można rejestrować i uruchamiać synchronizacje, aby zapobiec nadużyciom. Na przykład:
- Możesz zarejestrować się na wydarzenie synchronizacji tylko wtedy, gdy użytkownik otworzy okno witryny.
- Czas wykonywania zdarzenia jest ograniczony, więc nie możesz go używać do pingowania serwera co x sekund, wydobywania bitcoinów ani do innych celów.
Oczywiście te ograniczenia mogą być łagodniejsze lub bardziej restrykcyjne w zależności od rzeczywistego użycia.
Stopniowe ulepszanie
Zanim wszystkie przeglądarki będą obsługiwać synchronizację w tle, minie jeszcze trochę czasu, zwłaszcza że Safari i Edge nie obsługują jeszcze usług. Ale progresywne ulepszanie pomaga w tych sytuacjach:
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 nie możesz korzystać z usług typu service worker ani synchronizacji w tle, po prostu opublikuj zawartość strony tak, jak to robisz obecnie.
Warto używać synchronizacji w tle, nawet jeśli użytkownik ma dobre połączenie z internetem, ponieważ chroni to przed nawigacją i zamykaniem kart podczas wysyłania danych.
Przyszłość
Chcemy wprowadzić synchronizację w tle do stabilnej wersji Chrome w pierwszej połowie 2016 r., a w tym czasie pracujemy nad wariantem „okresowej synchronizacji w tle”. Dzięki okresowej synchronizacji w tle możesz zażądać wydarzeń ograniczonych ze względu na przedział czasowy, stan baterii i stan sieci. Oczywiście wymaga to zgody użytkownika, a czas i częstotliwość uruchamiania tych zdarzeń zależy od przeglądarki. Innymi słowy, witryna z wiadomościami może prosić o synchronizację co godzinę, ale przeglądarka może wiedzieć, że czytasz ją tylko o 7:00, więc synchronizacja jest uruchamiana codziennie o 6:50. Ta funkcja jest jeszcze odległa w czasie, ale nadchodzi.
Stopniowo wprowadzamy do sieci popularne wzorce z Androida i iOS, zachowując przy tym to, co sprawia, że sieć jest tak świetna.