Фоновая синхронизация — это новый веб-API, который позволяет откладывать действия до тех пор, пока у пользователя не будет стабильного подключения. Это гарантирует, что все, что хочет отправить пользователь, действительно будет отправлено.
Проблема
Интернет – отличное место для времяпровождения. Не тратя время в Интернете, мы бы не узнали, что кошки не любят цветы , хамелеоны любят пузыри или что наш собственный Эрик Бидельман — герой конца 90-х, играющий в гольф .
Но иногда, только иногда, мы не хотим терять время зря. Желаемый пользовательский опыт больше похож на:
- Телефон из кармана.
- Достичь второстепенной цели.
- Телефон обратно в карман.
- Возобновить жизнь.
К сожалению, этот опыт часто нарушается из-за плохой связи. Мы все были там. Вы смотрите на белый экран или на вращающийся индикатор и знаете, что вам следует просто сдаться и продолжить свою жизнь, но на всякий случай даете этому еще 10 секунд. После этих 10 секунд? Ничего.
Но зачем сдаваться сейчас? Вы уже потратили время, поэтому уйти ни с чем было бы пустой тратой, поэтому вы продолжаете ждать. К этому моменту вам хочется сдаться, но вы знаете, что в ту секунду, когда вы это сделаете, все загрузится, если бы вы только подождали.
Сервисные работники решают задачу загрузки страницы, позволяя вам обслуживать контент из кэша. Но как насчет того, когда странице нужно отправить что-то на сервер?
На данный момент, если пользователь нажимает «отправить» в сообщении, ему приходится смотреть на счетчик, пока оно не завершится. Если они попытаются уйти или закрыть вкладку, мы используем onbeforeunload для отображения сообщения типа: «Нет, мне нужно, чтобы ты еще немного посмотрел на этот счетчик. Извините». Если у пользователя нет соединения, мы говорим ему: «Извините, вам придется вернуться позже и повторить попытку».
Это чушь. Фоновая синхронизация позволяет добиться большего.
Решение
В следующем видео показана Emojoy , демонстрация чата только с смайликами. Это прогрессивное веб-приложение , работающее в первую очередь в автономном режиме. Приложение использует push-сообщения и уведомления, а также фоновую синхронизацию.
Если пользователь пытается отправить сообщение, когда у него нет подключения, то, к счастью, сообщение отправляется в фоновом режиме, как только соединение устанавливается.
По состоянию на март 2016 года фоновая синхронизация доступна в Chrome начиная с версии 49 и выше. Вы можете увидеть это действие, выполнив следующие действия:
- Откройте Эмоджой .
- Выйдите из сети (либо в режиме полета, либо посетите местную клетку Фарадея).
- Введите сообщение.
- Вернитесь на главный экран (при необходимости закройте вкладку или браузер).
- Зайдите в Интернет.
- Сообщение отправляется в фоновом режиме!
Возможность отправлять данные в фоновом режиме также приводит к заметному повышению производительности. Приложению не нужно особо беспокоиться об отправке сообщения, поэтому оно может сразу добавить сообщение в выходные данные.
Как запросить фоновую синхронизацию
В истинно расширяемом веб- стиле это низкоуровневая функция, которая дает вам свободу делать то, что вам нужно. Вы запрашиваете запуск события, когда у пользователя есть подключение, что происходит немедленно, если у пользователя уже есть подключение. Затем вы слушаете это событие и делаете все, что вам нужно.
Как и push-сообщения, он использует сервис-воркера в качестве цели события, что позволяет ему работать, когда страница не открыта. Для начала зарегистрируйтесь для синхронизации со страницы:
// 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());
}
});
И все! В приведенном выше примере doSomeStuff() должен возвращать обещание, указывающее успех/неуспех того, что он пытается сделать. Если оно выполнено, синхронизация завершена. Если это не удастся, будет запланирована повторная попытка синхронизации. Повторная синхронизация также ожидает подключения и использует экспоненциальную задержку.
Имя тега синхронизации («myFirstSync» в приведенном выше примере) должно быть уникальным для данной синхронизации. Если вы зарегистрируетесь для синхронизации, используя тот же тег, что и ожидающая синхронизация, она объединится с существующей синхронизацией. Это означает, что вы можете зарегистрироваться для синхронизации «очистка исходящих» каждый раз, когда пользователь отправляет сообщение, но если он отправит 5 сообщений в автономном режиме, вы получите только одну синхронизацию, когда он подключится к сети. Если вам нужно 5 отдельных событий синхронизации, просто используйте уникальные теги!
Вот простая демонстрация , которая делает минимум; он использует событие синхронизации для отображения уведомления.
Для чего я могу использовать фоновую синхронизацию?
В идеале вы должны использовать его для планирования отправки любых данных, которые вас интересуют, за пределами срока существования страницы. Сообщения чата, электронные письма, обновления документов, изменения настроек, загрузка фотографий... все, что вы хотите передать на сервер, даже если пользователь уйдет или закроет вкладку. Страница может хранить их в хранилище «исходящих» в indexedDB, а сервис-воркер будет извлекать их и отправлять.
Хотя вы также можете использовать его для получения небольших фрагментов данных...
Еще одно демо!
Это оффлайн-демо из Википедии, которое я создал для Supercharging Page Load . С тех пор я добавил к нему немного магии фоновой синхронизации.
Попробуйте это сами. Убедитесь, что вы используете Chrome 49 и более поздних версий, а затем:
- Перейдите к любой статье, например, Chrome .
- Выйдите в автономный режим (либо в режиме полета, либо присоединитесь к ужасному оператору мобильной связи, как у меня).
- Нажмите ссылку на другую статью.
- Вам должно быть сообщено, что страницу не удалось загрузить (это также появится, если загрузка страницы занимает некоторое время).
- Согласитесь на уведомления.
- Закройте браузер.
- Выйти в Интернет
- Вы получите уведомление, когда статья будет загружена, сохранена в кэше и готова к просмотру!
Используя этот шаблон, пользователь может положить свой телефон в карман и продолжать свою жизнь, зная, что телефон предупредит его, когда он будет выбран по его желанию.
Разрешения
Демонстрации, которые я показал, используют веб-уведомления , для которых требуется разрешение, но сама фоновая синхронизация не требуется.
События синхронизации часто завершаются, пока у пользователя открыта страница сайта, поэтому требовать разрешения пользователя будет нежелательным решением. Вместо этого мы ограничиваем возможность регистрации и запуска синхронизации, чтобы предотвратить злоупотребления. Например:
- Вы можете зарегистрироваться для события синхронизации только тогда, когда у пользователя открыто окно на сайт.
- Время выполнения события ограничено, поэтому вы не можете использовать их для проверки связи с сервером каждые x секунд, майнинга биткойнов или чего-то еще.
Конечно, эти ограничения могут ослабляться или ужесточаться в зависимости от реального использования.
Прогрессивное улучшение
Пройдет некоторое время, прежде чем все браузеры будут поддерживать фоновую синхронизацию, особенно потому, что Safari и Edge еще не поддерживают сервис-воркеров. Но здесь помогает прогрессивное улучшение:
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();
}
Если сервис-воркеры или фоновая синхронизация недоступны, просто опубликуйте контент со страницы, как вы это делаете сегодня.
Фоновую синхронизацию стоит использовать, даже если у пользователя хорошее соединение, поскольку она защищает вас от навигации и закрытия вкладок во время отправки данных.
Будущее
Мы планируем реализовать фоновую синхронизацию в стабильной версии Chrome в первой половине 2016 года, одновременно работая над вариантом «периодической фоновой синхронизации». При периодической фоновой синхронизации вы можете запросить событие, ограниченное интервалом времени, состоянием батареи и состоянием сети. Конечно, для этого потребуется разрешение пользователя, а также браузер будет решать, когда и как часто будут возникать эти события. Другими словами, новостной сайт может запрашивать синхронизацию каждый час, но браузер может знать, что вы читаете этот сайт только в 07:00, поэтому синхронизация будет запускаться ежедневно в 06:50. Эта идея немного дальше от однократной синхронизации, но она приближается.
Постепенно мы переносим в Интернет успешные шаблоны из Android и iOS, сохраняя при этом то, что делает Интернет великолепным!