This document discusses Service Workers and Progressive Web Apps (PWAs). It begins by introducing Service Workers and their benefits for creating instant and offline experiences. It then defines PWAs and discusses their key technologies like Manifest, Service Workers, and Push Notifications. Several real-world examples of popular PWAs are provided. Common Service Worker patterns and use cases are explained, such as precaching, caching on user demand, cache migration, and using Service Workers with Push Notifications. The document encourages developers to help build fast and reliable web experiences using these new web platform technologies.

1. Service Worker
Instant and Offline Experiences
빠르고 안정적인 웹

2. 삼성전자, 송정기
Service Worker editor
Chromium contributor
jungkee.song@samsung.com
GitHub/Twitter: @jungkees

3. Progressive Web App

4. 그 시작
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

5. 정의
https://developers.google.com/web/progressive-web-apps/

6. Source: Wikipedia
정의

7. Mobile website 의 장단점
• 장점
• URL! - 빠른 배포, 연결성
• 보유 컨텐츠/서비스를 모바일 기기에 빠르게 배포
• 표준 기반으로 다양한/폭넓은 기기 지원
• 단점
• Native 대비 떨어지는 UX
• 성능
• 기능들
Manifest + Service Worker + Push
Service Worker + AMP + Rendering optimization efforts
Extending web platform continued

8. https://whatwebcando.today/

9. In the wild

10. https://developers.google.com/web/showcase/2016/pdfs/flipkart.pdf
Case study: Flipkart

11. Case study: Washingtonpost PWA
“In our public-facing beta of the PWA web app, we’ve seen about
5x engagement – page views per visit, number of stories read,”
Washington Post’s head of product tells Beet.TV in this video
interview.
Source: http://www.beet.tv/2016/09/wapopwamarburger.html

12. http://www.slideshare.net/julianmartinez2/building-selio-a-local-market-progressive-web-app
Case study: Selio

13. https://www.flipkart.com/

14. podle.audio

15. wego.com

16. twitter.com

17. PWA를 구성하는 표준 기술

18. Service Worker
TOTAL. GAME. CHANGER.

19. Reliability (a.k.a Offline-first and more)
Service Worker가 해결하는 문제

20. Your programable proxy
Doc
Browser
Service Worker
Cache
NetloaderandHTTPcache

21. 1
Background service
Service Worker가 해결하는 문제

22. Is Service Worker Ready?
https://jakearchibald.github.io/isserviceworkerready/

23. Progressive enhancement 그대로!
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js')
.then(function(reg) {
// registration succeeded!
});
}

24. fetch event
Navigation/Resource request
onfetch
Doc
SW
Cache
Attempt to match cache
Matched Response
Respond to client
Doc Doc
Event-based Worker

25. Dedicated worker
Run job.js
t
* Lifetime is bound to the document
unless .terminate is called.
Lifetime bound to their parent
Lifetime of Dedicated Worker
new Worker(‘job.js’)

26. Run sw.js
Browser internal
t
Service worker
Term
inate
Start
onfetch
e.waitUntil()
push
Term
inate
Start
onpush
e.waitUntil()
fetch
Lifetime of Service Workers
Intentionally short lifetime
<img src=‘pic.png’>

27. Service Worker 활용을 위한 주요 개념
• Install: Register - Update - Unregister
• Client matching - Navigation 포함 메인 리소스 fetch 시 service worker 결정
• Functional event handling
• fetch, push, notificationclick, sync, etc.
• Caching
• Pre-cache - oninstall 이벤트 처리
• Dynamic-cache - onfetch에서 활용
• Serve on HTTPS
• Fetch API 와 Streams API 를 주목하자

28. Register - Update - Unregister
Service Worker Lifecycle
navigator.serviceWorker.register(‘sw.js’, { scope: ‘./‘ });
self.addEventListener('install', e => {
// Cache static resources
});
Registration - scope: ‘./‘
installing waiting active
self.addEventListener('activate', e => {
// Delete cache, etc.
});
self.addEventListener('fetch', e => {
// respondWith cached resource, etc.
});
self.addEventListener('push', e => {
// showNotification etc.
});
Wait until
- No client uses active worker
- skipWaiting() was called
install
fetch
push
activate

