Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WebView 뛰어 넘기
부제: 고성능 WebView 만들기

박창현
About Us

http://www.skplanet.com
http://readme.skplanet.com
About Me
•
•
•
•
•

단말 플랫폼 개발 Specialist
웹 플랫폼 개발 Specialist
Android 보안 시스템 개발 Specialist
Android/HTML5/Hybrid App Framewo...
Contents
• Why High-performance WebView?
• Basic Tech. Idea for High-performance
WebView
• Demo
• Lessons Learned
Why High-performance WebView?
Hybrid Apps. Become More Popular
What is Hybrid Application?

Native

Web

WebView
• A Part of Android

Fr
ag
m
en

Framework
• Different from Web
Browser (Chrome)
• Less Powerful Than Web
Browser (Chrome....
Web Standard Compatibility for
WebView
Web
Audio/Vi
Web
Canvas
Worker
deo
Sockets
s

Web
Audio

Web
Notificat WebGL
ion

G...
Web Standard Compatibility for
WebView
Web
Audio/Vi
Web
Canvas
Worker
deo
Sockets
s

Web
Audio

Web
Notificat WebGL
ion

5...
Hybrid App’s Problems Are ...
“We have to make several versions of in-app
web contents for each android/iOS version.”

Fra...
We Need To Have Special
WebView
Provide The Same Web Standards
Independent of OS version and Manufacturers

Should Be Fast...
Basic Technical Ingredient
We Need To Know ...
• How To Call JavaScript Function
From Native

• How To Call Native Function From
JavaScript
Android
• onPageFinished + bookmarklet
webview.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished...
Android
• addJavascriptInterface
//Define Bridge Class
class MyBridgeClass {
public void foo(final String args) {
// do so...
iOS
• webViewDidFinishLoad +

stringByEvaluatingJavaScriptFromString

//Insert my own javascript codes like this:
- (void)...
iOS
• shouldStartLoadWithRequest
//Insert my own javascript codes like this:
- (BOOL)webView:(UIWebView *)theWebView
shoul...
Add & Replace
Web Sockets and Canvas 2D
• Web Sockets

- Android WebView Does Not Support
- Add Web Sockets Features Into WebView

• Can...
Add Web Socket (Android)
WebSocket_shim.js
WebSocket WebSocket

...

NativeWebSocket
WebView

NativeWebSocketImpl
NativeWe...
Add Web Socket (Android)
• Define Web Socket (JavaScript)
// websocket_shim.js
(function() {
var store = {};
// Websocket ...
Add Web Socket (Android)
• Define Web Socket / Register /
Callback(Java)

// Define Bridge Interface
class NativeWebSocket...
Add Web Socket (Android)
• Install WebSocket_shim.js!
webview.setWebViewClient(new WebViewClient() {
@Override
public void...
Replace Canvas 2D (Android)
Original Canvas
(JavaScript)
Image

Image

canvas_shim.js
(JavaScript)
...

CanvasRenderingCon...
Replace Canvas 2D (Android)
HTML
Canvas

WebView
SurfaceView
Replace Canvas 2D (Android)
• Override Canvas.getContext(“2d”)
// canvas2d_shim.js
// Replace built-in function prototype ...
Replace Canvas 2D (Android)
• Override CanvasRendering2DContext
// Replace built-in CanvasRenderingContext2D prototype wit...
Replace Canvas 2D (Android)
• Override Image

// Replace built-in constructor of Image object with my own
Image = function...
Replace Canvas 2D (Android)
• Define Native Canvas / Register
// Define Bridge Interface
class NativeCanvas2DContext {
pub...
Replace Canvas 2D (Android)
• Install canvas2d_shim.js!
webview.setWebViewClient(new WebViewClient() {
@Override
public vo...
Demo
Lessons Learned
General Lessons
• Do as many implementations as possible in
javascript world
• Minimize Javascript ⬌ Native
communications...
Android Specific Lessons
• We Can’t Override Native Properties In
WebView

- Object.defineProperty Doesn’t Work for Native...
Q&A
125 고성능 web view-deview 2013 발표 자료_공유용
Upcoming SlideShare
Loading in …5
×

125 고성능 web view-deview 2013 발표 자료_공유용

29,360 views

Published on

Published in: Technology
  • If you need your papers to be written and if you are not that kind of person who likes to do researches and analyze something - you should definitely contact these guys! They are awesome ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! I do no use writing service very often, only when I really have problems. But this one, I like best of all. The team of writers operates very quickly. It's called ⇒ www.HelpWriting.net ⇐ Hope this helps!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2F90ZZC ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

125 고성능 web view-deview 2013 발표 자료_공유용

  1. 1. WebView 뛰어 넘기 부제: 고성능 WebView 만들기 박창현
  2. 2. About Us http://www.skplanet.com http://readme.skplanet.com
  3. 3. About Me • • • • • 단말 플랫폼 개발 Specialist 웹 플랫폼 개발 Specialist Android 보안 시스템 개발 Specialist Android/HTML5/Hybrid App Framework/... 현) SK planet / Mobile SW 개발 1팀 / 팀장
  4. 4. Contents • Why High-performance WebView? • Basic Tech. Idea for High-performance WebView • Demo • Lessons Learned
  5. 5. Why High-performance WebView?
  6. 6. Hybrid Apps. Become More Popular
  7. 7. What is Hybrid Application? Native Web WebView
  8. 8. • A Part of Android Fr ag m en Framework • Different from Web Browser (Chrome) • Less Powerful Than Web Browser (Chrome...) • Web Standard Compatibility - Depend On Android OS Version ta tio n WebView Is ... • A Part of iOS • Different from Web Browser (Safari) • Less Powerful Than Web Browser (Safari) • Web Standard Compatibility - Depend On iOS Version
  9. 9. Web Standard Compatibility for WebView Web Audio/Vi Web Canvas Worker deo Sockets s Web Audio Web Notificat WebGL ion GB O △ X X X X X ICS O △ X X X X X JB O △ △ X X X X
  10. 10. Web Standard Compatibility for WebView Web Audio/Vi Web Canvas Worker deo Sockets s Web Audio Web Notificat WebGL ion 5.0 O △ O △ X X X 6.0 O △ O O O X X 7.0 O △ O O O X X
  11. 11. Hybrid App’s Problems Are ... “We have to make several versions of in-app web contents for each android/iOS version.” Fragmentation “We need Web Worker feature for our Performance can support contents. But because only iOS Web Worker spec at this time, we can’s support android devices.”
  12. 12. We Need To Have Special WebView Provide The Same Web Standards Independent of OS version and Manufacturers Should Be Faster Than Native
  13. 13. Basic Technical Ingredient
  14. 14. We Need To Know ... • How To Call JavaScript Function From Native • How To Call Native Function From JavaScript
  15. 15. Android • onPageFinished + bookmarklet webview.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { // evaluate your javascript code here! view.loadUrl(“javascript:.... “); } });
  16. 16. Android • addJavascriptInterface //Define Bridge Class class MyBridgeClass { public void foo(final String args) { // do something } } webview.addJavascriptInterface(new MyBridgeClass(), “MyBridge”); // In javascript code window.MyBride.foo(“hello world”);
  17. 17. iOS • webViewDidFinishLoad + stringByEvaluatingJavaScriptFromString //Insert my own javascript codes like this: - (void)webViewDidFinishLoad:(UIWebView *)webView { outputString = [webView stringByEvaluatingJavaScriptFromString:@"whatever js code I want to evaluate"]; }
  18. 18. iOS • shouldStartLoadWithRequest //Insert my own javascript codes like this: - (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType: UIWebViewNavigationType)navigationType { if ([[[request URL] absoluteString] hasPrefix:@"skp:"]) { // do my job return NO; } return YES; } //Javascript code var iframe = document.createElement("IFRAME"); iframe.setAttribute("src", "skp:myBridgeFunction"; document.documentElement.appendChild(iframe); iframe.parentNode.removeChild(iframe); iframe = null;
  19. 19. Add & Replace
  20. 20. Web Sockets and Canvas 2D • Web Sockets - Android WebView Does Not Support - Add Web Sockets Features Into WebView • Canvas 2D - Android WebView’s Canvas 2D Is Extremely Slow - Replace Canvas 2D Features With My Own Implementation (with SurfaceView)
  21. 21. Add Web Socket (Android) WebSocket_shim.js WebSocket WebSocket ... NativeWebSocket WebView NativeWebSocketImpl NativeWebSocketImpl ... NativeWebSocket
  22. 22. Add Web Socket (Android) • Define Web Socket (JavaScript) // websocket_shim.js (function() { var store = {}; // Websocket constructor var WebSocket = window.WebSocket = function(url) { // Initialize web socket this.socketId = nativewebsocket.getInstance(url); WebSocket.store[this.socketId] = this; } // declare prototype method WebSocket.prototype.send = function(data) { // bind to native nativewebsocket.send(data, this.socketId); } ... // event dispatcher WebSocket.onopen = function(evt) { // dispatch event to proper instance WebSocket.store[evt.id].onopen(evt); } ... })();
  23. 23. Add Web Socket (Android) • Define Web Socket / Register / Callback(Java) // Define Bridge Interface class NativeWebSocket { class NativeWebSocketImpl { public String id; public void send(String data) { } public void onOpen(...) { webview.post(new Runnable() { @override public void run() { webview.loadUrl(“javascript:WebSocket.onopen({targetId:“ + id + “, data:” + “data + “});”); } }); } }; ... public void send(String data, String id) { } public String getInstance(String url) { hash.put(getId(), new NativeWebSocketImpl(url, id)); } } ... // Register NativeWebSocket webview.addJavascriptInterface(new NativeWebSocket(), “nativewebsocket”);
  24. 24. Add Web Socket (Android) • Install WebSocket_shim.js! webview.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { // evaluate your javascript code here! view.loadUrl(“javascript:“ + <WebSocket_shim.js 파일 내용>); } });
  25. 25. Replace Canvas 2D (Android) Original Canvas (JavaScript) Image Image canvas_shim.js (JavaScript) ... CanvasRenderingContext2D CanvasRenderingContext2D ... Canvas Canvas ... Image Image ... CanvasRenderingContext2D CanvasRenderingContext2D ... Canvas Canvas ... NativeCanvas2DContext WebView WebView Bitmap Bitmap ... SurfaceView SurfaceView ... NativeCanvas2DContext WebKit WebKit
  26. 26. Replace Canvas 2D (Android) HTML Canvas WebView SurfaceView
  27. 27. Replace Canvas 2D (Android) • Override Canvas.getContext(“2d”) // canvas2d_shim.js // Replace built-in function prototype with your own HTMLCanvasElement.prototype.getContext = function(getCtxOld) { return function (val) { var ctx; ctx = getCtxOld.apply(this, arguments); if (val == ‘2d’) { // make Native Canvas NativeCanvas2DContext.createNativeCanvas(...); // Object Instance Mixin } return ctx; }; }(HTMLCanvasElement.prototype.getContext);
  28. 28. Replace Canvas 2D (Android) • Override CanvasRendering2DContext // Replace built-in CanvasRenderingContext2D prototype with your own CanvasRenderingContext2D.prototype.fillText = function(..) { NativeCanvas2DContext.fillText(...); }; CanvasRenderingContext2D.prototype.drawImage = function(..) { if (arguments.length == 9) { NativeCanvas2DContext.drawImage(...); } else if (arguments.length == 3) { ... } else { } };
  29. 29. Replace Canvas 2D (Android) • Override Image // Replace built-in constructor of Image object with my own Image = function() { var image = {}; var imageId = NativeCanvas2DContext.getImageId(); image.__defineSetter__("src", function(val) { NativeCanvas2DContext.setImageSrc(imageId, val); this._src = val; }); image.__defineGetter__("width", function() { return NativeCanvas2DContext.getImageWidth(imageId); }); image.__defineGetter__("height", function() { return NativeCanvas2DContext.getImageHeight(imageId); }); ... return image; };
  30. 30. Replace Canvas 2D (Android) • Define Native Canvas / Register // Define Bridge Interface class NativeCanvas2DContext { public SurfaceView nativeView; public Bitmap image; public void createCanvas(int width, int height) { ... } public void fillText(..) { ... } public void drawImage(..) { ... } public void drawArc(..) { ...} ... public String getImageId() { ... } public void setImageSrc(..) { ... } ... } ... // Register NativeCanvas2DContext webview.addJavascriptInterface(new NativeCanvas2DContext(), “NativeCanvas2DContext”);
  31. 31. Replace Canvas 2D (Android) • Install canvas2d_shim.js! webview.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { // evaluate your javascript code here! view.loadUrl(“javascript:“ + <canvas2d_shim.js 파일 내용>); } });
  32. 32. Demo
  33. 33. Lessons Learned
  34. 34. General Lessons • Do as many implementations as possible in javascript world • Minimize Javascript ⬌ Native communications • Watch out threads (PostMessage)
  35. 35. Android Specific Lessons • We Can’t Override Native Properties In WebView - Object.defineProperty Doesn’t Work for Native Properties • Object Instance Mixin - Add Getter/Setter into CanvasRendering2DContext’s Instance • Object.defineProperty bugs - Use __defineGetter__, __defineSetter__ instead
  36. 36. Q&A

×