Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CodeFest 2018. Андрей Михайлов (2ГИС) — Service Workers. Стратегии применения

CodeFest 2018. Андрей Михайлов (2ГИС) — Service Workers. Стратегии применения

Посмотрите выступление Андрея: https://2018.codefest.ru/lecture/1280/

Количество выходов в интернет с мобильных устройств ежегодно растёт на 2-4% в год. Качество связи не успевает за такими темпами. Как итог, даже самое лучшее веб-приложение обеспечит ужасный опыт, если пользователь не сможет его загрузить. Проблема в том, что до сих пор нет хорошего механизма управления кэшем ресурсов и результатов сетевых запросов.

16b6c87229eaf58768d25ed7b2bbbf52?s=128

CodeFest

April 05, 2018
Tweet

More Decks by CodeFest

Other Decks in Programming

Transcript

  1. Service Workers Инструкция по применению Андрей Михайлов Frontend Developer

  2. О себе → пять лет в IT

  3. О себе → пять лет в IT → три года

    в Backend-разработке
  4. О себе → пять лет в IT → три года

    в Backend-разработке
  5. → пять лет в IT → три года в Backend-разработке

    → уже два года, как фронтенд-разработчик О себе
  6. → пять лет в IT → три года в Backend-разработке

    → уже два года, как фронтенд-разработчик → год в 2гис О себе
  7. О нас

  8. None
  9. None
  10. None
  11. None
  12. PWA

  13. None
  14. Service Worker → Проксирование запросов

  15. Service Worker → Проксирование запросов → Работа с кэшем

  16. Service Worker → Проксирование запросов → Работа с кэшем →

    Пуш-уведомления
  17. Service Worker → Проксирование запросов → Работа с кэшем →

    Пуш-уведомления → Фоновая синхронизация
  18. Service Worker → Проксирование запросов → Работа с кэшем →

    Пуш-уведомления → Фоновая синхронизация → Офлайн
  19. Website network

  20. Website sw.js cache network

  21. None
  22. Установка SW

  23. It’s Coding Time // Проверяем поддержку SW в браузере if

    ('serviceWorker' in navigator) { // Регистрируем, если есть поддержка navigator.serviceWorker.register('/sw.js') .then(function () { // SW установлен }) .catch(function () { // ¯\_(ツ)_/¯ }) }
  24. Scope и расположение navigator.serviceWorker.register('/sw.js', { scope: '/static/' }) navigator.serviceWorker.register('./static/sw.js')

  25. /assets /img

  26. MAX SCOPE IS LOCATION /assets /img

  27. scope: /assets/img /assets/img/bg.png /assets/styles/main.css

  28. Lifecycle

  29. None
  30. Обновление SW

  31. скачивание Старый воркер !== Новый воркер

  32. скачивание install Старый воркер !== Новый воркер контроль waiting

  33. скачивание install Close page Старый воркер !== Новый воркер контроль

    waiting redundant контроль activating
  34. SW Events fetch sync push install activate message

  35. Что внутри sw.js self.addEventListener('install', event => { console.log('install', event); });

    self.addEventListener('activate', event => { console.log('activate', event); }); self.addEventListener('fetch', event => { console.log('fetch', event); });
  36. Пример sw.js self.addEventListener('install', event => { // Код будет работать

    ниже до тех пор, пока не вернётся Promise. event.waitUntil( caches.open('static-assets-' + VERSION) // Добавляем в кэш ресурсы, которые надо закэшировать в начале .then(cache => cache.addAll(baseAssetsList)) // Переходим к стадии активации. .then(() => self.skipWaiting()); ); });
  37. Пример sw.js self.addEventListener('activate', event => { // Активируем SW в

    контексте страницы и сразу включаем его. event.waitUntil(self.clients.claim()); });
  38. Пример sw.js self.addEventListener('fetch', event => { // Прерываем стандартный fetch

    event.respondWith( // Ищем запрос в нашем кэше... caches.match(event.request).then((response) => { // Если он есть - отдаем, иначе - запускаем fetch. return response || fetch(event.request); }); ); });
  39. SW Fetch

  40. SW Fetch fetch cache.add()

  41. SW Fetch event.respondWith()

  42. None
  43. None
  44. Service Worker Tools → Offline-Plugin → SW-Precache → Workbox

  45. Стратегии кэширования

  46. → preferer cache → cache only → offline only →

    network only → race/fastest cache
  47. Фоновая синхронизация

  48. Фоновая синхронизация this.addEventListener('someEvent', () => { navigator.serviceWorker.ready .then(reg => {

    // Успех! reg.sync.register('getTopNews'); }) .catch(e => { // ¯\_(ツ)_/¯ }); });
  49. Фоновая синхронизация this.addEventListener('sync', event => { switch(event.tag) { case 'getImage':

    getImage(); break; case 'getTopNews': getTopNews(); break; default: // nothing } })
  50. Фоновая синхронизация function getTopNews() { // Код будет работать ниже

    до тех пор, пока не вернётся Promise. event.waitUntil(() = > { // some Code }); }
  51. Push-уведомления

  52. Упрощаем работу с npm https://tproger.ru/translations/npm-tricks/ Push-уведомления

  53. Что-то не так с профилем! https://2018.codefest.ru/members/ Упрощаем работу с npm

    https://tproger.ru/translations/npm-tricks/ Push-уведомления
  54. Push-уведомления Bloomberg сообщил о... https://meduza.io/news/2018 Что-то не так с профилем!

    https://2018.codefest.ru/members/ Упрощаем работу с npm https://tproger.ru/translations/npm-tricks/
  55. Push-уведомления New Match! Let’s check it! https://tinder.com/newMatch Bloomberg сообщил о...

    https://meduza.io/news/2018 Что-то не так с профилем! https://2018.codefest.ru/members/ Упрощаем работу с npm https://tproger.ru/translations/npm-tricks/
  56. Push-уведомления New Match! Let’s check it! https://tinder.com/newMatch Bloomberg сообщил о...

    https://meduza.io/news/2018 Что-то не так с профилем! https://2018.codefest.ru/members/ Упрощаем работу с npm https://tproger.ru/translations/npm-tricks/ У вас 23 непрочитанных твита https://twitter.com/
  57. None
  58. А какие минусы? - нет доступа к DOM - https

    (localhost)
  59. А что с поддержкой?

  60. А что с поддержкой? 40 27 44 11.1

  61. Web app Native app

  62. Онлайн по умолчанию Web app Native app

  63. Офлайн по умолчанию Web app Native app Онлайн по умолчанию

  64. Офлайн по умолчанию Онлайн по умолчанию Доступность через веб Web

    app Native app
  65. Офлайн по умолчанию Установка через App Store Онлайн по умолчанию

    Доступность через веб Web app Native app
  66. Офлайн по умолчанию Установка через App Store Offline-first по умолчанию

    Доступность через Интернет Web app + SW Native app
  67. Зачем такие сложности?

  68. Зачем такие сложности? Browser Cache

  69. Зачем такие сложности? Browser Cache TTFB?

  70. Как считается TTFB? HTTP request time Process request time Receive

    response time
  71. Request sent Waiting (TTFB) Content Download 2.05 s 0.17 ms

    2.95 s Service Worker уменьшает TTFB
  72. Service Worker уменьшает TTFB Request to SW Waiting (TTFB) Content

    Download 0.10 ms 18.35 ms 81.98 ms
  73. «Effectively, we can skip compiling from scratch and execute app

    code much sooner. This means users can interact with your UI sooner than they otherwise would have if you were strictly relying on HTTP caching.» Addy Osmani
  74. We make WEB great again

  75. Всё еще думаете?

  76. Всё еще думаете? Application => Service Workers => SW from

    other domains
  77. Андрей Михайлов Frontend Developer Вопросы? m7v.github.com a.mikhailov@2gis.ru @andrewmikhailov