29. Register - Update - Unregister
Service Worker Lifecycle
self.addEventListener('install', e => {
// Cache static resources
});
Registration - scope: ‘./‘
installing waiting active
self.addEventListener('activate', e => {
// Delete cache, etc.
});
self.addEventListener('fetch', e => {
// respondWith cached resource, etc.
});
Wait until
- No client uses active worker
- skipWaiting() was called
install
fetch
activate
registration.update();

30. Register - Update - Unregister
Service Worker Lifecycle
Registration - scope: ‘./‘
installing waiting active
Wait until
- No client uses active worker
- No service worker is serving events
registration.unregister();
unregister flag

31. “/bar” /bar/sw1.js
[ Registration map ]
Scope Script URL
“/foo” /foo/sw.jsFrom page
var sw = navigator.serviceWorker;
① sw.register('/bar/sw1.js', { scope: '/bar' });
② sw.register('/foo/sw.js', { scope: '/foo' });
③ sw.register('/bar/sw2.js', { scope: '/bar' } );
Registrations
“/bar” /bar/sw2.js

32. onfetch
sw.js
Cache
Attempt to match cache
Matched response
Respond to client
“/” /sw.js
[ Registration map ]
Scope Script URL
“/foo” /foo/sw.js
Doc
Navigate https://example.com/index.html
fetch event
Scope matching
Run SW
Client matching
Navigation / Worker client creation

33. onfetch
sw.js
Cache
Attempt to match cache
Matched response
Respond to client
“/” /sw.js
[ Registration map ]
Scope Script URL
“/img” /img/sw.js
Doc
Fetch “https://example.com/img/flower.png
fetch event
Control
Run SW
Subresource requests
메인 리소스 내부에서 발생하는 서비 리소스에 대한 fetch 요청들

34. https://jakearchibald.com/2014/offline-cookbook/#on-install-as-a-dependency
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('mysite-static-v3').then(function(cache) {
return cache.addAll([
'/css/whatever-v3.css',
'/css/imgs/sprites-v6.png',
'/css/fonts/whatever-v8.woff',
'/js/all-min-v4.js'
// etc
]);
})
);
});
Service Worker 사용 패턴
Precache: Cache of static resources in oninstall

35. Service Worker 활용 사례 데모
https://wiki-offline.jakearchibald.com/

36. document.querySelector('.cache-article').addEventListener('click', function(event) {
event.preventDefault();
var id = this.dataset.articleId;
caches.open('mysite-article-' + id).then(function(cache) {
fetch('/get-article-urls?id=' + id).then(function(response) {
// /get-article-urls returns a JSON-encoded array of
// resource URLs that a given article depends on
return response.json();
}).then(function(urls) {
cache.addAll(urls);
});
});
});
https://jakearchibald.com/2014/offline-cookbook/#on-user-interaction
Service Worker 사용 패턴
Cache on user demand

37. https://jakearchibald.com/2014/offline-cookbook/#on-network-response
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open('mysite-dynamic').then(function(cache) {
return cache.match(event.request).then(function (response) {
return response || fetch(event.request).then(function(response) {
cache.put(event.request, response.clone());
return response;
});
});
})
);
});
Service Worker 사용 패턴
Offline-first: Cache of dynamic resources

38. https://jakearchibald.com/2014/offline-cookbook/#on-activate
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
// Return true if you want to remove this cache,
// but remember that caches are shared across
// the whole origin
}).map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});
Service Worker 사용 패턴
Cache migration in onactivate

39. https://jakearchibald.com/2014/offline-cookbook/#on-push-message
self.addEventListener('push', function(event) {
if (event.data.text() == 'new-email') {
event.waitUntil(
caches.open('mysite-dynamic').then(function(cache) {
return fetch('/inbox.json').then(function(response) {
cache.put('/inbox.json', response.clone());
return response.json();
});
}).then(function(emails) {
registration.showNotification("New email", {
body: "From " + emails[0].from.name
tag: "new-email"
});
})
);
}
});
self.addEventListener('notificationclick', function(event) {
if (event.notification.tag == 'new-email') {
// Assume that all of the resources needed to render
// /inbox/ have previously been cached, e.g. as part
// of the install handler.
clients.openWindow(‘/inbox/');
}
});
Service Worker 사용 패턴
onpush

40. https://jakearchibald.com/2014/offline-cookbook/
패턴 Offline Cookbook

41. pwa.rocks

42. 개발자 여러분,
서비스워커는 준비되어 있습니다.
빠르고 안정적인 웹을 함께 만들어 주세요!
Progressive Web App Roadshow 2017 Korea