Porting web MMO games to native platforms. Working with WebView

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.

F456ed67b75e58e533d11b301f5f62b5?s=128

Vitaliy Zasadnyy

June 14, 2013
Tweet

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/