Synchronizacja w tle to nowy interfejs API w sieci, który umożliwia odroczenie działań do momentu, gdy użytkownik uzyska stabilne połączenie. 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.
Czasami jednak nie chcemy tracić 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 kółko i wiesz, że powinieneś/powinnaś odpuścić i zająć się czymś innym, ale na wszelki wypadek czekasz jeszcze 10 sekund. Po 10 sekundach? Nic.
Ale dlaczego teraz się poddawać? Poświęciłeś już czas, więc rezygnacja 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” przy wiadomości, musi patrzeć na wskaźnik postępu, aż do jego zakończenia. 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, informujemy go, że musi 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 powiadomień push i powiadomień oraz synchronizacji w tle.
Jeśli użytkownik spróbuje wysłać wiadomość, gdy nie ma połączenia z internetem, wiadomość zostanie wysłana w tle, gdy tylko pojawi się połączenie.
Od marca 2016 r. synchronizacja w tle jest dostępna w Chrome w wersji 49 i nowszych. Aby zobaczyć, jak to działa, wykonaj 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ść jest wysyłana w tle.
Możliwość wysyłania danych w tle również przynosi odczuwalną 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. Prośba o wywołanie zdarzenia, gdy użytkownik ma połączenie z internetem, co następuje natychmiast, jeśli użytkownik ma już połączenie. 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ą, czy udało się wykonać działanie, czy nie. Jeśli obietnicę udało się spełnić, synchronizacja została zakończona. Jeśli się nie powiedzie, zostanie zaplanowana kolejna synchronizacja. 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 ten użytkownik połączy się z internetem. Jeśli chcesz 5 osobnych zdarzeń synchronizacji, użyj unikalnych tagów.
Oto proste demo, które wykonuje tylko niezbędne czynności. Do wyświetlania powiadomienia używa zdarzenia synchronizacji.
Do czego można używać synchronizacji w tle?
Najlepiej jest użyć go do zaplanowania wysyłania danych, które są dla Ciebie ważne po wygaśnięciu strony. wiadomości na czacie, e-maile, aktualizacje dokumentów, zmiany ustawień, przesyłanie zdjęć... wszystko, co ma dotrzeć na serwer, nawet jeśli użytkownik przejdzie na inną kartę lub ją zamknie. 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 wersja demonstracyjna
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ć samodzielnie. Upewnij się, że używasz Chrome 49 lub nowszej wersji, a następnie:
- Otwórz dowolny artykuł, na przykład Chrome.
- Przejdź w tryb offline (za pomocą trybu samolotowego lub dołącz do fatalnego dostawcy usług mobilnych, 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 wczytywanie trwa zbyt długo).
- 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 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 są często wykonywane, gdy użytkownik ma otwartą stronę witryny, więc wymaganie od niego zgody nie byłoby wygodne. Zamiast tego ograniczamy, kiedy synchronizacja może być zarejestrowana i uruchomiona, aby zapobiec nadużyciom. Na przykład:
- Zdarzenie synchronizacji możesz zarejestrować tylko wtedy, gdy użytkownik ma otwarte 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 serwisów workerów 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 poprosić o wydarzenie ograniczone interwałem czasowym, stanem baterii i stanem sieci. Wymaga to oczywiście zgody użytkownika, a to, kiedy i jak często te zdarzenia będą się uruchamiać, 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 tę witrynę tylko o 7:00, więc synchronizacja będzie się odbywać codziennie o 6:50. Ta funkcja jest jeszcze odległa w czasie, ale nadchodzi.
Stopniowo przenosimy skuteczne wzorce z Androida i iOS do internetu, zachowując przy tym to, co czyni internet wspaniałym.