Synchronizacja w tle to nowy internetowy interfejs API, który umożliwia odłożenie działań do czasu, aż użytkownik będzie stabilny z łącznością Google. Dzięki temu masz pewność, że to, co użytkownik chce wysłać, zostanie rzeczywiście wysłane.
Problem
Internet to świetne miejsce do stracenia czasu. Bez marnowania czasu w internecie nie dowiedzielibyśmy się, że koty nie lubią kwiatów, kameleony uwielbiają bańki ani że nasz Eric Bidelman jest bohaterem lat 90..
Ale czasami, tylko czasami, nie chcemy marnować czasu. Wybrany użytkownik jest bardziej jak:
- Telefon wyjęty z kieszeni.
- Osiągnij drobny cel.
- Telefon z tyłu w kieszeni.
- Wznów życie.
Niestety często powoduje to problemy z połączeniem. Każdy tam kiedyś był. Patrzysz w biały ekran lub na obrotowy ekran i wiesz, że musisz się poddać i zacząć dalej, ale na wszelki wypadek daj z siebie jeszcze 10 sekund. Po tych 10 sekundach? Nic.
Ale dlaczego teraz się poddasz? Udało Ci się już poświęcić czas, więc dalej czekaj na marszu. Na tym etapie chcesz się poddać, ale wiesz, że w drugiej kolejności wszystko się załadowało, gdyby tylko Ty można było zaczekać.
Skrypty Service Workerrozwiązują problem z wczytywaniem strony, umożliwiając wyświetlanie treści z pamięci podręcznej. A co, jeśli strona musi wysłać coś do serwera?
Obecnie, jeśli użytkownik kliknie „Wyślij”, wiadomości muszą patrzeć na wskaźnik postępu, dopóki nie dobiegnie końca. Jeśli użytkownik spróbuje opuścić lub zamknąć kartę, używamy onbeforeunload, aby wyświetlić komunikat w rodzaju „Nie, muszę jeszcze w nie patrzeć. Przepraszamy”. Jeśli użytkownik nie ma połączenia, powiadomimy go: „Musisz wrócić później i spróbować ponownie”.
To śmieci. Dzięki synchronizacji w tle możesz zrobić więcej.
Rozwiązanie
Poniższy film przedstawia Emojoy – wersję demonstracyjną czatu zawierającą tylko emotikony. To progresywna aplikacja internetowa, która działa najpierw w trybie offline. Aplikacja korzysta z wiadomości push i powiadomień oraz korzysta z synchronizacji w tle.
Jeśli użytkownik spróbuje wysłać wiadomość bez połączenia z internetem, 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 od wersji 49. Możesz to sprawdzić, wykonując te czynności:
- Otwórz Emojoy.
- Przejdź offline (w trybie samolotowym lub odwiedź lokalną klatkę 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 przekłada się też na poprawę wydajności. Aplikacja nie musi się martwić o wysyłanie wiadomości, więc może od razu dodać ją do danych wyjściowych.
Jak poprosić o synchronizację w tle
W stylu elastycznej witryny jest to funkcja niskiego poziomu, która daje swobodę działania. Prosisz o: jest wywoływane, gdy użytkownik ma połączenie i jest bezpośrednio ma już połączenie z siecią. Następnie nasłuchujesz tego zdarzenia i robisz, co tylko chcesz, co trzeba zrobić.
Podobnie jak w przypadku komunikatów push, jako cel zdarzenia używa skryptu service worker, dzięki czemu może ona działać, gdy strona nie jest otwarta. Aby rozpocząć synchronizację, zarejestruj się 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ą na powodzenie lub niepowodzenie działań, które chce wykonać. Jeśli tak, synchronizacja się zakończy. Jeśli się to nie uda, zaplanowana zostanie kolejna synchronizacja. Synchronizacja ponawianych prób także oczekuje na nawiązanie połączenia i stosuje gwałtowny czas ponowienia.
Nazwa tagu w trakcie synchronizacji („myFirstSync” w powyższym przykładzie) powinna być niepowtarzalna w danej synchronizacji. Jeśli zarejestrujesz się na synchronizację przy użyciu tego samego tagu co w przypadku oczekującej synchronizacji, połączy się on z bieżącą synchronizacją. Oznacza to, że możesz skorzystać z funkcji czyszczenia skrzynki nadawczej. synchronizować się za każdym razem, gdy użytkownik wysyła wiadomość, ale jeśli użytkownik wyśle 5 wiadomości w trybie offline, po przejściu w tryb online zostanie odnotowana tylko jedna synchronizacja. Jeśli potrzebujesz 5 osobnych zdarzeń synchronizacji, użyj po prostu unikalnych tagów.
Oto prosta demonstracja, która spełnia absolutne minimum. używa zdarzenia synchronizacji do wyświetlenia powiadomienia.
Do czego mogę używać synchronizacji w tle?
Optymalnym rozwiązaniem jest zaplanowanie wysłania wszelkich ważnych danych poza okresem aktywności 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 zapisać je w „skrzynce nadawczej” w indeksie indexDB, a skrypcja service worker je pobierze i wyśle.
chociaż można by też użyć go do pobrania niewielkich kawałków danych...
Kolejna prezentacja!
To jest wersja demonstracyjna offline Wikipedii utworzona przeze mnie w celu zwiększenia wczytywania strony. Teraz dodałam trochę magii synchronizacji w tle.
Wypróbuj tę funkcję. Upewnij się, że używasz Chrome w wersji 49 lub nowszej, a potem:
- 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, takiego jak ja).
- Kliknij link do innego artykułu.
- Powinien pojawić się komunikat z informacją, że nie udało się wczytać strony (będzie to też widoczne, jeśli wczytywanie trwa tylko chwilę).
- Zaakceptuj 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 zacząć żyć własnym życiem.
Uprawnienia
Przedstawione przeze mnie wersje demonstracyjne korzystają z powiadomień internetowych, które wymagają uprawnień, ale nie wymagają one synchronizacji w tle.
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. Aby zapobiec nadużyciom, ograniczamy natomiast czas, w którym można rejestrować i aktywować synchronizacje. Na przykład:
- Możesz zarejestrować się na wydarzenie synchronizacji tylko wtedy, gdy użytkownik otworzy okno witryny.
- Czas wykonania zdarzenia jest ograniczony, więc nie można go używać do wysyłania pingów do serwera co x sekund, wydobywania bitcoinów ani innych operacji.
W zależności od rzeczywistego użytkowania te ograniczenia mogą zostać złagodzone lub zaostrzone.
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 ulepszanie jest jednak przydatne w tych przypadkach:
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 są niedostępne, opublikuj treść z poziomu strony, tak jak dzisiaj.
Warto korzystać z synchronizacji w tle, nawet jeśli użytkownik wydaje się mieć stabilną łączność – chroni to przed nawigacji i zamknięciem kart podczas wysyłania danych.
Przyszłość
W pierwszej połowie 2016 r. planujemy udostępnić synchronizację w tle do stabilnej wersji Chrome, jednocześnie 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. Od tego pomysłu pozostał jeszcze trochę dalej niż w przypadku jednorazowej synchronizacji, ale wkrótce się to zmieni.
Stopniowo wprowadzamy do sieci popularne wzorce z Androida i iOS, zachowując przy tym to, co sprawia, że sieć jest tak świetna.