Porting web MMO games to native platforms. Working with WebView

Recording: http://www.paylas.com/video/android-gelistirici-gunleri-vitaliy-zasadnyy

Presentation about porting Web MMO games to Android and iOS. Sharing own experience and best practices.

Transcript

1. ANDROID WORKSHOP WORKING WITH WEBVIEW Vitaliy Zasadnyy ADD Ankara, June 14-15
2. ABOUT ME @zasadnyy
3. PREHISTORY 10 games
4. OUR MMO GAMES
5. TASK FOR TODAY • provide custom layout • show loading screen • fancy progress dialog • replace some features with native analogs • Game container for
6. WebView API Loading Content void loadUrl(String url) void loadData(String data, String mimeType, String mimeType) void postUrl(String url, byte[] postData) void reload()
7. WebView API Setting the Delegate void setWebViewClient(WebViewClient client) void setWebChromeClient(WebChromeClient client)
8. WebViewClient API Loading Content Callbacks void onPageStarted(WebView view, String url, Bitmap favicon) void onPageFinished(WebView view, String url) void onReceivedError(WebView view, int errorCode, String description, String failingUrl) boolean shouldOverrideUrlLoading(WebView view, String url)
9. WebChromeClient API Event Callbacks boolean onJs...() void onProgressChanged(WebView view, int newProgress)
10. T1: CUSTOM LAYOUT web android
11. T1: CUSTOM LAYOUT easy way == client side way @Override public void onPageFinished(WebView view, String url) { view.loadUrl("javascript:{ /* js source */}"); }
12. T1: CUSTOM LAYOUT: LET'S DO IT!
13. T1: CUSTOM LAYOUT easy way == client side way @Override public void onPageFinished(WebView view, String url) { ... view.loadUrl("javascript:{ /* js source */}"); } performance drawback
14. T1: CUSTOM LAYOUT next idea: custom user-agent
15. T1: CUSTOM LAYOUT @Override public boolean shouldOverrideUrlLoading( WebView view, String url) { Map<String, String> extraHeaders = new HashMap<String, String>(); extraHeaders.put( EXTRA_HEADER_CLIENT_TYPE, EXTRA_HEADER_VALUE)); view.loadUrl(url, extraHeaders); return true; } cancel request load with extra header better idea: custom headers
16. T1: CUSTOM LAYOUT problem 1: yourWebWiew.loadUrl("some url"); solution 1: public class YourWebView extends WebView { ... @Override public void loadUrl(String url) { // load url with extra headers } ... }
17. T1: CUSTOM LAYOUT problem 2: yourWebWiew.reload(); solution 2: public class YourWebView extends WebView { ... @Override public void reload() { String url = getUrl(); // load url with extra headers } ... } get current url not the best
18. T1: CUSTOM LAYOUT problem 3: solution 3: post methods (e.g. forms) there is no solution AOSP: Issue 9122
19. T1: CUSTOM LAYOUT: LET'S DO IT!
20. T2: LOADING SCREEN • starts at game launch • disappears only when first page is loaded
21. T2: LOADING SCREEN public class YourWebViewClient extends WebViewClient { ... @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { // show loading dialog } @Override public void onPageFinished(WebView view, String url) { // hide loading dialog } ... } problem
22. T2: LOADING SCREEN public class YourWebViewClient extends WebViewClient { private String mStartUrl; ... @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { mStartUrl = url; // show fullscreen loading dialog } @Override public void onPageFinished(WebView view, String url) { if (mStartUrl.equals(url)) // hide loading dialog else // redirect! } ... } fixed
23. T2: LOADING SCREEN: LETS DO IT!
24. T3: FANCY PROGRESS DIALOG void onProgressChanged(WebView view, int progress){ // set progress } progress == 100 ?!
25. T3: FANCY PROGRESS DIALOG: LET'S DO IT!
26. T3: REPLACE SOME FEATURES public class NravoWebViewClient extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { // override behavior here } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) {} @Override public void onPageFinished(WebView view, String url) { if (!mIsRedirect) { view.loadUrl("javascript: { alert("Horray!"); }"); } } }
27. THANKS FOR YOUR ATTENTION! QUESTIONS? checkout this and other presentations at: zasadnyy.com/slides/