Как хорошо вы знаете Service Worker API? А способы применения его для кэширования данных? В этом рассказе мы постараемся понять, как Service Worker может взаимодействовать с запросами, что и как кэшировать, а также как все это поможет нашим с вами сайтам загружаться значительно быстрее.

1. Старший инженер-разработчик клиентских приложений
Даньшин Артем
Кэширование данных с помощью Service Worker

2. Проблема

3. 3
Очень много инструментов

4. 4
Долго грузятся ресурсы

5. 5
Плохое соединение или его отсутствие

6. Service Worker

7. Немного базы

8. 8
Упрощенная схема работы SW
Сервер Service Worker Клиент

9. 9
Это самый простой подключаемый JS файл
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/offline-service-worker.js');
}

10. 10
Упрощенный жизненный цикл

11. 11
Основан на событиях
this.addEventListener('install', function(event) {
...
});
this.addEventListener('activate', function(event) {
...
});
this.addEventListener('fetch', function(event) {
...
});

12. Статическое кэширование

13. 13
Имеем приложение и его список файлов

14. 14
Цель - сделать оффлайн режим

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

16. 16
Придумываем имя для нашего хранилища
const CACHE_NAME = '0.1.0';
const CACHE_FILES = [
'/offline/index.html',
'/offline/offline.css',
'/offline/vendors.js',
'/offline/offline.js',
'/offline/offline.sprite.svg',
'/offline/fonts/pt_sans-regular.woff2',
'/offline/fonts/pt_serif-regular.woff2'
];

17. 17
Кладем список файлов для кэширования в массив
const CACHE_NAME = '0.1.0';
const CACHE_FILES = [
'/offline/index.html',
'/offline/offline.css',
'/offline/vendors.js',
'/offline/offline.js',
'/offline/offline.sprite.svg',
'/offline/fonts/pt_sans-regular.woff2',
'/offline/fonts/pt_serif-regular.woff2'
];

18. 18
Начинаем слушать событие установки
self.addEventListener('install', function(event) {
event.waitUntil(caches.open(CACHE_NAME).then(function(cache) {
return cache.addAll(CACHE_FILES);
})
)
});

19. 19
Добавляем файлы в Cache API
self.addEventListener(‘install’, function(event) {
event.waitUntil(caches.open(CACHE_NAME).then(function(cache) {
return cache.addAll(CACHE_FILES);
})
)
});

20. 20
Начинаем слушать событие запроса
self.addEventListener('fetch', function(event) {
event.respondWith(finalResponse(event.request));
});
function finalResponse(request) {
const path = new Url(request.url).pathname
const positionFileInCache = CACHE_FILES.indexOf(path);
if (positionFileInCache > -1) {
return caches.match(CACHE_FILES[positionFileInCache]);
}
return fetch(request)
.catch(() => caches.match(CACHE_FILES[0]));
}

21. 21
Выполняем запрос вместо браузера (перехватываем)
self.addEventListener('fetch', function(event) {
event.respondWith(finalResponse(event.request));
});
function finalResponse(request) {
const path = new Url(request.url).pathname
const positionFileInCache = CACHE_FILES.indexOf(path);
if (positionFileInCache > -1) {
return caches.match(CACHE_FILES[positionFileInCache]);
}
return fetch(request)
.catch(() => caches.match(CACHE_FILES[0]));
}

22. 22
Ловим запросы и проверяем их адрес
self.addEventListener('fetch', function(event) {
event.respondWith(finalResponse(event.request));
});
function finalResponse(request) {
const path = new Url(request.url).pathname
const positionFileInCache = CACHE_FILES.indexOf(path);
if (positionFileInCache > -1) {
return caches.match(CACHE_FILES[positionFileInCache]);
}
return fetch(request)
.catch(() => caches.match(CACHE_FILES[0]));
}
Request {…}
bodyUsed: false
credentials: "include"
headers: Headers {}
integrity: ""
method: "GET"
mode: "no-cors"
redirect: "follow"
referrer: "http://localhost:
8080/"
referrerPolicy: "no-referrer-
when-downgrade"
url: "http://localhost:8080/
offline/offline.css"

