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

1. +ChangwookDoh
@cwdoh
Google I/O extended 2015 SEOUL
Chrome enchanted 2015

2. Chang W. Doh
Developer at SKPlanet
Organizer of
● GDG Korea WebTech
Contributor of
● HTML5Rocks/KO
● Web Fundamentals/KO

5. Permission query

6. Check before do something.

7. 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);
};
});

8. Theme color

9. <meta
IIIIname="themeKcolor"
IIIIcontent="#40bd9e">

10. App install banner

12. manifest.json
ServiceWorker
Served over HTTPS
Visit frequency heuristics
Requirements

13. {
"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

14. <link
rel=“manifest"
href="manifest.json">
HTML

15. Cancelling installation
window.addEventListener(‘beforeinstallprompt',
function(e) {
e.preventDefault();
return false;
});

16. 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');
}
});
});

17. Are you Android
developer?!?

18. Chrome custom tabs

19. When showing web contents in native app…
Launching the browser
Embedding WebView

20. One more thing!

21. Chrome Custom Tabs

22. Chrome Custom Tabs
Share all contexts with Chrome
Customize how Chrome L&F
Pre-start and pre-fetch content
Easy to implement

23. Available on
Chrome 45 dev channel
Visit for samples:
https://github.com/GoogleChrome/custom-tabs-client

24. “If your app directs people to
URLs outside your domain”
When I use Chrome custom tabs?

25. Native app install banner

27. {
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"
}
],
…

28. “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

29. Are you Android
developer?!?

30. “이제 다른 세션으로 가셔도 좋습니다.”

31. Service Worker

32. Yay, ServiceWorker!!
● Caching/offiline
● Push notification
● Background sync
● Intercept request
● Offline google analytics

33. WEB PAGE

34. Web Page are running on single thread(UI)
WEB PAGE

35. WebWorker
WebPage has spawned new thread(Worker)
On UI thread On Background
thread

36. WebPage install new service module on the browser
Service Worker
JS
Event NetworkBROWSER
Cache

37. App. Cache!!
App. Cache!!Offline!!
Offline!!
Image: ‘Mission Impossible 4’ Movie

41. “Now, you can use notification
for your web app like native app”
https://simple-push-demo.appspot.com/

42. 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

43. 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
});

45. Slide from “Polymer and modern web APIs: In production at Google scale"
READY
FOR
PRODUCTION

46. “Existing HTML is a set of tools
useful 20 years ago for building
documents, not applications.”

47. Slide from “Polymer and modern web APIs: In production at Google scale"

48. Image:
Slide from “Polymer and modern web APIs: In production at Google scale"

49. Web Components
HTML Imports
Custom elements
Template
Shadow DOM
컴포넌트 로딩
엘리먼트 등록
마크업 구조화/생성
스타일과 DOM을 보호
Visit to read in detail: http://goo.gl/aiEI6F

50. Why Polymer?

51. Step 1
Slide from “Polymer and modern web APIs: In production at Google scale"

52. Step 2
https://goo.gl/Y77E43
Slide from “Polymer and modern web APIs: In production at Google scale"

53. We wanted to do better.
Slide from “Polymer and modern web APIs: In production at Google scale"

54. Slide from “Polymer and modern web APIs: In production at Google scale"

55. Learnings from Web Starter Kit, IO 2015 and Santa Tracker
Slide from “Polymer and modern web APIs: In production at Google scale"

56. Polymer 1.0
REALLY Quick reviewREALLY

57. 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

58. Slide from “Polymer and modern web APIs: In production at Google scale"
0.51.0
35% LESS CODE
42kb19kb -

59. Slide from “Polymer and modern web APIs: In production at Google scale"
1.0 Features
Shady DOM
Theming with CSS custom prop.

60. Slide from “Polymer and modern web APIs: In production at Google scale"
Existing Frameworks
Applications
Web Platform
Web Components Built with Polymer (or not)

61. core paper
Slide from “Polymer and modern web APIs: In production at Google scale"

62. core paper
Slide from “Polymer and modern web APIs: In production at Google scale"

63. Slide from “Polymer and modern web APIs: In production at Google scale"

64. Slide from “Polymer and modern web APIs: In production at Google scale"

65. Slide from “Polymer and modern web APIs: In production at Google scale"

66. <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"

67. Slide from “Polymer and modern web APIs: In production at Google scale"

68. Slide from “Polymer and modern web APIs: In production at Google scale"

69. <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"

70. Slide from “Polymer and modern web APIs: In production at Google scale"

71. Slide from “Polymer and modern web APIs: In production at Google scale"

72. <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"

73. elements.polymer-project.org
Slide from “Polymer and modern web APIs: In production at Google scale"

74. There’s an element
for that!
Slide from “Polymer and modern web APIs: In production at Google scale"

75. Featured cases

76. Slide from “Polymer and modern web APIs: In production at Google scale"

77. Slide from “Polymer and modern web APIs: In production at Google scale"

78. Slide from “Polymer and modern web APIs: In production at Google scale"

79. +
Slide from “Polymer and modern web APIs: In production at Google scale"

80. Slide from “Polymer and modern web APIs: In production at Google scale"

81. Slide from “Polymer and modern web APIs: In production at Google scale"

82. Slide from “Polymer and modern web APIs: In production at Google scale"

83. Google Santa
santatracker.googl
Slide from “Polymer and modern web APIs: In production at Google scale"

84. Slide from “Polymer and modern web APIs: In production at Google scale"

85. <santa-app> </santa-app>
github.com/google/santa-tracker-web
Slide from “Polymer and modern web APIs: In production at Google scale"

86. <santa-app>
</santa-app>
github.com/google/santa-tracker-web
Slide from “Polymer and modern web APIs: In production at Google scale"

87. <!-- 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"

88. <!-- 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"

89. ANY QUESTION?

90. ROCK YOU!