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

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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. О нас
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. PWA
    

    View Slide

13. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. Website network
    

    View Slide

20. Website sw.js
    cache
    network
    

    View Slide

21. View Slide

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

    View Slide

23. It’s Coding Time
    // Проверяем поддержку SW в браузере
    if ('serviceWorker' in navigator) {
    // Регистрируем, если есть поддержка
    navigator.serviceWorker.register('/sw.js')
    .then(function () {
    // SW установлен
    })
    .catch(function () {
    // ¯\_(ツ)_/¯
    })
    }
    

    View Slide

24. Scope и расположение
    navigator.serviceWorker.register('/sw.js', { scope: '/static/' })
    navigator.serviceWorker.register('./static/sw.js')
    

    View Slide

25. /assets
    /img
    

    View Slide

26. MAX SCOPE IS LOCATION
    /assets
    /img
    

    View Slide

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

    View Slide

28. Lifecycle
    

    View Slide

29. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. SW Events
    fetch
    sync
    push
    install
    activate
    message
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. Пример sw.js
    self.addEventListener('fetch', event => {
    // Прерываем стандартный fetch
    event.respondWith(
    // Ищем запрос в нашем кэше...
    caches.match(event.request).then((response) => {
    // Если он есть - отдаем, иначе - запускаем fetch.
    return response || fetch(event.request);
    });
    );
    });
    

    View Slide

39. SW Fetch
    

    View Slide

40. SW Fetch
    fetch
    cache.add()
    

    View Slide

41. SW Fetch
    event.respondWith()
    

    View Slide

42. View Slide

43. View Slide

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

    View Slide

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

    View Slide

46. → preferer cache
    → cache only
    → offline only
    → network only
    → race/fastest
    cache
    

    View Slide

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

    View Slide

48. Фоновая синхронизация
    this.addEventListener('someEvent', () => {
    navigator.serviceWorker.ready
    .then(reg => {
    // Успех!
    reg.sync.register('getTopNews');
    })
    .catch(e => {
    // ¯\_(ツ)_/¯
    });
    });
    

    View Slide

49. Фоновая синхронизация
    this.addEventListener('sync', event => {
    switch(event.tag) {
    case 'getImage':
    getImage();
    break;
    case 'getTopNews':
    getTopNews();
    break;
    default:
    // nothing
    }
    })
    

    View Slide

50. Фоновая синхронизация
    function getTopNews() {
    // Код будет работать ниже до тех пор, пока не вернётся Promise.
    event.waitUntil(() = > {
    // some Code
    });
    }
    

    View Slide

51. Push-уведомления
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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/
    

    View Slide

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/
    

    View Slide

57. View Slide

58. А какие минусы?
    - нет доступа к DOM
    - https (localhost)
    

    View Slide

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

    View Slide

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

    View Slide

61. Web app Native app
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

67. Зачем такие сложности?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

71. Request sent
    Waiting (TTFB)
    Content Download
    2.05 s
    0.17 ms
    2.95 s
    Service Worker уменьшает TTFB
    

    View Slide

72. Service Worker уменьшает TTFB
    Request to SW
    Waiting (TTFB)
    Content Download
    0.10 ms
    18.35 ms
    81.98 ms
    

    View Slide

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
    

    View Slide

74. We make WEB great again
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide