Post on 06-Aug-2015
+ChangwookDoh@cwdoh
Google I/O extended 2015 SEOUL
Chrome enchanted 2015
Chang W. Doh
Developer at SKPlanet
Organizer of ● GDG Korea WebTech
Contributor of ● HTML5Rocks/KO ● Web Fundamentals/KO
Permission query
Check before do something.
Chrome version 43
// Check for Geolocation API permissionsnavigator.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);
};});
Theme color
<metaIIIIname="themeKcolor"IIIIcontent="#40bd9e">
App install banner
manifest.json ServiceWorkerServed over HTTPSVisit frequency heuristics
Requirements
{"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
<linkrel=“manifest"href="manifest.json">
HTML
Cancelling installation
window.addEventListener(‘beforeinstallprompt', function(e) { e.preventDefault(); return false; });
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'); } }); });
Are you Android
developer?!?
Chrome custom tabs
When showing web contents in native app…
Launching the browserEmbedding WebView
One more thing!
Chrome Custom Tabs
Chrome Custom Tabs
Share all contexts with ChromeCustomize how Chrome L&FPre-start and pre-fetch contentEasy to implement
Available on Chrome 45 dev channel
Visit for samples: https://github.com/GoogleChrome/custom-tabs-client
“If your app directs people to URLs outside your domain”
When I use Chrome custom tabs?
Native app install banner
{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"
}],…
“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
Are you Android
developer?!?
“이제 다른 세션으로 가셔도 좋습니다.”
Service Worker
Yay, ServiceWorker!!
● Caching/offiline● Push notification● Background sync● Intercept request● Offline google analytics
WEB PAGE
Web Page are running on single thread(UI)
WEB PAGE
WebWorker
WebPage has spawned new thread(Worker)
On UI thread On Background thread
WebPage install new service module on the browser
Service Worker
JS
Event NetworkBROWSER
Cache
App. Cache!! App. Cache!!Offline!!
Offline!!
Image: ‘Mission Impossible 4’ Movie
“Now, you can use notification for your web app like native app”
https://simple-push-demo.appspot.com/
manifest.json
{IIIIII"IIII"IIII"IIIIIIII"IIIIIIII"IIIIIIII"IIII}],IIIIII"IIII"
}
IIII"gcm_sender_id":I"123456789012",IIIIII"gcm_user_visible_only":ItrueII
javascript - serviceworker code
self.addEventListener('push',Ifunction(event)I{IIIIIIIconsole.log('ReceivedIaIpushImessage',Ievent);IIIIvarItitleI=I'YayIaImessage.';IIIIIIvarIbodyI=I'WeIhaveIreceivedIaIpushImessage.';IIIIIIvarIiconI=I'/images/iconK192x192.png';IIIIIIvarItagI=I'simpleKpushKdemoKnotificationKtag';IIIIevent.waitUntil(IIIIIIIIIIself.registration.showNotification(title,I{II IIIIIIIIIIIIbody:Ibody,IIIIIIIIIIIIicon:Iicon,IIIIIIIIIIIIIItag:ItagIIIIIIIIII})IIIIII);II});
Slide from “Polymer and modern web APIs: In production at Google scale"
READYFOR
PRODUCTION
“Existing HTML is a set of tools useful 20 years ago for building documents, not applications.”
Slide from “Polymer and modern web APIs: In production at Google scale"
Image: Slide from “Polymer and modern web APIs: In production at Google scale"
Web Components
HTML ImportsCustom elementsTemplate Shadow DOM
컴포넌트 로딩
엘리먼트 등록
마크업 구조화/생성
스타일과 DOM을 보호
Visit to read in detail: http://goo.gl/aiEI6F
Why Polymer?
Step 1
Slide from “Polymer and modern web APIs: In production at Google scale"
Step 2https://goo.gl/Y77E43
Slide from “Polymer and modern web APIs: In production at Google scale"
We wanted to do better.
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
Learnings from Web Starter Kit, IO 2015 and Santa Tracker
Slide from “Polymer and modern web APIs: In production at Google scale"
Polymer 1.0REALLY Quick reviewREALLY
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
Slide from “Polymer and modern web APIs: In production at Google scale"
0.51.0
35% LESS CODE42kb 19kb -
Slide from “Polymer and modern web APIs: In production at Google scale"
1.0 Features
Shady DOMTheming with CSS custom prop.
Slide from “Polymer and modern web APIs: In production at Google scale"
Existing Frameworks
Applications
Web Platform
Web Components Built with Polymer (or not)
core paper
Slide from “Polymer and modern web APIs: In production at Google scale"
core paper
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
<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"
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
<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"
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
<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"
elements.polymer-project.org
Slide from “Polymer and modern web APIs: In production at Google scale"
There’s an element for that!
Slide from “Polymer and modern web APIs: In production at Google scale"
Featured cases
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
+
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
Google Santa santatracker.googl
Slide from “Polymer and modern web APIs: In production at Google scale"
Slide from “Polymer and modern web APIs: In production at Google scale"
<santa-app> </santa-app>
github.com/google/santa-tracker-webSlide from “Polymer and modern web APIs: In production at Google scale"
<santa-app>
</santa-app>github.com/google/santa-tracker-web
Slide from “Polymer and modern web APIs: In production at Google scale"
<!-- 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"
<!-- 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"
ANY QUESTION?
ROCK YOU!