23. 23
Если совпадает, то отдаем файл из хранилища
self.addEventListener('fetch', function(event) {
event.respondWith(finalResponse(event.request));
});
function finalResponse(request) {
const path = new Url(request.url).pathname
const positionFileInCache = CACHE_FILES.indexOf(path);
if (positionFileInCache > -1) {
return caches.match(CACHE_FILES[positionFileInCache]);
}
return fetch(request)
.catch(() => caches.match(CACHE_FILES[0]));
}

24. 24
Если нет файла - отправляем запрос в интернет
self.addEventListener('fetch', function(event) {
event.respondWith(finalResponse(event.request));
});
function finalResponse(request) {
const path = new Url(request.url).pathname
const positionFileInCache = CACHE_FILES.indexOf(path);
if (positionFileInCache > -1) {
return caches.match(CACHE_FILES[positionFileInCache]);
}
return fetch(request)
.catch(() => caches.match(CACHE_FILES[0]));
}

25. 25
Если нет интернета - отдаем страницу оффлайн режима
self.addEventListener('fetch', function(event) {
event.respondWith(finalResponse(event.request));
});
function finalResponse(request) {
const path = new Url(request.url).pathname
const positionFileInCache = CACHE_FILES.indexOf(path);
if (positionFileInCache > -1) {
return caches.match(CACHE_FILES[positionFileInCache]);
}
return fetch(request)
.catch(() => caches.match(CACHE_FILES[0]));
}

26. 26
Начинаем слушать событие активации
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (CACHE_NAME !== key) {
return caches.delete(key);
}
}));
})
)
});

27. 27
Удаляем старый кэш приложения
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (CACHE_NAME !== key) {
return caches.delete(key);
}
}));
})
)
});

28. 28
Плюсы:
• Простота
• Жесткое кэширование файлов

29. 29
Плюсы:
• Простота
• Жесткое кэширование файлов
Минусы:
• Необходимость вручную менять название хранища

30. 30
Области применения:
• Кэширование наиболее статичных файлов
• Offline режимы сайтов
• Полноценные веб-приложения, с возможностью обновления

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

33. 33
Цель - кэшировать и отдавать часто используемые ресурсы
в обход интернета

34. 34
План действий
• Определяем, какие файлы будем кэшировать
• Ловим запросы, находим совпадения в URL
• Если запрос к нужному нам файлу - обрабатываем его
• Ищем запрос в кэше, если находим - отдаем клиенту
• Если в кэше нет - выполняем запрос
• Полученный ответ отправляем в кэш
• После - отправляем этот ответ клиенту

35. 35
Формируем массив файлов для кэширования
const CACHE_FILES = [
'desktop.css',
'desktop.js',
'vendors.js',
'sprite.svg',
'pt_sans-bold.woff',
'pt_sans-regular.woff',
'pt_sans-caption-regular.woff',
'pt_sans-caption-bold.woff',
'pt_serif-bold.woff',
'pt_serif-italic.woff',
'pt_serif-regular.woff'
];

36. 36
Начинаем слушать событие запроса
self.addEventListener('fetch', function(event) {
const request = event.request;
const fileName = request.url.split('/').pop().split('#')[0].split('?')[0];
const fileNameWithoutHash = fileName.substring(fileName.indexOf('.') + 1);
if (CACHE_FILES.includes(fileNameWithoutHash)) {
event.respondWith(finalResponse(fileNameWithoutHash, request));
}
});

37. 37
Находим название нашего файла без hash’а
self.addEventListener('fetch', function(event) {
const request = event.request;
const fileName = getFileNameWithoutHash(request.url);
if (CACHE_FILES.includes(fileName)) {
event.respondWith(finalResponse(fileNameWithoutHash, request));
}
});

38. 38
Ищем его в массиве файлов
self.addEventListener('fetch', function(event) {
const request = event.request;
const fileName = getFileNameWithoutHash(request.url);
if (CACHE_FILES.includes(fileName)) {
event.respondWith(finalResponse(fileNameWithoutHash, request));
}
});

