Синхронизируйте данные вашего веб-приложения в фоновом режиме, чтобы сделать работу более похожей на приложение.
Попадали ли вы когда-нибудь в одну из следующих ситуаций?
- Езда в поезде или метро с нестабильной связью или ее отсутствием
- Ваш оператор задушил вас после просмотра слишком большого количества видео
- Жизнь в стране, где пропускная способность с трудом удовлетворяет спрос
Если да, то вы наверняка чувствовали разочарование от выполнения определенных задач в Интернете и задавались вопросом, почему приложения для конкретной платформы так часто работают лучше в этих сценариях. Приложения для конкретных платформ могут заранее получать свежий контент, например новостные статьи или информацию о погоде. Даже если в метро нет сети, новости все равно можно прочитать.
Периодическая фоновая синхронизация позволяет веб-приложениям периодически синхронизировать данные в фоновом режиме, приближая поведение веб-приложений к поведению приложения для конкретной платформы.
Попробуй
Вы можете попробовать периодическую фоновую синхронизацию с помощью живого демонстрационного приложения . Прежде чем использовать его, убедитесь, что:
- Вы используете Chrome 80 или новее.
- Вы устанавливаете веб-приложение перед включением периодической фоновой синхронизации.
Концепции и использование
Периодическая фоновая синхронизация позволяет показывать свежий контент при запуске прогрессивного веб-приложения или страницы, поддерживаемой работником службы. Это достигается путем загрузки данных в фоновом режиме, когда приложение или страница не используются. Это предотвращает обновление содержимого приложения после запуска во время его просмотра. Более того, это не позволяет приложению отображать счетчик контента перед обновлением.
Без периодической фоновой синхронизации веб-приложениям придется использовать альтернативные методы загрузки данных. Типичным примером является использование push-уведомления для пробуждения сервисного работника. Пользователь прерывается сообщением типа «доступны новые данные». Обновление данных по сути является побочным эффектом. У вас по-прежнему есть возможность использовать push-уведомления для действительно важных обновлений, например важных последних новостей.
Периодическую фоновую синхронизацию легко спутать с фоновой синхронизацией. Хотя у них схожие названия, варианты их использования различны. Помимо прочего, фоновая синхронизация чаще всего используется для повторной отправки данных на сервер в случае сбоя предыдущего запроса.
Правильное взаимодействие с пользователем
При неправильном выполнении периодическая фоновая синхронизация может привести к расточительству ресурсов пользователей. Прежде чем выпустить его, Chrome провел пробный период, чтобы убедиться в его работоспособности. В этом разделе объясняются некоторые дизайнерские решения, которые Chrome принял, чтобы сделать эту функцию максимально полезной.
Первое дизайнерское решение, принятое Chrome, заключается в том, что веб-приложение может использовать периодическую фоновую синхронизацию только после того, как человек установил его на свое устройство и запустил как отдельное приложение. Периодическая фоновая синхронизация недоступна в контексте обычной вкладки Chrome.
Более того, поскольку Chrome не хочет, чтобы неиспользуемые или редко используемые веб-приложения беспричинно расходовали заряд батареи или данные, Chrome разработал периодическую фоновую синхронизацию, так что разработчикам придется зарабатывать на этом, предоставляя пользу своим пользователям. Конкретно, Chrome использует показатель вовлеченности сайта ( about://site-engagement/ ), чтобы определить, может ли и как часто происходить периодическая фоновая синхронизация для данного веб-приложения. Другими словами, событие periodicsync вообще не будет запускаться, если показатель вовлеченности не станет больше нуля, а его значение не влияет на частоту, с которой возникает событие periodicsync . Это гарантирует, что в фоновом режиме синхронизируются только те приложения, которые вы активно используете.
Периодическая фоновая синхронизация имеет некоторое сходство с существующими API и практиками на популярных платформах. Например, однократная фоновая синхронизация, а также push-уведомления позволяют логике веб-приложения жить немного дольше (через его сервис-воркера) после того, как человек закрыл страницу. На большинстве платформ люди обычно устанавливают приложения, которые периодически обращаются к сети в фоновом режиме, чтобы обеспечить лучший пользовательский опыт для важных обновлений, предварительной загрузки контента, синхронизации данных и т. д. Аналогичным образом, периодическая фоновая синхронизация также продлевает срок службы логики веб-приложения, позволяя выполняться через регулярные периоды времени, которые могут составлять несколько минут за раз.
Если бы браузер позволял этому происходить часто и без ограничений, это могло бы привести к некоторым проблемам с конфиденциальностью. Вот как Chrome устранил этот риск периодической фоновой синхронизации:
- Фоновая синхронизация происходит только в сети, к которой устройство ранее подключалось. Chrome рекомендует подключаться только к сетям, управляемым надежными сторонами.
- Как и при любом обмене данными через Интернет, периодическая фоновая синхронизация раскрывает IP-адреса клиента, сервера, с которым он общается, и имя сервера. Чтобы уменьшить это воздействие примерно до уровня, который был бы, если бы приложение синхронизировалось только тогда, когда оно находилось на переднем плане, браузер ограничивает частоту фоновой синхронизации приложения, чтобы она соответствовала тому, как часто человек использует это приложение. Если человек перестанет часто взаимодействовать с приложением, периодическая фоновая синхронизация перестанет срабатывать. Это чистое улучшение по сравнению с существующим положением дел в приложениях для конкретных платформ.
Когда его можно использовать?
Правила использования различаются в зависимости от браузера. Подводя итог вышесказанному, Chrome предъявляет следующие требования к периодической фоновой синхронизации:
- Определенный показатель вовлеченности пользователей.
- Наличие ранее использованной сети.
Сроки синхронизации разработчиками не контролируются. Частота синхронизации будет зависеть от того, как часто используется приложение. (Обратите внимание, что приложения для конкретных платформ в настоящее время этого не делают.) Также учитывается состояние питания и подключения устройства.
Когда его следует использовать?
Когда ваш сервис-воркер просыпается для обработки события periodicsync , у вас есть возможность запросить данные, но вы не обязаны это делать. При обработке события следует учитывать состояние сети и доступное хранилище и в ответ загружать различные объемы данных. Вы можете использовать следующие ресурсы, чтобы помочь:
Разрешения
После установки сервисного работника используйте API разрешений для запроса periodic-background-sync . Это можно сделать либо из окна, либо из контекста сервисного работника.
const status = await navigator.permissions.query({
name: 'periodic-background-sync',
});
if (status.state === 'granted') {
// Periodic background sync can be used.
} else {
// Periodic background sync cannot be used.
}
Регистрация периодической синхронизации
Как уже говорилось, для периодической фоновой синхронизации требуется сервисный работник. Получите PeriodicSyncManager с помощью ServiceWorkerRegistration.periodicSync и вызовите для него register() . Для регистрации требуется как тег, так и минимальный интервал синхронизации ( minInterval ). Тег идентифицирует зарегистрированную синхронизацию, поэтому можно зарегистрировать несколько синхронизаций. В приведенном ниже примере имя тега — 'content-sync' , а minInterval — один день.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
try {
await registration.periodicSync.register('content-sync', {
// An interval of one day.
minInterval: 24 * 60 * 60 * 1000,
});
} catch (error) {
// Periodic background sync cannot be used.
}
}
Проверка регистрации
Вызовите periodicSync.getTags() , чтобы получить массив тегов регистрации. В приведенном ниже примере имена тегов используются для подтверждения активности обновления кэша и предотвращения повторного обновления.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
const tags = await registration.periodicSync.getTags();
// Only update content if sync isn't set up.
if (!tags.includes('content-sync')) {
updateContentOnPageLoad();
}
} else {
// If periodic background sync isn't supported, always update.
updateContentOnPageLoad();
}
Вы также можете использовать getTags() для отображения списка активных регистраций на странице настроек вашего веб-приложения, чтобы пользователи могли включать или отключать определенные типы обновлений.
Реагирование на периодическое событие фоновой синхронизации
Чтобы реагировать на периодическое событие фоновой синхронизации, добавьте обработчик событий periodicsync в свой сервис-воркер. Передаваемый ему объект event будет содержать параметр tag соответствующий значению, использованному при регистрации. Например, если периодическая фоновая синхронизация была зарегистрирована с именем 'content-sync' , то event.tag будет 'content-sync' .
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'content-sync') {
// See the "Think before you sync" section for
// checks you could perform before syncing.
event.waitUntil(syncContent());
}
// Other logic for different tags as needed.
});
Отмена регистрации синхронизации
Чтобы завершить зарегистрированную синхронизацию, вызовите periodicSync.unregister() , указав имя синхронизации, регистрацию которой вы хотите отменить.
const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {
await registration.periodicSync.unregister('content-sync');
}
Интерфейсы
Ниже приведен краткий обзор интерфейсов, предоставляемых API периодической фоновой синхронизации.
-
PeriodicSyncEvent. Передается обработчику событийServiceWorkerGlobalScope.onperiodicsyncв момент, выбранный браузером. -
PeriodicSyncManager. Регистрирует и отменяет регистрацию периодических синхронизаций и предоставляет теги для зарегистрированных синхронизаций. Получите экземпляр этого класса из свойства ServiceWorkerRegistration. periodicSync`. -
ServiceWorkerGlobalScope.onperiodicsync. Регистрирует обработчик для полученияPeriodicSyncEvent. -
ServiceWorkerRegistration.periodicSync. Возвращает ссылку наPeriodicSyncManager.
Пример
Обновление контента
В следующем примере периодическая фоновая синхронизация используется для загрузки и кэширования актуальных статей для новостного сайта или блога. Обратите внимание на имя тега, которое указывает тип синхронизации ( 'update-articles' ). Вызов updateArticles() заключен в event.waitUntil() , чтобы сервис-воркер не завершал работу до того, как статьи будут загружены и сохранены.
async function updateArticles() {
const articlesCache = await caches.open('articles');
await articlesCache.add('/api/articles');
}
self.addEventListener('periodicsync', (event) => {
if (event.tag === 'update-articles') {
event.waitUntil(updateArticles());
}
});
Добавление периодической фоновой синхронизации в существующее веб-приложение
Этот набор изменений был необходим для добавления периодической фоновой синхронизации к существующему PWA . Этот пример включает в себя ряд полезных операторов ведения журнала, которые описывают состояние периодической фоновой синхронизации в веб-приложении.
Отладка
Получение комплексного представления периодической фоновой синхронизации при локальном тестировании может оказаться непростой задачей. Информация об активных регистрациях, приблизительных интервалах синхронизации и журналах прошлых событий синхронизации предоставляет ценный контекст при отладке поведения вашего веб-приложения. К счастью, вы можете найти всю эту информацию с помощью экспериментальной функции в Chrome DevTools.
Запись локальной активности
Раздел «Периодическая фоновая синхронизация» в DevTools организован вокруг ключевых событий жизненного цикла периодической фоновой синхронизации: регистрация для синхронизации, выполнение фоновой синхронизации и отмена регистрации. Чтобы получить информацию об этих событиях, нажмите «Начать запись» .
Во время записи в DevTools будут появляться записи, соответствующие событиям, с контекстом и метаданными, зарегистрированными для каждого.
После однократного включения записи она будет оставаться включенной в течение трех дней, позволяя DevTools собирать локальную отладочную информацию о фоновой синхронизации, которая может произойти, даже через несколько часов в будущем.
Моделирование событий
Хотя запись фоновой активности может быть полезной, бывают случаи, когда вам нужно немедленно протестировать обработчик periodicsync , не дожидаясь, пока событие сработает с нормальной частотой.
Вы можете сделать это через раздел «Служебные работники» на панели «Приложения» в Chrome DevTools. Поле «Периодическая синхронизация» позволяет вам указать тег для использования события и запускать его столько раз, сколько вам нужно.
Использование интерфейса DevTools
Начиная с Chrome 81, вы увидите раздел «Периодическая фоновая синхронизация» на панели приложений DevTools.
