+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!