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

@webmaxru

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

используем накопленный опыт и смотрим в будущее

Как правильно использовать то, что уже умеет сервис-воркер

И чему он еще научится

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

@webmaxru

Google Dev Expert, Microsoft MVP
Организатор Mobile / Web / PWA митапов в Осло и Лондоне
Организатор конференций Mobile Era и ngVikings

Full-stack разработчик "приложений из будущего" в ForgeRock

Предсказуемое кеширование

Отложенные действия в оффлайне

Получение и показ уведомлений

Service Worker API

Что действительно нового?

JIT добавленный метод платежа

Полноценный оффлайн-режим

Оптимизация работы с сетью

install, activate, fetch, backgroundfetchsuccess, backgroundfetchfail, backgroundfetchclick

sync

push, notificationclick

paymentrequest

Логически

Физически

-файл(ы)

Вебсайт

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

Браузер/ОС

Event-driven воркер

Похож на SharedWorker

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

https://github.com/w3c/ServiceWorker/blob/master/explainer.md

Не похож на SharedWorker

Может запускаться без страницы
Работает только под HTTPS (localhost - исключение)
Может быть завершен браузером в любое время
Имеет заданную модель жизненного цикла

https://github.com/w3c/ServiceWorker/blob/master/explainer.md

Непростой жизненный цикл

'install'

Загрузка

Установка

Активация

Удален

'activate'

https://bitsofco.de/the-service-worker-lifecycle/

[Ожидание]

Активен

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

Другое определение PWA

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

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

Кросс-платформенные?

Браузеры

Настольные

Мобильные

За флагом

Построим App Shell

My App

Определиться с минимально необходимым набором ресурсов

Доступна новая версия.

Обновить?

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

install: поместить ресурсы в Cache Storage
activate: очистить Cache от ресурсов предыдущей версии приложения
fetch: если ресурс в Cache Storage, выдать его оттуда, иначе — загрузить из сети (и закешировать)

Build time

Зарегистрировать сервис-воркер и проверять, не обновился ли он

Вебсайт

Прогрессивное улучшение

Определяйте наличие функциональности

Совет #1

https://tomayac.github.io/pwa-feature-detector/

Поддержка: ваш браузер

PWA Feature Detector

https://web-confluence.appspot.com/#!/catalog?q="pushmanager%20or%20pushsubscription%20or%20serviceworker"

Поддержка: точно

Web API Confluence

Регистрация

if ('serviceWorker' in navigator) {

    // Регистрируем сервис-воркер

}

Фоновая синхронизация

if ('SyncManager' in window) {

    // Реализуем функциональность для оффлайн-режима

}

Подписка на Push-уведомления

if (!('PushManager' in window)) {

    // Прячем интерфейс подписки на push-уведомления

}

Действия в уведомлениях

if ('actions' in Notification.prototype) {

  // Можем использовать кнопки с разными действиями

}

Правильный момент для регистрации

Лучше — позже (или никогда)

Совет #2

Улучшать

Не мешать

Не сломать

if ('serviceWorker' in navigator) {

        navigator.serviceWorker.register('/sw-workbox.js')
            .then(...);

}

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw-workbox.js')
            .then(...);
    )};
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(() => {

    // Регистрация сервис-воркера

  });

main.ts

Неприятная правда #1

Сервис-воркер не улучшит первый запуск вашего вебсайта
При первом запуске пользователь скачает ресурсы из набора Application Shell дважды
В некоторых случаях сервис-воркер не только не ускорит, но и замедлит повторные открытия

Предварительное кеширование

Знайте ваши ресурсы, следите за чистотой и не прощайте ошибок

Совет #3

Инструментарий сервис-воркера

Service Worker API
Cache API
IndexedDB
Fetch
Clients API
Broadcast Channel API
postMessage
Push API
Notifications API

Local Storage
Session Storage
XMLHttpRequest
DOM

const appShellFilesToCache = [
  ...
  './non-existing.html'
]

sw-handmade.js

self.addEventListener('install', (event) => {

  event.waitUntil(
    caches.open('appshell').then((cache) => {
      return cache.addAll(appShellFilesToCache)
    })
  )

})

Ошибки HTTP
Время работы сервис-воркера
Ошибки хранилищ

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa

if ('storage' in navigator && 'estimate' in navigator.storage) {
  navigator.storage.estimate().then(({usage, quota}) => {
    console.log(`Using ${usage} out of ${quota} bytes.`);
  });
}

Chrome	<6% своб. пространства
Firefox	<10% своб. пространства
Safari	<50MB
IE10	<250MB
Edge	Зависит от размера диска

Объем хранилищ ограничен

const appShellFilesToCache = [
  './styles.css',
  ...
  './styles.css'
]

https://www.chromestatus.com/feature/5622587912617984

Дубликаты ресурсов в addAll()

event.waitUntil(
  caches
    .open('appshell').then(cache => {
      return cache.addAll(['./bad-res.html'])
        .catch(err => {
          console.log(err)

        })
    })
);

Обработка ошибок

event.waitUntil(
  caches
    .open('appshell').then(cache => {
      return cache.addAll(['./bad-res.html'])
        .catch(err => {
          console.log(err)
          throw err
        })
    })
);

Обработка ошибок

Кеширование ресурсов с других адресов

Приготовьтесь

к непрозрачности

Совет #4

* = origins

*

2 варианта

Добавить заголовки CORS на удаленной стороне
Обрабатывать opaque ответы

