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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Web Standards Support in WebKit

Similaire à Web Standards Support in WebKit (20)

Plus de Joone Hur

Plus de Joone Hur (9)

Dernier

Dernier (20)

Web Standards Support in WebKit