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
×

of

125 고성능 web view-deview 2013 발표 자료_공유용 Slide 1 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 2 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 3 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 4 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 5 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 6 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 7 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 8 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 9 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 10 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 11 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 12 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 13 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 14 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 15 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 16 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 17 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 18 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 19 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 20 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 21 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 22 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 23 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 24 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 25 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 26 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 27 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 28 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 29 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 30 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 31 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 32 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 33 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 34 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 35 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 36 125 고성능 web view-deview 2013 발표 자료_공유용 Slide 37
Upcoming SlideShare
하이브리드앱 성능 극복
Next
Download to read offline and view in fullscreen.

19 Likes

Share

Download to read offline

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

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

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

    Aug. 30, 2017
  • JungwoonPark

    Apr. 5, 2017
  • ssuserb00726

    Jun. 26, 2016
  • ssuser3eacd5

    Jun. 13, 2016
  • ssuser0dd69d

    Nov. 11, 2015
  • underbellpark

    Oct. 20, 2015
  • mrbin95

    Oct. 20, 2015
  • seohoseok14

    Aug. 25, 2015
  • KwonGiwoong

    Aug. 18, 2015
  • terrance182

    Jul. 15, 2015
  • sunwookpark982

    Jul. 14, 2015
  • ssuserd63648

    Jan. 25, 2015
  • ssuser172759

    Jan. 1, 2015
  • SeungMokOh

    Dec. 28, 2014
  • coalbin

    Nov. 21, 2014
  • darthJun

    Oct. 31, 2014
  • rancett

    Oct. 12, 2014
  • seokjoonyun9

    Aug. 24, 2014
  • kexplo

    Oct. 21, 2013

Views

Total views

29,857

On Slideshare

0

From embeds

0

Number of embeds

24,647

Actions

Downloads

93

Shares

0

Comments

0

Likes

19

×