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.

Chrome enchanted 2015

1,807 views

Published on

Chrome Enchanted 2015, Google I/O 2015 extended INCHEON & SEOUL.

Published in: Technology
  • Jeb Andrews, PhD, CEO of Clinical Trials of America, sent me this touching handwritten letter after he won over $5,000 betting conservatively using my "Demolisher" Baseball Betting System: ●●● http://t.cn/A6zP2wH9
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • New eBook Highlights the Most Effective Natural Tattoo Removal Methods... ■■■ http://t.cn/A67tToQC
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • shady dom 은 좀 봐야할듯 +_+
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Chrome enchanted 2015

  1. 1. +ChangwookDoh @cwdoh Google I/O extended 2015 SEOUL Chrome enchanted 2015
  2. 2. Chang W. Doh Developer at SKPlanet Organizer of ● GDG Korea WebTech Contributor of ● HTML5Rocks/KO ● Web Fundamentals/KO
  3. 3. Permission query
  4. 4. Check before do something.
  5. 5. Chrome version 43 // Check for Geolocation API permissions navigator .permissions.query({name:’geolocation’}) .then(function(permissionStatus) { console.log('permission status is ', permissionStatus.status); permissionStatus.onchange = function() { console.log('permission has changed to ', this.status); }; });
  6. 6. Theme color
  7. 7. <meta
 IIIIname="themeKcolor"
 IIIIcontent="#40bd9e">
  8. 8. App install banner
  9. 9. manifest.json ServiceWorker Served over HTTPS Visit frequency heuristics Requirements
  10. 10. { "short_name": "Kinlan's Amaze App", "name": "Kinlan's Amazing Application ++", "icons": [ { "src": "launcherKiconK3x.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "index.html", "display": "standalone" } manifest.json
  11. 11. <link rel=“manifest" href="manifest.json"> HTML
  12. 12. Cancelling installation window.addEventListener(‘beforeinstallprompt', function(e) { e.preventDefault(); return false; });
  13. 13. Checking installation window.addEventListener(‘beforeinstallprompt', function(e) { e.userChoice.then(function(choiceResult) { if(choiceResult.outcome == 'dismissed') { console.log('User cancelled install'); } else { console.log('User added to homescreen'); } }); });
  14. 14. Are you Android developer?!?
  15. 15. Chrome custom tabs
  16. 16. When showing web contents in native app… Launching the browser Embedding WebView
  17. 17. One more thing!
  18. 18. Chrome Custom Tabs
  19. 19. Chrome Custom Tabs Share all contexts with Chrome Customize how Chrome L&F Pre-start and pre-fetch content Easy to implement
  20. 20. Available on Chrome 45 dev channel Visit for samples: https://github.com/GoogleChrome/custom-tabs-client
  21. 21. “If your app directs people to URLs outside your domain” When I use Chrome custom tabs?
  22. 22. Native app install banner
  23. 23. {
 IIII"short_name":I"Kinlan'sIAmazeIApp",
 IIII"name":I"Kinlan'sIAmazingIApplicationI++",
 IIII"icons":I[…],
 IIII"start_url":I"index.html",
 IIII"display":I“standalone”,I 
 } manifest.json "prefer_related_applications": true, "related_applications": [ { "platform": "play", "id": "com.google.samples.apps.iosched" } ], …
  24. 24. “The user has visited your site twice over 2 separate days during the course of 2 weeks.” When can my user see that banner? Rule of 2-2-2
  25. 25. Are you Android developer?!?
  26. 26. “이제 다른 세션으로 가셔도 좋습니다.”
  27. 27. Service Worker
  28. 28. Yay, ServiceWorker!! ● Caching/offiline ● Push notification ● Background sync ● Intercept request ● Offline google analytics
  29. 29. WEB PAGE
  30. 30. Web Page are running on single thread(UI) WEB PAGE
  31. 31. WebWorker WebPage has spawned new thread(Worker) On UI thread On Background thread
  32. 32. WebPage install new service module on the browser Service Worker JS Event NetworkBROWSER Cache
  33. 33. App. Cache!! App. Cache!!Offline!! Offline!! Image: ‘Mission Impossible 4’ Movie
  34. 34. “Now, you can use notification for your web app like native app” https://simple-push-demo.appspot.com/
  35. 35. manifest.json {II IIII" IIII" IIII" IIIIIIII" IIIIIIII" IIIIIIII" IIII}],II IIII" IIII" } 
 IIII"gcm_sender_id":I"123456789012",II
 IIII"gcm_user_visible_only":ItrueII

  36. 36. javascript - serviceworker code self.addEventListener('push',Ifunction(event)I{III
 IIIIconsole.log('ReceivedIaIpushImessage',Ievent);
 
 IIIIvarItitleI=I'YayIaImessage.';II
 IIIIvarIbodyI=I'WeIhaveIreceivedIaIpushImessage.';II
 IIIIvarIiconI=I'/images/iconK192x192.png';II
 IIIIvarItagI=I'simpleKpushKdemoKnotificationKtag';
 
 IIIIevent.waitUntil(II
 IIIIIIIIself.registration.showNotification(title,I{II
 IIIIIIIIIIIIbody:Ibody,
 IIIIIIIIIIIIicon:Iicon,II
 IIIIIIIIIIIItag:ItagII
 IIIIIIII})II
 IIII);II
 });
  37. 37. Slide from “Polymer and modern web APIs: In production at Google scale" READY FOR PRODUCTION
  38. 38. “Existing HTML is a set of tools useful 20 years ago for building documents, not applications.”
  39. 39. Slide from “Polymer and modern web APIs: In production at Google scale"
  40. 40. Image: Slide from “Polymer and modern web APIs: In production at Google scale"
  41. 41. Web Components HTML Imports Custom elements Template Shadow DOM 컴포넌트 로딩 엘리먼트 등록 마크업 구조화/생성 스타일과 DOM을 보호 Visit to read in detail: http://goo.gl/aiEI6F
  42. 42. Why Polymer?
  43. 43. Step 1 Slide from “Polymer and modern web APIs: In production at Google scale"
  44. 44. Step 2 https://goo.gl/Y77E43 Slide from “Polymer and modern web APIs: In production at Google scale"
  45. 45. We wanted to do better. Slide from “Polymer and modern web APIs: In production at Google scale"
  46. 46. Slide from “Polymer and modern web APIs: In production at Google scale"
  47. 47. Learnings from Web Starter Kit, IO 2015 and Santa Tracker Slide from “Polymer and modern web APIs: In production at Google scale"
  48. 48. Polymer 1.0 REALLY Quick reviewREALLY
  49. 49. Slide from “Polymer and modern web APIs: In production at Google scale" 0 150 300 450 600 Time 0 750 1500 2250 3000 Time mobile safari 4x FASTER Chrome 3x FASTER
  50. 50. Slide from “Polymer and modern web APIs: In production at Google scale" 0.51.0 35% LESS CODE 42kb19kb -
  51. 51. Slide from “Polymer and modern web APIs: In production at Google scale" 1.0 Features Shady DOM Theming with CSS custom prop.
  52. 52. Slide from “Polymer and modern web APIs: In production at Google scale" Existing Frameworks Applications Web Platform Web Components Built with Polymer (or not)
  53. 53. core paper Slide from “Polymer and modern web APIs: In production at Google scale"
  54. 54. core paper Slide from “Polymer and modern web APIs: In production at Google scale"
  55. 55. Slide from “Polymer and modern web APIs: In production at Google scale"
  56. 56. Slide from “Polymer and modern web APIs: In production at Google scale"
  57. 57. Slide from “Polymer and modern web APIs: In production at Google scale"
  58. 58. <google-drive> <google-calendar> <google-hangout-button> <google-cloud> <google-castable-video> <google-analytics> <google-map> <google-sheets> <google-translate> <google-youtube> Slide from “Polymer and modern web APIs: In production at Google scale"
  59. 59. Slide from “Polymer and modern web APIs: In production at Google scale"
  60. 60. Slide from “Polymer and modern web APIs: In production at Google scale"
  61. 61. <platinum-sw> <platinum-sw-fetch> <platinum-sw-cache> <platinum-sw-register> <platinum-push- messaging> … Slide from “Polymer and modern web APIs: In production at Google scale"
  62. 62. Slide from “Polymer and modern web APIs: In production at Google scale"
  63. 63. Slide from “Polymer and modern web APIs: In production at Google scale"
  64. 64. <gold-cc-input> <gold-zip-input> <gold-cc-expiration- input> <gold-cc-cvc-input> <gold-phone-input> <gold-email-input> … Slide from “Polymer and modern web APIs: In production at Google scale"
  65. 65. elements.polymer-project.org Slide from “Polymer and modern web APIs: In production at Google scale"
  66. 66. There’s an element for that! Slide from “Polymer and modern web APIs: In production at Google scale"
  67. 67. Featured cases
  68. 68. Slide from “Polymer and modern web APIs: In production at Google scale"
  69. 69. Slide from “Polymer and modern web APIs: In production at Google scale"
  70. 70. Slide from “Polymer and modern web APIs: In production at Google scale"
  71. 71. + Slide from “Polymer and modern web APIs: In production at Google scale"
  72. 72. Slide from “Polymer and modern web APIs: In production at Google scale"
  73. 73. Slide from “Polymer and modern web APIs: In production at Google scale"
  74. 74. Slide from “Polymer and modern web APIs: In production at Google scale"
  75. 75. Google Santa santatracker.googl Slide from “Polymer and modern web APIs: In production at Google scale"
  76. 76. Slide from “Polymer and modern web APIs: In production at Google scale"
  77. 77. <santa-app> </santa-app> github.com/google/santa-tracker-web Slide from “Polymer and modern web APIs: In production at Google scale"
  78. 78. <santa-app> </santa-app> github.com/google/santa-tracker-web Slide from “Polymer and modern web APIs: In production at Google scale"
  79. 79. <!-- route controller --> <santa-router route="{{route}}" autoHash></santa-router> <!-- scenes elements are upgraded on demand --> <lazy-pages selected=“{{route}}” selectedItem=“{{selectedScene}}” valueattr=“route”> <!-- scenes elements inherit from base-scene.html --> <village-scene route=“village" path=“scenes/village_{{lang}}.html” hidden>… <!-- scenes can specify their own loading image & background --> <santaselfie-scene route="santaselfie" path=“scenes/santaselfie-{{lang}}.html” loadingBgColor="#83D7F5" loadingSrc=“scenes/selfie_loading.svg” hidden>… </lazy-pages> <santa-app> </santa-app> Slide from “Polymer and modern web APIs: In production at Google scale"
  80. 80. <!-- route controller --> <santa-router route="{{route}}" autoHash></santa-router> <!-- scenes elements are upgraded on demand --> <lazy-pages selected=“{{route}}” selectedItem=“{{selectedScene}}” valueattr=“route”> <!-- scenes elements inherit from base-scene.html --> <village-scene route=“village" path=“scenes/village_{{lang}}.html” hidden>… <!-- scenes can specify their own loading image & background --> <santaselfie-scene route="santaselfie" path=“scenes/santaselfie-{{lang}}.html” loadingBgColor="#83D7F5" loadingSrc=“scenes/selfie_loading.svg” hidden>… </lazy-pages> <santa-app> </santa-app> Slide from “Polymer and modern web APIs: In production at Google scale"
  81. 81. ANY QUESTION?
  82. 82. ROCK YOU!

×