Chrome enchanted 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

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

manifest.json
ServiceWorker
Served over HTTPS
Visit 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

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

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

Chrome Custom Tabs
Share all contexts with Chrome
Customize how Chrome L&F
Pre-start and pre-fetch content
Easy 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?

{ 
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

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

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

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
{II
IIII"
IIII"
IIII"
IIIIIIII"
IIIIIIII"
IIIIIIII"
IIII}],II
IIII"
IIII"
}
 
IIII"gcm_sender_id":I"123456789012",II 
IIII"gcm_user_visible_only":ItrueII

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

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

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

Image:

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

Step 1

Step 2
https://goo.gl/Y77E43

We wanted to do better.

Learnings from Web Starter Kit, IO 2015 and Santa Tracker

Polymer 1.0
REALLY Quick reviewREALLY

0
150
300
450
600
Time
0
750
1500
2250
3000
Time
mobile safari
4x FASTER
Chrome
3x FASTER

0.51.0
35% LESS CODE
42kb19kb -

1.0 Features
Shady DOM
Theming with CSS custom prop.

Existing Frameworks
Applications
Web Platform
Web Components Built with Polymer (or not)

core paper

<google-drive>
<google-calendar>
<google-hangout-button>
<google-cloud>
<google-castable-video>
<google-analytics>
<google-map>
<google-sheets>
<google-translate>
<google-youtube>

<platinum-sw>
<platinum-sw-fetch>
<platinum-sw-cache>
<platinum-sw-register>
<platinum-push-
messaging>
…

<gold-cc-input>
<gold-zip-input>
<gold-cc-expiration-
input>
<gold-cc-cvc-input>
<gold-phone-input>
<gold-email-input>
…

elements.polymer-project.org

There’s an element
for that!

+

Google Santa
santatracker.googl

<santa-app> </santa-app>
github.com/google/santa-tracker-web

<santa-app>
</santa-app>
github.com/google/santa-tracker-web

<santa-router route="{{route}}" autoHash></santa-router>

<lazy-pages selected=“{{route}}” selectedItem=“{{selectedScene}}”
valueattr=“route”>

<village-scene route=“village" path=“scenes/village_{{lang}}.html” hidden>…

<santaselfie-scene route="santaselfie"
path=“scenes/santaselfie-{{lang}}.html”
loadingBgColor="#83D7F5"
loadingSrc=“scenes/selfie_loading.svg” hidden>…
</lazy-pages>
<santa-app>
</santa-app>

Chrome enchanted 2015

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Chrome enchanted 2015

Similar to Chrome enchanted 2015 (20)

More from Chang W. Doh

More from Chang W. Doh (20)

Recently uploaded

Recently uploaded (20)

Chrome enchanted 2015