Более удобная работа в офлайн-режиме с Periodic Background Sync API

Синхронизируйте данные веб-приложения в фоновом режиме, чтобы оно работало как обычное приложение

Jeff Posnick

Joe Medley

Вы когда-нибудь оказывались в одной из следующих ситуаций?

• Поездка на поезде или метро, где связь нестабильна или отсутствует.
• Оператор связи ограничил скорость передачи данных после того, как вы посмотрели слишком много видео.
• Проживание в стране, где пропускная способность сети не соответствует спросу.

Если да, то вы наверняка сталкивались с тем, что некоторые задачи в интернете выполнять неудобно, и задавались вопросом, почему в таких случаях приложения для определенных платформ работают лучше. Приложения для определенных платформ могут заранее получать свежий контент, например новости или информацию о погоде. Даже если в метро нет сети, вы все равно сможете читать новости.

Периодическая фоновая синхронизация позволяет веб-приложениям периодически синхронизировать данные в фоновом режиме, приближая их к поведению приложений для определенных платформ.

Попробовать

DevTools Tips – это PWA, в котором используется Periodic Background Sync API. PWA DevTools Tips ежедневно получает новые советы по использованию инструментов разработчика и сохраняет их в кеше, чтобы пользователи могли получить к ним доступ при следующем открытии приложения, независимо от того, подключены они к интернету или нет. Чтобы использовать Periodic Background Sync API, установите приложение.

Перейдите к исходному коду на GitHub. В частности, приложение регистрирует периодическую синхронизацию в функции registerPeriodicSync(). Код сервис-воркера – это место, где приложение прослушивает событие periodicsync.

Основные понятия и использование

Периодическая фоновая синхронизация позволяет показывать актуальный контент при запуске прогрессивного веб-приложения или страницы, поддерживаемой сервисным работником. Это происходит, когда приложение или страница не используются. Это предотвращает обновление контента приложения после запуска, пока он просматривается. Кроме того, он предотвращает показ индикатора загрузки контента перед обновлением.

Без периодической фоновой синхронизации веб-приложениям приходится использовать альтернативные методы для скачивания данных. Распространенный пример – использование push-уведомления для активации сервис-воркера. Пользователь видит сообщение, например "Доступны новые данные". Обновление данных – это побочный эффект. Вы по-прежнему можете использовать push-уведомления для действительно важных новостей, например срочных сообщений.

Периодическую фоновую синхронизацию можно спутать с фоновой синхронизацией. Хотя их названия похожи, они используются в разных случаях. Синхронизация в фоновом режиме чаще всего используется для повторной отправки данных на сервер, если предыдущий запрос не удался.

Как правильно отслеживать вовлеченность пользователей

При неправильной настройке периодическая фоновая синхронизация может привести к нерациональному использованию ресурсов пользователей. Прежде чем выпустить ее, Chrome провел пробный период, чтобы убедиться, что все работает правильно. В этом разделе описаны некоторые решения, принятые при разработке Chrome, чтобы сделать эту функцию максимально полезной.

Первое решение, принятое при разработке Chrome, заключается в том, что веб-приложение может использовать периодическую фоновую синхронизацию только после того, как пользователь установит его на свое устройство и запустит как отдельное приложение. Периодическая фоновая синхронизация недоступна в контексте обычной вкладки в Chrome.

