O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Instant and offline apps with Service Worker

633 visualizações

Publicada em

2 parts of talking at Google Developer Summit 2016 Seoul
- How to optimize loading performance your web app
- Introducing to Service Worker & Offline 101

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Instant and offline apps with Service Worker

  1. 1. Instant and Offline Apps with Service Worker
  2. 2. Proprietary + Confidential Changwook Doh @cwdoh SKPlanet
  3. 3. Instant Loading
  4. 4. Done.
  5. 5. Proprietary + Confidential End
  6. 6. Instant Loading*
  7. 7. Asset delivery …fast
  8. 8. “Every step you make a user perform before they get value out of your app will cost you 20% of users” http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
  9. 9. Performance = Money
  10. 10. Goals
  11. 11. Goals 1. Don’t be big
  12. 12. Goals 1. Don’t be big 2. Only download what you need
  13. 13. Goals 1. Don’t be big 2. Only download what you need 3. Only download what changed
  14. 14. Best Practices
  15. 15. ! Compression ! Smaller images ○ Multi-sized images ○ Multi-format images ! Reduce Round Trips ○ Redirects ○ Preconnect/Prefetch ! Be interactive ○ async/defer scripts ○ Lazy-load CSS ○ Regioning CSS ○ Defer iFrames ! Good caching ○ Cache forever or not at all ○ Hash in names ! CDNs ! HTTP/2
  16. 16. Compression
  17. 17. goo.gl/hPLUqB Library Size Compressed size Compression ratio jquery-1.11.0.js 276 KB 82 KB 70% jquery-1.11.0.min.js 94 KB 33 KB 65% angular-1.2.15.js 729 KB 182 KB 75% angular-1.2.15.min.js 101 KB 37 KB 63% bootstrap-3.1.1.css 118 KB 18 KB 85% bootstrap-3.1.1.min.css 98 KB 17 KB 83% minification & gzip
  18. 18. goo.gl/631F31 30% over JPEG 25% over PNG
  19. 19. <picture>
 <source srcset="washing.webp">
 <source srcset="washing.jpg">
 <img src="washing.jpg">
 </picture>
  20. 20. <img sizes="(max-width: 30em) 100vw,
 (max-width: 50em) 50vw,
 calc(33vw - 100px)"
 srcset="swing-200.jpg 200w,
 swing-400.jpg 400w,
 swing-800.jpg 800w,
 swing-1600.jpg 1600w"
 src="swing-400.jpg" alt="Kettlebell Swing"> goo.gl/Aev18k
  21. 21. Round Trips +50ms @WiFi +75ms @LTE +500ms @3G +2500ms @2G
  22. 22. Round Trips 100 reqs/site 6 connections > 833 ms spent in RTT @WiFi
  23. 23. <link rel="dns-prefetch" href="https://example.com/">
 <link rel="preconnect" href="https://example.com/"> 
 <link rel="preload" href="https://example.com/footer.jpg" as="image"> <link rel="prefetch" href="https://example.com/next-page.html" as="html"> goo.gl/Aev18k
  24. 24. Be interactive
  25. 25. <script async defer …>
  26. 26. CSS?
  27. 27. CSS? github.com/filamentgroup/ loadCSS
  28. 28. Regioning/Critical …then Rest
  29. 29. https://aerotwist.com/blog/guitar-tuner/
  30. 30. Defer iFrames <iframe data-src="https://example.com"></iframe>
 <iframe data-src="https://another.example.com"></iframe>
 <script>
 document.addEventListener('load', () => {
 Array.from(document.querySelectorAll('iframe'))
 .forEach(iframe => iframe.src = iframe.dataset.src);
 });
 </script>
  31. 31. github.com/GoogleChrome/simplehttp2server
  32. 32. Offline
  33. 33. Web is a thing like a magic carpet
  34. 34. Your Page You CAN’T FLY without your page.
  35. 35. Lie-Fi
  36. 36. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Service Worker
  37. 37. Service Worker fundamentally changes how browser works ! Run a script separate from the page itself ! Run the script even without the page open ! Capture network requests from the page
  38. 38. Service Worker Lifecycle
  39. 39. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Browser Network
  40. 40. Registering a Service Worker 
 navigator.serviceWorker.register('/sw.js');

  41. 41. Registering a Service Worker if (navigator.serviceWorker) {
 navigator.serviceWorker.register('/sw.js');
 }
  42. 42. console.log('Hello'); sw.js
  43. 43. DevTools for Service Worker DevTools > Resources > Service Workers Check "Update on reload" Proprietary + Confidential
  44. 44. self.addEventListener('fetch', event => {
 debugger;
 }); sw.js
  45. 45. sw.js self.addEventListener('fetch', event => {
 event.respondWith(
 new Response('Hello Seoul')
 );
 });
  46. 46. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem No network requests Browser Service Worker Network
  47. 47. fetch() fetch('/', {
 method: 'POST',
 body: data
 }).then(res => {
 return res.json();
 }).then(result => {
 return result;
 }, err => {
 console.error(err);
 });
  48. 48. sw.js self.addEventListener('fetch', event => {
 event.respondWith(
 fetch(event.request)
 );
 });
  49. 49. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Delegating network requests Browser Service Worker Network
  50. 50. Use cases ! Custom 404 page if not found ! Responsive resource loader ! Cache response and respond without network request
  51. 51. Proprietary + ConfidentialProprietary + Confidential Proprietary + Confidential Caching resources
  52. 52. CACHE MANIFEST
 # 2010-06-18:v2
 
 # Explicitly cached 'master entries'.
 CACHE:
 /favicon.ico
 index.html
 stylesheet.css
 images/logo.png
 scripts/main.js
 
 # Resources that require the user to be online.
 NETWORK:
 login.php Application Cache
  53. 53. cache self.addEventListener('install', event => {
 event.waitUntil(
 caches.open('precache-v1')
 .then(cache => cache.addAll([
 'index.html',
 'style.css'
 ]))
 );
 });
  54. 54. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Caching resources Browser Service Worker Network
  55. 55. Respond with cache self.addEventListener('fetch', event => {
 event.respondWith(
 caches.match(event.request)
 .then(response => response || fetch(event.request))
 );
 });
  56. 56. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem sw-precache
  57. 57. ! Declaratively write list of resources you want to pre-cache (like AppCache). ! Build with gulp or Grunt to generate a SW file. ! Versioning is automatically taken care of. sw-precache
  58. 58. sw-precache in gulp gulp.task('generate-service-worker', function(callback) {
 var path = require('path');
 var swPrecache = require('sw-precache');
 var rootDir = 'app';
 
 swPrecache.write(path.join(rootDir, 'service-worker.js'), {
 staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'],
 stripPrefix: rootDir
 }, callback);
 });
  59. 59. Proprietary + ConfidentialProprietary + Confidential Proprietary + Confidential Dynamic caching
  60. 60. Loading dynamic data Changes frequently Structured data Unpredictably many query variations
  61. 61. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Cache first Browser Service Worker Network 1 4 3 2
  62. 62. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Network first Browser Service Worker Network 1 4 2 3
  63. 63. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem sw-toolbox
  64. 64. sw-toolbox toolbox.router.get('/api', toolbox.networkFirst);
  65. 65. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Indexed Database
  66. 66. Proprietary + ConfidentialProprietary + Confidential Proprietary + Confidential Putting together
  67. 67. Page Shell Precache required resources at initial load. You will at least see app shell on page launch.
  68. 68. Contents Precache required resources at initial load. You will at least see app shell on page launch. Load content using dynamic cache approach. If the content is not available, use cache.
  69. 69. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Application Shell
  70. 70. THANK YOU

×