Ограничения opaque ответов

Свойство status всегда равно нулю и не зависит от того, успешен запрос или нет
Методы Cache API add()/addAll() сработают аварийно, если статус хотя бы одного из ответов не находится в диапазоне 2XX

https://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses/39109790#39109790

const appShellFilesToCache = [
  ...
  'https://workboxjs.org/offline-ga.min.svg'
]

sw-handmade.js

self.addEventListener('install', (event) => {

  event.waitUntil(
    caches.open('appshell').then((cache) => {
      return cache.addAll(appShellFilesToCache)
    })
  )

})

Решение для no-cors

fetch(event.request).then( response => {

  if (response.ok) {
    let copy = response.clone();
    caches.open('runtime').then( cache => {
      cache.put(request, copy);
    });
    return response;
  }

})

https://developers.google.com/web/tools/workbox/guides/handle-third-party-requests

Решение для no-cors

fetch(event.request).then( response => {

  if (response.ok || response.status === 0) {
    let copy = response.clone();
    caches.open('runtime').then( cache => {
      cache.put(request, copy);
    });
    return response;
  }

})

https://developers.google.com/web/tools/workbox/guides/handle-third-party-requests

Проблемы

Мы не знаем, что к нам пришло в качестве ответа, так что есть вероятность закешировать 404, 500 и т.д.
Каждый закешированный ресурс занимает как минимум 7Мб в Cache Storage

Не относитесь к App Shell формально

Помните о пользователях

Совет #5

Обновление вебсайта

v1

v2

v1

v2

На сервере

В браузере

v2

Отслеживание обновления

На самой странице, через статус регистрации сервис-воркера

navigator.serviceWorker.register('sw-handmade.js')
  .then(registration => {
    if (registration.waiting) {
      // Показываем приглашение обновить страницу
    }
  })

В сервис-воркере, после отправив уведомление клиентам через BroadcastChannel API или postMessage

Неприятная правда #2

Архитектура Application Shell идет вразрез с идеей веба про "всегда последней версии"
Мы можем лишь слегка улучшить пользовательский опыт

Я прогрессивное веб-приложение, и я always fresh. Только это уже устаревшая версия. Кликни здесь чтобы обновить

Сервис-воркеру нужно время на запуск

Не тратьте его впустую!

Совет #6

Проблема при "холодном" запуске

https://developers.google.com/web/updates/2017/02/navigation-preload

SW Boot

Запрос навигации

SW Boot

Запрос навигации

Если сервис-воркер выгружен из памяти
Если результат этого запроса не закеширован
Если в сервис-воркере есть событие fetch

addEventListener('activate', event => {
  event.waitUntil(async function() {
    // Feature-detect
    if (self.registration.navigationPreload) {
      // Включаем!
      await self.registration.navigationPreload.enable();
    }
  }());
});

Предзагрузка запроса навигации

addEventListener('fetch', event => {
  event.respondWith(async function() {
    // Лучший вариант: отвечаем из кеша
    const cachedResponse = await caches.match(event.request);
    if (cachedResponse) return cachedResponse;

    // OK вариант: отвечаем результатом предзагрузки
    const response = await event.preloadResponse;
    if (response) return response;

    // Худший вариант: идем в сеть :(
    return fetch(event.request);
  }());
});

Используем ее результат

Правильные инструменты

Доверяй И проверяй

Совет #7

Инструменты помогают

Реализовывать сложные алгоритмы
Перенимать лучшие практики
Фокусироваться на ВАШЕЙ задаче
Следить за обновлениями спецификаций
Обрабатывать пограничные случаи

Фреймворки

sw-precache / sw-toolbox
Workbox
offline-plugin для Webpack
PWABuilder.com

create-react-app
preact-cli
polymer-cli
vue-cli
angular-cli

Генераторы

Lighthouse
Sonarwhal

Аудит

App shell

Динамическое кеширование

Оффлайн GA

Повторение неуспешных запросов

Уведомления об обновлениях

Build-интеграции

Возможность расширять функциональность собственного сервис-воркера

https://workboxjs.org

https://sonarwhal.com

npm install -g sonarwhal

sonarwhal --init

sonarwhal https://airhorner.com

npm install -g lighthouse

lighthouse https://airhorner.com

https://github.com/GoogleChrome/lighthouse

Неприятная правда #3

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

testingjavascript.com

Загрузили страницу ./index.html
А там редирект 301 на ./ и Content-Type: text/plain
Загрузили и закешировали содержимое ./ (text/html), а Content-Type взяли от первого запроса

Обновите Workbox до 3.6.3
Сбросьте кеш явной установкой его имени

workbox.core.setCacheNameDetails({precache: 'new-name'});

Если что-то пошло не так

Нужен kill switch

Совет #8

Разрегистрировать сервис-воркер?
Разместить исправленный сервис-воркер (или no-op)
Удостовериться, что сервис-воркер не берется из кеша HTTP

План спасения

No-op

self.addEventListener('install', () => {
  self.skipWaiting();
});

self.addEventListener('activate', () => {
  self.clients.matchAll({type: 'window'}).then(tabs => {
    tabs.forEach(tab => {
      tab.navigate(tab.url);
    });
  });
});

Крайняя мера для UX

https://stackoverflow.com/questions/33986976/how-can-i-remove-a-buggy-service-worker-or-implement-a-kill-switch

Обновление и обход кеша HTTP

Cache-Control: no-cache

Ресурсы, импортированные через importScripts()