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

https://about.me/cwdoh

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

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/

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


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


Step 2https://goo.gl/Y77E43


We wanted to do better.



Learnings from Web Starter Kit, IO 2015 and Santa Tracker


Polymer 1.0REALLY 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 CODE42kb 19kb -


1.0 Features

Shady DOMTheming with CSS custom prop.


Existing Frameworks

Applications

Web Platform

Web Components Built with Polymer (or not)

core paper


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!


Featured cases




+





Google Santa santatracker.googl



<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


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


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


ANY QUESTION?

ROCK YOU!

Technology

Chrome enchanted 2015