Синхронизация и обновление PWA в фоновом режиме

Используя рабочую роль службы, прогрессивное веб-приложение (PWA) может выполнять работу в фоновом режиме, даже если пользователь не использует приложение, и обеспечивает лучший автономный режим.

Рассмотрим следующие варианты использования:

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

Все три из этих вариантов использования возможны с PWA с помощью следующих API:

• API фоновой синхронизации
• API периодической фоновой синхронизации
• API фоновой выборки

Хотя эти API имеют похожие имена, они отличаются по своей природе.

Использование API фоновой синхронизации для синхронизации данных с сервером

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

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

Другим примером использования API фоновой синхронизации является загрузка содержимого в фоновом режиме для пользователя.

Проверка поддержки

API фоновой синхронизации доступен в Microsoft Edge, но следует убедиться, что API фоновой синхронизации поддерживается в других браузерах и устройствах, на которые выполняется приложение. Чтобы убедиться, что API фоновой синхронизации поддерживается, проверьте, имеет sync ли ServiceWorkerRegistration объект свойство :

navigator.serviceWorker.ready.then(registration => {
    if (registration.sync) {
        // Background Sync is supported.
    } else {
        // Background Sync isn't supported.
    }
});

Дополнительные сведения об интерфейсе см. в ServiceWorkerRegistration разделе ServiceWorkerRegistration на сайте MDN.

Запрос синхронизации

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

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

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

async function requestBackgroundSync() {
    const registration = await navigator.serviceWorker.ready;
    await registration.sync.register('my-tag-name');
}

Или же, из рабочей роли службы, сделайте следующее:

async function requestBackgroundSync() {
    await self.registration.sync.register('my-tag-name');
}

Указанная my-tag-name выше строка должна быть уникальным тегом, который идентифицирует этот запрос синхронизации, чтобы можно было выполнить несколько запросов.

Реагирование на событие синхронизации

Как только можно использовать подключение и рабочая роль службы запущена, в рабочую sync роль службы отправляется событие, которое может использовать его для синхронизации необходимых данных. Событие sync можно прослушивать с помощью следующего кода:

self.addEventListener('sync', event => {
    if (event.tag === 'my-tag-name') {
        event.waitUntil(doTheWork());
    }
});

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

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

Дополнительные сведения о событии Sync , интерфейсе ServiceWorkerRegistrationи SyncManager см. в спецификации проекта фоновой синхронизации и документации по API фоновой синхронизации.

Демонстрационная версия приложения

My Movie List PWA — это демонстрационное приложение, которое использует API фоновой синхронизации для получения сведений о фильмах позже, если пользователь находится в автономном режиме.

Чтобы проверить фоновую синхронизацию, выполните приведенные далее действия.

1. Установите приложение.

2. Выполните поиск фильмов с помощью поля ввода поиска.

3. Перейдите в автономный режим. Для этого откройте Средства разработки (F12), а затемустановите флажок Автономныерабочие роли>службы приложений>.

   

4. В одном из результатов фильма выберите Дополнительные сведения.

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

   

6. Перейдите в интернет. Для этого в средствах разработки снимитефлажок Автономныерабочие роли> службы приложений>.

7. Перезагрузите приложение. Теперь появятся сведения о фильме.

Чтобы просмотреть пример кода, ознакомьтесь с репозиторием movies-db-pwa .

Отладка фоновой синхронизации с помощью средств разработки

Чтобы протестировать код фоновой синхронизации, вам не нужно переходить в автономный режим, а затем подключиться к сети и ждать, пока Microsoft Edge активирует sync событие. Вместо этого Средства разработки позволяют имитировать фоновое событие синхронизации.

Чтобы имитировать событие, выполните приведенные sync далее действия.

1. Откройте средства разработки (F12).
2. ВыберитеApplication Service Workers (Рабочие роли службы приложений>).
3. Введите имя тега, которое вы использовали при регистрации синхронизации, в поле Синхронизация входных данных.
4. Нажмите кнопку Синхронизировать .

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

1. Откройте средства разработки (F12).
2. Выберите Синхронизация приложений>в фоновом режиме.
3. Выберите Начать запись событий.

Регистрация и отправки синхронизации отображаются в таблице журнала событий:

Использование API периодической фоновой синхронизации для регулярного получения нового содержимого

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

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

Проверка поддержки

Чтобы проверить, поддерживается ли этот API в браузерах и устройствах, на котором выполняется приложение, проверьте, имеет periodicSync ли ServiceWorkerRegistration объект свойство :

navigator.serviceWorker.ready.then(registration => {
    if (registration.periodicSync) {
        // Periodic Background Sync is supported.
    } else {
        // Periodic Background Sync isn't supported.
    }
});

