Successfully reported this slideshow.
Your SlideShare is downloading. ×

PWA Roadshow Korea - Service Worker

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
PWA Roadshow Seoul - Keynote
PWA Roadshow Seoul - Keynote
Loading in …3
×

Check these out next

1 of 42 Ad

More Related Content

Slideshows for you (20)

Similar to PWA Roadshow Korea - Service Worker (20)

Advertisement

Recently uploaded (20)

Advertisement

PWA Roadshow Korea - Service Worker

  1. 1. Service Worker Instant and Offline Experiences 빠르고 안정적인 웹
  2. 2. 삼성전자, 송정기 Service Worker editor Chromium contributor jungkee.song@samsung.com GitHub/Twitter: @jungkees
  3. 3. Progressive Web App
  4. 4. 그 시작 https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
  5. 5. 정의 https://developers.google.com/web/progressive-web-apps/
  6. 6. Source: Wikipedia 정의
  7. 7. Mobile website 의 장단점 • 장점 • URL! - 빠른 배포, 연결성 • 보유 컨텐츠/서비스를 모바일 기기에 빠르게 배포 • 표준 기반으로 다양한/폭넓은 기기 지원 • 단점 • Native 대비 떨어지는 UX • 성능 • 기능들 Manifest + Service Worker + Push Service Worker + AMP + Rendering optimization efforts Extending web platform continued
  8. 8. https://whatwebcando.today/
  9. 9. In the wild
  10. 10. https://developers.google.com/web/showcase/2016/pdfs/flipkart.pdf Case study: Flipkart
  11. 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. 12. http://www.slideshare.net/julianmartinez2/building-selio-a-local-market-progressive-web-app Case study: Selio
  13. 13. https://www.flipkart.com/
  14. 14. podle.audio
  15. 15. wego.com
  16. 16. twitter.com
  17. 17. PWA를 구성하는 표준 기술
  18. 18. Service Worker TOTAL. GAME. CHANGER.
  19. 19. Reliability (a.k.a Offline-first and more) Service Worker가 해결하는 문제
  20. 20. Your programable proxy Doc Browser Service Worker Cache NetloaderandHTTPcache
  21. 21. 1 Background service Service Worker가 해결하는 문제
  22. 22. Is Service Worker Ready? https://jakearchibald.github.io/isserviceworkerready/
  23. 23. Progressive enhancement 그대로! if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js') .then(function(reg) { // registration succeeded! }); }
  24. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 35. Service Worker 활용 사례 데모 https://wiki-offline.jakearchibald.com/
  36. 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. 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. 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. 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. 40. https://jakearchibald.com/2014/offline-cookbook/ 패턴 Offline Cookbook
  41. 41. pwa.rocks
  42. 42. 개발자 여러분, 서비스워커는 준비되어 있습니다. 빠르고 안정적인 웹을 함께 만들어 주세요! Progressive Web App Roadshow 2017 Korea

×