39. 39
Начинаем обрабатывать запрос
self.addEventListener('fetch', function(event) {
const request = event.request;
const fileName = getFileNameWithoutHash(request.url);
if (CACHE_FILES.includes(fileName)) {
event.respondWith(finalResponse(fileNameWithoutHash, request));
}
});

40. 40
Пробуем взять файл из кэша
function finalResponse(fileName, request) {
return fromCache(fileName, request)
.catch(() => fromInternetAndCache(fileName, request));
}
function fromCache(cacheName, request) {
return caches.open(cacheName)
.then(cache => {
return cache.match(request)
.then(response => {
if (response) return response;
return Promise.reject();
});
});
}

41. 41
Открываем хранилище
function finalResponse(fileName, request) {
return fromCache(fileName, request)
.catch(() => fromInternetAndCache(fileName, request));
}
function fromCache(cacheName, request) {
return caches.open(cacheName)
.then(cache => {
return cache.match(request)
.then(response => {
if (response) return response;
return Promise.reject();
});
});
}

42. 42
Ищем запрос в хранилище
function finalResponse(fileName, request) {
return fromCache(fileName, request)
.catch(() => fromInternetAndCache(fileName, request));
}
function fromCache(cacheName, request) {
return caches.open(cacheName)
.then(cache => {
return cache.match(request)
.then(response => {
if (response) return response;
return Promise.reject();
});
});
}

43. 43
Возвращаем ответ из кэша или оповещаем об отсутствии запроса
function finalResponse(fileName, request) {
return fromCache(fileName, request)
.catch(() => fromInternetAndCache(fileName, request));
}
function fromCache(cacheName, request) {
return caches.open(cacheName)
.then(cache => {
return cache.match(request)
.then(response => {
if (response) return response;
return Promise.reject();
});
});
}

44. 44
При отсутствии запроса в кэше идем в интернет
function finalResponse(fileName, request) {
return fromCache(fileName, request)
.catch(() => fromInternetAndCache(fileName, request));
}
function fromInternetAndCache(cacheName, request) {
return fetch(request)
.then(response => {
if (response.ok) {
const copyResponse = response.clone();
return cacheFile(cacheName, request, copyResponse)
.then(() => response);
}
return response;
});
}

45. 45
Выполняем запрос
function finalResponse(fileName, request) {
return fromCache(fileName, request)
.catch(() => fromInternetAndCache(fileName, request));
}
function fromInternetAndCache(cacheName, request) {
return fetch(request)
.then(response => {
if (response.ok) {
const copyResponse = response.clone();
return cacheFile(cacheName, request, copyResponse)
.then(() => response);
}
return response;
});
}

46. 46
Если запрос прошел успешно - делаем дубликат ответа
function finalResponse(fileName, request) {
return fromCache(fileName, request)
.catch(() => fromInternetAndCache(fileName, request));
}
function fromInternetAndCache(cacheName, request) {
return fetch(request)
.then(response => {
if (response.ok) {
const copyResponse = response.clone();
return cacheFile(cacheName, request, copyResponse)
.then(() => response);
}
return response;
});
}

47. 47
Кэшируем полученный ответ
function finalResponse(fileName, request) {
return fromCache(fileName, request)
.catch(() => fromInternetAndCache(fileName, request));
}
function fromInternetAndCache(cacheName, request) {
return fetch(request)
.then(response => {
if (response.ok) {
const copyResponse = response.clone();
return cacheFile(cacheName, request, copyResponse)
.then(() => response);
}
return response;
});
}

48. 48
Удаляем старое хранилище/запрос
function fromInternetAndCache(cacheName, request) {
return fetch(request)
.then(response => {
if (response.ok) {
const copyResponse = response.clone();
return cacheFile(cacheName, request, copyResponse)
.then(() => response);
}
return response;
});
}
function cacheFile(cacheName, request, response) {
return caches.delete(cacheName)
.then(() => caches.open(cacheName))
.then(cache => cache.add(request, response));
}

49. 49
Создаем новое хранилище
function fromInternetAndCache(cacheName, request) {
return fetch(request)
.then(response => {
if (response.ok) {
const copyResponse = response.clone();
return cacheFile(cacheName, request, copyResponse)
.then(() => response);
}
return response;
});
}
function cacheFile(cacheName, request, response) {
return caches.delete(cacheName)
.then(() => caches.open(cacheName))
.then(cache => cache.add(request, response));
}