Запрос разрешения у пользователя

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

Чтобы запросить у пользователя разрешение на выполнение периодической фоновой синхронизации, используйте API разрешений следующим образом:

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.
}

Дополнительные сведения об API разрешений см. в разделе API разрешений в MDN.

Регистрация периодической синхронизации

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

async function registerPeriodicSync() {
    await registration.periodicSync.register('get-daily-news', {
        minInterval: 24 * 60 * 60 * 1000
    });
}

Объект , minInterval используемый в приведенном выше коде, соответствует 1 дню в миллисекундах. Это только минимальный интервал, и Microsoft Edge учитывает другие факторы, прежде чем оповещать рабочую роль службы с периодическим событием синхронизации, например сетевое подключение и регулярно ли пользователь взаимодействует с приложением.

Реагирование на события периодической синхронизации

Когда Microsoft Edge решит, что это хорошее время для периодической синхронизации, Microsoft Edge отправляет событие в рабочую periodicsync роль службы. Это событие можно обработать periodicsync , используя то же имя тега, которое было указано при регистрации синхронизации.

self.addEventListener('periodicsync', event => {
    if (event.tag === 'get-daily-news') {
        event.waitUntil(getDailyNewsInCache());
    }
});

Функция getDailyNewsInCache — это место, где рабочая роль службы может получить новое содержимое с сервера и сохранить его в кэше. Ожидается, что эта функция вернет обещание, указывающее, успешно или неудачно выполнена синхронизация.

Дополнительные сведения о событии PeriodicSync , интерфейсе ServiceWorkerRegistrationи интерфейсе см. в следующих разделах PeriodicSyncManager :

• Веб-периодическая фоновая синхронизация — черновик спецификации.
• API периодической веб-синхронизации в фоновом режиме.

Демонстрационная версия приложения

Советы по devTools — это PWA, использующий API периодической фоновой синхронизации. [Советы по средствам разработки] PWA ежедневно получает новые советы по средствам разработчика и сохраняет их в кэше, чтобы пользователи могли получить к ним доступ при следующем открытии приложения, независимо от того, подключены ли они к интернету или нет.

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

Отладка периодической фоновой синхронизации с помощью Средств разработки

Средства разработки можно использовать для имитации periodicsync событий вместо ожидания минимального интервала.

Чтобы имитировать событие, выполните следующие действия:

1. Откройте средства разработки (F12).
2. ВыберитеApplication Service Workers (Рабочие роли службы приложений>).
3. Введите имя тега, которое вы использовали при регистрации периодической синхронизации, в поле ввода Периодической синхронизации .
4. Нажмите кнопку Периодическая синхронизация .

Вы также можете регистрировать периодические действия фоновой синхронизации, созданные приложением, в средствах разработки:

1. Откройте средства разработки (F12).
2. ВыберитеПериодическая фоновая синхронизация приложений>.
3. Выберите Начать запись событий.

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

Использование API фоновой выборки для получения больших файлов, когда не запущена рабочая роль приложения или службы

API фоновой выборки позволяет PWA полностью делегировать загрузку больших объемов данных подсистеме браузера. Таким образом, рабочая роль приложения и службы не должна выполняться вообще во время загрузки.

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

Проверка поддержки

Чтобы проверить, поддерживается ли этот API, проверьте, существует ли BackgroundFetchManager конструктор в глобальном объекте:

if (self.BackgroundFetchManager) {
    // Background Fetch is supported.
} else {
    // Background Fetch isn't supported.
}

Запуск фоновой выборки

Чтобы начать выборку фона, выполните приведенные далее действия.

navigator.serviceWorker.ready.then(async registration => {
    const fetch = await registration.backgroundFetch.fetch('my-download-id', 
                                                           fileUrls, options);
});

my-download-id Выше должен быть уникальным идентификатором строки для этой фоновой выборки. fileUrls — это список файлов для скачивания. Это будет массив строковых URL-адресов. И options — это объект, который можно использовать для настройки внешнего вида действия скачивания в браузере.

Дополнительные сведения о функции см. в разделах BackgroundFetchManager.fetch() и Знакомство с фоновой выборкой.fetch

Использование API badging приложения и API уведомлений для повторного привлечения пользователей

Используйте API badging для приложений и API уведомлений, чтобы сообщить пользователям о том, что фоновые задачи, загрузки или новое содержимое завершены, не прерывая рабочий процесс. Использование значков и уведомлений может увеличить повторное взаимодействие пользователей с приложением.

В Microsoft Edge значки приложений на панели задач отображаются на значках приложений, а уведомления интегрируются с центром уведомлений системы.

Сведения об использовании этих API см. в статье Повторное вовлечение пользователей с помощью значков, уведомлений и push-сообщений.