Кроме того, поскольку Chrome не хочет, чтобы неиспользуемые или редко используемые веб-приложения без необходимости расходовали заряд батареи или трафик, в Chrome реализована периодическая фоновая синхронизация, которую разработчики должны заслужить, предоставляя пользователям ценные возможности. В частности, Chrome использует показатель взаимодействия с сайтом (about://site-engagement/), чтобы определить, как часто можно выполнять периодическую фоновую синхронизацию для определенного веб-приложения. Другими словами, событие periodicsync не будет запущено, если показатель взаимодействия равен нулю, а его значение влияет на частоту запуска события periodicsync. Это гарантирует, что в фоновом режиме будут синхронизироваться только те приложения, которыми вы активно пользуетесь.

Периодическая фоновая синхронизация имеет некоторые сходства с существующими API и практиками на популярных платформах. Например, однократная фоновая синхронизация и push-уведомления позволяют логике веб-приложения работать немного дольше (через сервис-воркер) после того, как пользователь закрыл страницу. На большинстве платформ пользователи устанавливают приложения, которые периодически обращаются к сети в фоновом режиме, чтобы улучшить взаимодействие с ними, например для получения важных обновлений, предварительной загрузки контента и синхронизации данных. Аналогичным образом периодическая фоновая синхронизация позволяет логике веб-приложения выполняться регулярно в течение нескольких минут.

Если браузер будет часто и без ограничений разрешать это, могут возникнуть проблемы с конфиденциальностью. Вот как Chrome устраняет этот риск при периодической фоновой синхронизации:

• Синхронизация в фоновом режиме выполняется только в сети, к которой устройство подключалось ранее. Chrome рекомендует подключаться только к сетям, которыми управляют надежные организации.
• Как и при любом интернет-соединении, при периодической фоновой синхронизации раскрываются IP-адреса клиента и сервера, с которым он обменивается данными, а также имя сервера. Чтобы снизить частоту синхронизации до уровня, который был бы, если бы приложение синхронизировалось только в активном режиме, браузер ограничивает частоту фоновой синхронизации приложения в соответствии с тем, как часто пользователь взаимодействует с ним. Если пользователь перестает часто взаимодействовать с приложением, периодическая фоновая синхронизация перестает запускаться. Это улучшение по сравнению с текущим положением дел в приложениях для определенных платформ.

Когда можно использовать этот метод?

Правила использования зависят от браузера. Как уже говорилось, Chrome предъявляет к периодической фоновой синхронизации следующие требования:

• определенный показатель вовлеченности пользователей;
• Наличие ранее использованной сети.

Разработчики не могут контролировать время синхронизации. Частота синхронизации будет соответствовать частоте использования приложения. (Обратите внимание, что приложения для определенных платформ этого не делают.) Также учитывается состояние питания и подключения устройства.

Когда следует использовать этот метод?

Когда сервис-воркер активируется для обработки события periodicsync, у вас есть возможность запросить данные, но нет обязанности это делать. При обработке события следует учитывать состояние сети и доступное хранилище и скачивать разный объем данных. Вам могут помочь следующие ресурсы:

• Network Information API
• Как определить, включен ли режим экономии трафика
• Как рассчитывается доступное пространство

Разрешения

После установки сервис-воркера используйте Permissions 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.
}

Как зарегистрировать периодическую синхронизацию

Как уже было сказано, для периодической фоновой синхронизации требуется service worker. Получите объект 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');
}

Интерфейсы

Ниже приведены интерфейсы, предоставляемые Periodic Background Sync API.

• PeriodicSyncEvent. Передается обработчику событий ServiceWorkerGlobalScope.onperiodicsync в момент, выбранный браузером.
• PeriodicSyncManager. Регистрирует и отменяет периодические синхронизации и предоставляет теги для зарегистрированных синхронизаций. Получите экземпляр этого класса из свойства ServiceWorkerRegistration.periodicSync.
• ServiceWorkerGlobalScope.onperiodicsync. Регистрирует обработчик для получения PeriodicSyncEvent.
• ServiceWorkerRegistration.periodicSync. Возвращает ссылку на PeriodicSyncManager.

Пример

В разделах ниже приведены примеры использования API периодической фоновой синхронизации.

Обновить

В примере ниже показано, как использовать периодическую фоновую синхронизацию для скачивания и кеширования актуальных статей для новостного сайта или блога. Обратите внимание на название тега, которое указывает на тип синхронизации ('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. В этом примере есть несколько полезных записей журнала, описывающих состояние периодической фоновой синхронизации в веб-приложении.

Отладка Periodic Background Sync API

При локальном тестировании сложно получить полное представление о периодической фоновой синхронизации. Информация об активных регистрациях, приблизительных интервалах синхронизации и журналах прошлых событий синхронизации предоставляет ценный контекст при отладке поведения веб-приложения. К счастью, всю эту информацию можно найти с помощью экспериментальной функции в инструментах разработчика Chrome.

Как записывать местные действия

Раздел Периодическая фоновая синхронизация в DevTools организован вокруг ключевых событий в жизненном цикле периодической фоновой синхронизации: регистрация для синхронизации, выполнение фоновой синхронизации и отмена регистрации. Чтобы получить информацию об этих событиях, нажмите Начать запись.

Во время записи в DevTools будут появляться записи, соответствующие событиям, с контекстом и метаданными для каждого из них.

После включения запись будет активна до трех дней. За это время инструменты разработчика смогут собирать локальные сведения для отладки о фоновой синхронизации, которая может произойти даже через несколько часов.

Как имитировать события

Запись фоновой активности может быть полезной, но иногда вам нужно протестировать обработчик periodicsync немедленно, не дожидаясь срабатывания события в обычном режиме.

Это можно сделать в разделе Service Workers (Сервисные работники) на панели Application (Приложение) в инструментах разработчика Chrome. В поле Периодическая синхронизация можно указать тег для события и настроить его активацию столько раз, сколько вам нужно.

Использование интерфейса инструментов разработчика

На панели Приложение в DevTools появится раздел Периодическая фоновая синхронизация.