Service Workers лежат в основе комплекса технологий PWA. Поговорим коротко о преимуществах самих PWA, процессе регистрации воркера и стратегиях кеширования.

1. Service Worker и Вы
Пора регистрировать
Андрей Липатцев
КИБ+РИФ, апрель 2017

2. vs.
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
13% 87%
Моб. Веб Приложения

3. 80%ВРЕМЕНИ
в
3 ПРИЛОЖЕНИЯХSource: comScore Mobile Metrix, U.S., Age 18+, June 2015

4. НОЛЬВ СРЕДНЕМ НОВЫХ
ПРИЛОЖЕНИЙ
В МЕСЯЦ
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

5. Функционал
Охват

6. Функционал
Охват

7. – это забота о пользователе на
совершенно новом уровне
Progressive Web Apps

8. Надёжным
Опыт должен быть...

9. Reliability means never showing
the offline dinosaur

10. Надёжным Быстрым
Опыт должен быть...

11. of users abandon sites that take
longer than 3 seconds to load53%

12. Надёжным Быстрым Глубоким
Опыт должен быть...

13. Полный
экран, тема,
ориентация
и т.д.
Пуш-
уведомления
Погружение Уведомления
Глубина
Добавление
на главный
экран
Экран

14. Надёжные Быстрые Глубокие
Progressive Web Apps –

15. С чего начать?

16. Безопасность

17. Service Worker

18. Service Workers – прокси на клиенте
Service worker
(на Javascript)
Кэш
Веб-сервер

19. Жизнь Service Worker
• Страница как приложение
• Просыпается по команде OS
• Только системные события
Activated Error
Idle
Active Terminated
Install
Register

20. Service Worker
для ВТОРОГО захода

21. Создание простого Service Worker

22. Регистрация Service Worker
Activated Error
Idle
Active Terminated
Install
Register

23. Регистрация Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

24. Регистрация Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

25. Добавить Event Handler для установки
Activated Error
Idle
Active Terminated
Install
Register

26. Pre-fetch ресурсов приложения
var cacheName = 'app-shell-cache-v1';
var filesToCache = ['/', '/index.html', ...];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
}).then(function() {
return self.skipWaiting();
})
);
});

27. Pre-fetch ресурсов приложения
var cacheName = 'app-shell-cache-v1';
var filesToCache = ['/', '/index.html', ...];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
}).then(function() {
return self.skipWaiting();
})
);
});

28. Pre-fetch ресурсов приложения
var cacheName = 'app-shell-cache-v1';
var filesToCache = ['/', '/index.html', ...];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
}).then(function() {
return self.skipWaiting();
})
);
});

29. Добавить Event Handler для активации
Activated Error
Idle
Active Terminated
Install
Register

30. Добавить Event Handler для activate
self.addEventListener('activate', function(e) {
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName) {
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});

31. Почти готово...
Activated Error
Idle
Active Terminated
Install
Register

33. Добавить Event Handler для fetch
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

34. Добавить Event Handler для fetch
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

35. Добавить Event Handler для fetch
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

36. Добавить Event Handler для fetch
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

37. Ready to Go!
Activated Error
Idle
Active Terminated
Install
Register

38. Scope
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

39. Scope
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/scripts/s-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

40. Стратегии кэширования
сеть контролируешь ТЫ

41. Сначала Кэш, потом Сеть

42. Сначала Сеть, потом Кэш

43. Кэш и Сеть

44. Фол-бэк на Кэш

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

46. Service Workers
обеспечивают работу
Progressive Web Apps

48. https://developers.google.com/web/progressive-web-apps/
https://codelabs.developers.google.com/?cat=Web
https://jakearchibald.com/2014/offline-cookbook/

49. Айда
кодить!
мяу!