Максим Сальников

@webmaxru

Фоновые сервисы в браузерах:

Есть ли жизнь после закрытия вкладки?

Что доступно из фоновых сервисов сегодня

И как использовать это во благо пользователей

Максим Сальников

  • Организатор Mobile / Web / PWA митапов в Осло и Лондоне

  • Организатор конференций Mobile Era и ngVikings в Скандинавии

  • Google Dev Expert по веб-технологиям (Capabilities & Installability)

Ответственный за успех Azure-разработчиков в Microsoft

@webmaxru

А что, если бы мы могли...

  • Поддерживать приложение и его данные в актуальном виде

  • Показывать запланированные уведомления, не заботясь о статусе подключения на тот момент

  • Переотправлять данные в случае их неудачной отправки из-за отсутствия сети

Вне самого приложения

Что такое фоновый сервис?

  • Исполняется в отдельном потоке

  • Обособленный жизненный цикл

  • Инициируется некоторыми событиями

Типы событий

  • Изменение состояния подключения к сети

  • Изменение статуса сетевого запроса

  • Основанные на таймерах

  • Явно отправленные из бэкенда

Сервис-воркер

Сервис-воркер

ОС

Браузер

Интернет

Апп

Событие

Событие

Событие

Событие

  • Отправить сообщение

  • Открыть вкладку с приложением

  • Показать уведомление

  • Выполнить произвольный код

Сообщение

DevTools -> Application

  • Установка сервис-воркера "на лету"

  • Управление интерфейсом платежных методов

DevTools -> Application

  • Единовременное событие "когда синхронизация возможна"

  • Для организации переотправки запросов, сделанных офлайн

DevTools -> Application

https://workboxjs.org

  • Отвязывает процесс скачивания от жизненного цикла приложения

  • Привязывает скачанные данные к приложению

DevTools -> Application

  • Для запуска произвольного кода по сигналу с бэкенда

  • ...с обязательным показом уведомления

DevTools -> Application

  • События, вызываемые таймерами

(Triggers)

DevTools -> Application

Periodic Background Sync API

Notification Triggers API

Тайминг

Интервалы

Один раз

Возможности

Любой код

Уведомление

Окончательное решение по времени

Браузер

Разработчик

Статус подключения

Только онлайн

Не важен

Требования

Установка, разрешение

Разрешенные уведомления

Заметность

Незаметно

Уведомление

Periodic background sync

https://web.dev/periodic-background-sync/

const registration = await navigator.serviceWorker.ready;
if ('periodicSync' in registration) {

  registration.periodicSync.register('update-content', {
    
      // Интервал в один день
      minInterval: 24 * 60 * 60 * 1000
  })

}

main.js

Произвольный код

https://web.dev/periodic-background-sync/

self.addEventListener('periodicsync', (event) => {
  if (event.tag === 'update-content') {
    
    // Не уверен - не запускай! Think before you sync!
    event.waitUntil( updateContent() );
  }
});

service-worker.js

  • Тип подключения?

  • Режим экономии трафика?

  • Доступное место на устройстве?

Network Information API

StorageManager API

}

Engagement Score Интервал Periodic Sync (часы)
NONE Никогда
MINIMAL

36
LOW

24
MEDIUM

24
HIGH

12
MAX

12

Интервалы в Chrome

chrome://site-engagement/

Notification triggers

const registration = await navigator.serviceWorker.ready;
if ('showTrigger' in Notification.prototype) {
      
  // 5 секунд от "сейчас"
  const triggerTime =  Date.now() + 5 * 1000

  registration.showNotification('Notification Trigger Demo', {
    body: `Scheduled for ${new Date( triggerTime ).toLocaleTimeString()}`,
    showTrigger: new TimestampTrigger( triggerTime )
  });

}

main.js

Предложение обновить данные

const registration = await navigator.serviceWorker.ready;
if ('showTrigger' in Notification.prototype) {

  registration.showNotification('Reminder', {
    tag: 'update-content',
    body: "Click to sync with the server",
      
    // Через сутки
    showTrigger: new TimestampTrigger(Date.now() + 24 * 60 * 60 * 1000)
  });

}

main.js

https://web.dev/notification-triggers/​

Явное действие пользователя

https://web.dev/notification-triggers/​

self.addEventListener('notificationclick', (event) => {
  if (event.notification.tag === 'update-content') {
    
    event.waitUntil( updateContent() );
  }
});

service-worker.js

Доступность и детали

  • Платформа и ОС

  • Браузер и его версия

  • Настройки и флаги браузера

  • Адрес сайта

  • Статус установки приложения

Длинный ответ

https://whatwebcando.today

https://web-confluence.appspot.com

http://caniuse.com

Доступность и детали

Короткий ответ

* Progressive = "Прогрессивное улучшение"

*

https://goo.gle/fugu-api-tracker

Более 100 новых API

Подведем итоги

  • Цель: догнать и перегнать возможности "нативного" кода

  • Пользовательский опыт: баланс возможностей и "неудобностей"

  • Для разработчиков: часть веб-стандартов, удобные инструменты

Все только начинается

https://goo.gle/fugu-api-tracker

aka.ms/pwa-slack

  • 2000+ разработчиков

  • Представители браузеров, фреймворков и библиотек

t.me/pwa_ru

  • Все о PWA на русском языке

Спа-си-бо!

Максим Сальников

@webmaxru

Пишите в твиттер

Ваши вопросы

Максим Сальников

@webmaxru

Фоновые сервисы в браузерах - есть ли жизнь после закрытия вкладки?

By Maxim Salnikov

Made with Slides.com

Фоновые сервисы в браузерах - есть ли жизнь после закрытия вкладки?

Пользователь закрывает вкладку в браузере, и ваше замечательное фронтенд-приложение испаряется. А что если можно было бы оставить какие-то его части еще немного поработать во благо улучшения UX? Отреагировать на какие-то события, завершить начатое общение с сетью - в общем, исполнить немного кода при закрытой вкладке и даже браузере. Я расскажу о разных интересных возможностях API из семейства сервис-воркеров, позволяющих продлить жизнь приложения, чтобы всегда иметь под рукой свежие данные, не бояться проблем с сетью, уметь показывать уведомления - все ради отличного пользовательского опыта.

  • 3,017

More from Maxim Salnikov