Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PWA Roadshow Korea - Service Worker

1,071 views

Published on

PWA Roadshow 2017 Korea - Service Worker talk slide deck

Published in: Technology
  • Be the first to comment

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

×