Web Standards Support in WebKit

Web Standards Support
in WebKit
허 준 회 (Joone Hur)

Collabora

About me

• WebKit Committer
• Working for Collabora (http://collabora.com)
• Working on WebKitGtk+, WebKit-Clutter

• Blog: http://opensoftware.kr
• Email: joone.hur@collabora.com

Contents

• Custom scheme and content handlers
• AddSearchProvider
• Navigation Timing
• Device API
o Battery Status Event
o Contacts API
o HTML Media Capture API
• Unified Storage Quota API
• Shadow DOM API
• WebKit News
o WebCL & WebKit2 based Browser

Custom scheme and content handlers
• 웹 사 이 트 에 서 Protocol 이 나 mimetype 을 임 의 로 등 록 하 여 특 정
URL 에 서 처 리 하 도 록 함
• Interface
o window.navigator.registerProtocalHandler(scheme, url, title)
o window.navigator.registerContentHandler(mineType, url, title)
• References
o http://dev.w3.org/html5/spec/Overview.html#dom-navigator-
registerprotocolhandler
o http://trac.webkit.org/changeset/50477
o https://developer.mozilla.org/En/DOM:window.navigator.register
ContentHandler
o https://developer.mozilla.org/en/DOM/window.navigator.registerP
rotocolHandler
• Firefox, Chromium 지 원

Example
<head>
<script type="text/javascript">
function RegisterHandler () {
navigator.registerProtocolHandler ("mailto",
"http://help.dottoro.com/protocolHandler.php?uri=%s", "Dottoro mailto
protocol handler");
}
</script>
</head>
<body>
<button onclick="RegisterHandler ();">Register a handler for the mailto
protocol!</button>
</body>

AddSearchProvider

• Search Box 에 검 색 엔 진 을 등 록 하 는 기 능
• 지 원 하 는 interface
o window.external.AddSearchProvider()
o window.external.IsSearchProviderInstalled()

• Firefox, IE, Chromium 에 서 지 원

Navigation Timing

• This specification defines an interface for web applications
to access timing information related to navigation and
elements.
• The API will allow web application to gather performance
metrics about various factors such as page redirect, DNS
lookup, connection & secure connection statistics,
request/response time, various events, etc
• Chromium, Firefox Support
• Reference
o http://www.w3.org/TR/navigation-timing/

Performance Timing, Performance Navigation

Example

var start = new Date().getTime();
function onLoad() {
var now = new Date().getTime();
var latency = now - start;
alert("page loading time: " + latency);
}

function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
alert("User-perceived page loading time: " + page_load_time);
}

Demo Page for Navigation Timing

http://webtimingdemo.appspot.com/

Device API

• Battery Status Event Specification
o http://www.w3.org/TR/battery-status/
o https://bugs.webkit.org/show_bug.cgi?id=62698

• Contacts API
o http://www.w3.org/TR/2011/WD-contacts-api-20110616/

• HTML Media Capture

HTML Media Capture
<input type="file" accept="image/*" capture="camera"
id="capture">

• HTML Media Capture is the HTML Form Based specification
that allows the user to take a picture, record a sound file, or
record a video like the file picker interface.
• The "capture" attribute can have the following values:
o camera. microphone, camcorder, filesystem
• References
o http://www.w3.org/TR/html-media-capture/

Unified Storage Quota API

• The feature/API is to allow webapps to request or query per-
origin storage quota across multiple storage types (e.g.
IndexedDB, SQL DB and FileSystemAPI)
• References
o http://lists.w3.org/Archives/Public/public-
webapps/2011JanMar/0346.html

Example
function errorCallback(error)
{
testFailed("Error occurred: " + error);
finishJSTest();
}

var grantedQuota;
function quotaCallback(newQuota)
{
grantedQuota = newQuota;

// We must be given 0 quota, the same amount as we requested.
shouldBe("grantedQuota", "0");

finishJSTest();
}

if (window.webkitStorageInfo) {
window.jsTestIsAsync = true;

// Requesting '0' quota for testing
// (this request must be almost always granted
// without showing any platform specific notification UI).
webkitStorageInfo.requestQuota(webkitStorageInfo.TEMPORARY, 0, quotaCallback, errorCallback);
} else
debug("This test requires window.webkitStorageInfo.");

Shadow DOM API

• Expose the minimum subset of the larger Web Component
Model
• Shadow DOM refers to the ability of the browser to include a
subtree of DOM elements into the rendering of a document,
but not into the main document DOM tree
• API
o Element.webkitShadow
o Element.webkitPseudo
o document.webkitCreateShadow()
o window.WebKitShadowRootConstructor
o window.WebKitTreeScopeConstructor
• References
o http://lists.w3.org/Archives/Public/public-webapps/2011AprJun/1345.html

Example

<!DOCTYPE HTML> <html> <body> The object's downloading progress:
<progress id="foo" value="33" max="100"></progress> </body> </html>

var download_progress = document.getElementsById("foo");
console.log(download_progress.firstChild); // returns null
root = download_progress.shadowRoot;

Example
#if defined(ENABLE_PROGRESS_TAG) && ENABLE_PROGRESS_TAG
/* progress */

progress {
-webkit-appearance: progress-bar;
-webkit-box-sizing: border-box;
display: inline-block; <progress>
height: 1em;
width: 10em; ┗ <div> ::-webkit-progress-bar
vertical-align: -0.2em;
}
┗ <div>::-webkit-progress-value
progress::-webkit-progress-bar {
background-color: gray;
height: 100%;
width: 100%;
}

progress::-webkit-progress-value {
background-color: green;
height: 100%;
width: 50%; /* should be removed later */
}
#endif

WebCL

Samsung has added WebCL JS API to WebKit

WebCL is a new activity in Khronos that is defining JavaScript
bindings to OpenCL

http://code.google.com/p/webcl/

WebKit2 on Nokia N9

• Provides QtWebKit2 based browser
• Reference
o http://conversations.nokia.com/2011/06/28/nokia-n9-
opening-the-browser/

Web Standards Support in WebKit

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Web Standards Support in WebKit

Similar to Web Standards Support in WebKit (20)

More from Joone Hur

More from Joone Hur (9)

Recently uploaded

Recently uploaded (20)

Web Standards Support in WebKit