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

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

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

Transcript

1. Service Workers Инструкция по применению Андрей Михайлов Frontend Developer
2. О себе → пять лет в IT
3. О себе → пять лет в IT → три года в Backend-разработке
4. О себе → пять лет в IT → три года в Backend-разработке
5. → пять лет в IT → три года в Backend-разработке → уже два года, как фронтенд-разработчик О себе
6. → пять лет в IT → три года в Backend-разработке → уже два года, как фронтенд-разработчик → год в 2гис О себе
7. О нас
12. PWA
14. Service Worker → Проксирование запросов
15. Service Worker → Проксирование запросов → Работа с кэшем
16. Service Worker → Проксирование запросов → Работа с кэшем → Пуш-уведомления
17. Service Worker → Проксирование запросов → Работа с кэшем → Пуш-уведомления → Фоновая синхронизация
18. Service Worker → Проксирование запросов → Работа с кэшем → Пуш-уведомления → Фоновая синхронизация → Офлайн
19. Website network
20. Website sw.js cache network
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
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()
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/
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