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

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

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

???

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

1. Ну мы используем, но так, там картинки вроде закэшировали...
2. А что это?
3. По-моему это слишком сложно!
4. Они нестабильны и мало где поддерживаются.
5. Мы вообще на Python пишем, чё ты пристал к нам? Ходит тут, вопросы спрашивает постоянно!

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

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

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

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

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

это прокси

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

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

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

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

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

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

        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'))
            ))
        });
      

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

• Много статики
• Редкое обновление
• Без динамических данных

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

• Большие файлы
• Неиспользуемые файлы

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

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

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

• Редкое обновление
• Страницы, подходящие для офлайн

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

• Динамические данные

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

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

Идея

Любой сайт

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

Идея

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());
        }
      });
    

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

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

• Формы
• Отправка данных

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

• Медленный или ограниченный трафик
• Актуальность данных

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

Идея

Идея

Content-Length и Range

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

      fetch(url, {
        headers: {
          Range: 'bytes=START_RANGE - END_RANGE / TOTAL'
        }
      });
    

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

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

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

Поддержка Background Sync

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

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

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

Задачка

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

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

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

• 104% рост конверсии для новых пользователей
• 82% рост конверсии на iOS
• В 2 раза больше посещённых страниц
• 74% увеличение времени сессии

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

Вопросы?