Про сервис-воркеры. Снова!

Кирилл Чугаинов, iTechArt

Про сервис-воркеры. Снова!

React icon

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

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

Волк говорит: 'Шо, опять?'

Про сервис-воркеры. Снова!

React icon
Стрелочки на меня

Кирилл Чугаинов

???

Штурмовик грустит

Почему вы не используете
сервис-воркеры?

Не было задачи
добавить сервис-воркер

А какие задачи стояли?

  1. Добавить в приложение Redux-Saga
  2. Прописать стили для ::before
  3. Настройте Guetzli для картинок

Статьи о сервис-воркерах

Доклады о сервис-воркерах

  1. Jake Archibald: The ServiceWorker is coming, look busy | JSConf EU 2014
  2. Service Workers как предчувствие
  3. Introduction to Service Workers
  4. Погружение в Service Worker. Олег Наянов, Restream
  5. How to Setup a Basic Service Worker (with Caching)
  6. How does a service worker work?
  7. What is a service workers
  8. Краткое введние в Service Workers в подкасте Суровый веб #113
  9. What is a service worker?
  10. Сервис воркеры: используем накопленные знания для светлого будущего PWA, Максим Сальников
Удар кулаком по столу

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

Это событийно-управляемый worker. Он представляет собой JavaScript-файл, который может контролировать web-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, кэшировать их, для того чтобы предоставить вам по лный контроль над тем, как приложение ведет себя в определенных ситуациях (например, когда сеть не доступна).

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

Это событийно-управляемый worker. Он представляет собой JavaScript-файл, который может контролировать web-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, кэшировать их, для того чтобы предоставить вам полный контроль над тем, как приложение ведет себя в определенных ситуациях (например, когда сеть не доступна).

это прокси

Где находится сервис-воркер?

схема расположения сервис-воркера

Давным-давно
в далёком-далёком
посёлке городского типа...

Жил-был мальчик

Люк Скайуокер

появился у мальчика смартфон

Люк Скайуокер и r2d2

Ты должен был помочь

Оби Ван кричит

SW: Эпизод 1 Кэширование всего

Проблема:
медленный интернет

Помещаем файлы в кэш

Схема кэширования

Используем файлы из кэша

Схема кэширования

Первый раз сервис-воркер
не поможет

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

        const filesForCache = [
          '/styles/main.css'
          '/scripts/script.js'
          '/pictures/logo.png'
        ...
        ];
      
        self.addEventListener('install', (e) => {
          e.waitUntil(
            caches.open('cache-name').then(function (cache) {
              return cache.addAll(filesForCache);
          })
         );
        });
        self.addEventListener('fetch', (event) => {
          event.respondWith(
            caches.open('cache-name').then((cache) => 
              cache.match(event.request)
              .then((matching) => 
                matching || Promise.reject('no-match'))
            ))
        });
      

Где применять хорошо

Где применять плохо

SW: Эпизод 2 Выборочный офлайн

Проблема:
сохранять страницы в офлайн

Помещаем файлы в кэш по запросу

Схема кэширования по запросу

Где применять хорошо

Где применять плохо

SW: Эпизод 3 Резервный ответ

Адмирал Акбар кричит это 404

Сеть недоступна

Нет доступа к сети

Сеть недоступна

это не те дроиды, которых вы ищете

Проблема:
недружелюбный интерфейс
без интернета

Идея

идея резервного ответа

Любой сайт

Настало время стать мастером

Люк Скайуокер с мечом

Неееееет

Люк Скайуокер кричит нееееет

SW: Эпизод 4 Отложенная отправка

Проблема:
нестабильный интернет

Идея

Схема отложенной отправки

Background Sync API

      navigator.serviceWorker.ready
        .then(function(swRegistration) {
          return swRegistration.sync.register('mySync');
        });
    

Background Sync API

      self.addEventListener('sync', function(event) {
        if (event.tag == 'mySync') {
          event.waitUntil(doSomeStuff());
        }
      });
    

Демонстрация

Где применять хорошо

Где применять плохо

SW: Эпизод 5 Загрузка кусками

Проблема:
загрузить большой файл

Идея

идея загрузки большого файла

Идея

идея загрузки большого файла

Content-Length и Range

Добавить заголовок

      fetch(url, {
        headers: {
          Range: 'bytes=START_RANGE - END_RANGE / TOTAL'
        }
      });
    
как загружаются данные

Рекомендации

мастер йода

Прогрессивно улучшайте!

Поддержка сервис-воркеров

Поддержка сервис-воркеров

Поддержка Background Sync

Поддержка Background Sync

Прогрессивно улучшайте!

      if ('serviceWorker' in navigator) { 
        navigator.serviceWorker.register('./sw.js');
      };
       ...
      if ('SyncManager' in window) { 
        ...
      };
    

Ресурсы пользователя ограничены!

Задачка

      const cacheName =
      self.cachePrefix + '-cache';
    

Не доверяйте глобальному состоянию скрипта

Кто использует?

кто использует сервис-воркеры
логотип алиэкспресс
книга про PWA
@Chugainovkirill

Спасибо за внимание!

Вопросы?