50. 50
Добавляем запрос и ответ в кэш
function fromInternetAndCache(cacheName, request) {
return fetch(request)
.then(response => {
if (response.ok) {
const copyResponse = response.clone();
return cacheFile(cacheName, request, copyResponse)
.then(() => response);
}
return response;
});
}
function cacheFile(cacheName, request, response) {
return caches.delete(cacheName)
.then(() => caches.open(cacheName))
.then(cache => cache.add(request, response));
}

51. 51
Отдаем пользователю ответ
function finalResponse(fileName, request) {
return fromCache(fileName, request)
.catch(() => fromInternetAndCache(fileName, request));
}
function fromInternetAndCache(cacheName, request) {
return fetch(request)
.then(response => {
if (response.ok) {
const copyResponse = response.clone();
return cacheFile(cacheName, request, copyResponse)
.then(() => response);
}
return response;
});
}

52. 52
При обновлении Service Worker’а
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(caches.delete));
})
);
});

53. В итоге

54. 54
Файлы лежат в кэше

55. Плюсы
• Гибкое кэширование множества файлов

56. 56
Плюсы
• Гибкое кэширование множества файлов
Минусы
• Достаточно сложная реализация
• Ответственность

57. 57
Область применения
• Гибкое кэширование ресурсов
• Гибкое кэширование запросов

58. Инструменты

59. 59
Инструменты для работы с Service Worker API
• - https://workboxjs.org/
• sw-precache -https://github.com/GoogleChromeLabs/sw-precache
• sw-toolbox -https://googlechromelabs.github.io/sw-toolbox/
• Webpack offline-plugin -https://github.com/NekR/offline-plugin

60. Нюансы

61. 61
Требования и поддержка
• Забудьте об IE и Safari, Android 5.0 <
• Самая нижняя планка - Chrome 45(Сентябрь 2015)
• В результате: меньше размер кода, меньше костылей

62. 62
Фильтрация запросов внутри события fetch
Проблема: SW ловит запросы ко всем сайтам
В результате:
• Может ошибочно выдать файл из хранилища
• Засоряет вкладу Network в Dev Tools

63. 63
Создание черных и белых листов доменов
Whitelist - домены, запросы к которым SW будет обрабатывать
Blacklist - ограничение для поддоменов
const HOST_WHITELIST = [
"localhost",
"lenta.ru"
];
const HOST_BLACKLIST = [
"api",
"icdn"
];
function isSWRequest(url) {
const checkWhiteHost = HOST_WHITELIST.find(function(host) {
return url.host.indexOf(host) > -1;
});
const checkBlackHost = HOST_BLACKLIST.find(function(host) {
return url.host.indexOf(host) > -1;
});
return checkWhiteHost && !checkBlackHost;
}

64. Примеры

65. 65
Lenta.ru (https://m.lenta.ru)

66. 66
Financial Times (https://app.ft.com)

67. 67
Smashing Magazine (https://www.smashingmagazine.com/)

68. Выводы

69. 69
Service Worker…
• Мощный инструмент
• Достаточно простой
• Помогает стать ближе к уровню приложений

70. 70
Полезные ссылки по теме:
• The offline cookbook - Jace Archibald -https://jakearchibald.com/2014/offline-cookbook/
• Репозиторий со ссылками на множество материалов по PWA - https://github.com/hemanth/
awesome-pwa
• Множество разборов кейсов использования Service Worker API - https://serviceworke.rs/
• Перевод статьи Making A Service Worker: A Case Study на Прогрессоре - http://prgssr.ru/
development/sozdaem-service-worker.html

71. 71
Ссылки на материалы:
• https://goo.gl/AgZx6f - Код статического метода кэширования
• https://goo.gl/JJoeom - Код динамического метода кэширования
• https://yadi.sk/d/w4IOFx233P7hPc - ссылка на презентацию

72. Даньшин Артем
Старший инженер-разработчик клиентских приложений
Контакты:
Github: https://github.com/ArtDanshin
В контакте: https://vk.com/artdanshin
Спасибо за внимание