Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Vitaliy Zasadnyy

June 14, 2013
Tweet

More Decks by Vitaliy Zasadnyy

Other Decks in Programming

Transcript

  1. ANDROID WORKSHOP
    WORKING WITH WEBVIEW
    Vitaliy Zasadnyy
    ADD Ankara, June 14-15

    View full-size slide

  2. ABOUT ME
    @zasadnyy

    View full-size slide

  3. PREHISTORY
    10 games

    View full-size slide

  4. OUR MMO GAMES

    View full-size slide

  5. TASK FOR TODAY
    ● provide custom layout
    ● show loading screen
    ● fancy progress dialog
    ● replace some features with native analogs
    ● Game container for

    View full-size slide

  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()

    View full-size slide

  7. WebView API
    Setting the Delegate
    void setWebViewClient(WebViewClient client)
    void setWebChromeClient(WebChromeClient client)

    View full-size slide

  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)

    View full-size slide

  9. WebChromeClient API
    Event Callbacks
    boolean onJs...()
    void onProgressChanged(WebView view, int
    newProgress)

    View full-size slide

  10. T1: CUSTOM LAYOUT
    web android

    View full-size slide

  11. T1: CUSTOM LAYOUT
    easy way == client side way
    @Override
    public void onPageFinished(WebView view, String url) {
    view.loadUrl("javascript:{ /* js source */}");
    }

    View full-size slide

  12. T1: CUSTOM LAYOUT: LET'S DO IT!

    View full-size slide

  13. T1: CUSTOM LAYOUT
    easy way == client side way
    @Override
    public void onPageFinished(WebView view, String url) {
    ...
    view.loadUrl("javascript:{ /* js source */}");
    }
    performance drawback

    View full-size slide

  14. T1: CUSTOM LAYOUT
    next idea: custom user-agent

    View full-size slide

  15. T1: CUSTOM LAYOUT
    @Override
    public boolean shouldOverrideUrlLoading(
    WebView view, String url) {
    Map extraHeaders =
    new HashMap();
    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

    View full-size slide

  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
    }
    ...
    }

    View full-size slide

  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

    View full-size slide

  18. T1: CUSTOM LAYOUT
    problem 3:
    solution 3:
    post methods (e.g. forms)
    there is no solution
    AOSP: Issue 9122

    View full-size slide

  19. T1: CUSTOM LAYOUT: LET'S DO IT!

    View full-size slide

  20. T2: LOADING SCREEN

    starts at game launch

    disappears only when
    first page is loaded

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  23. T2: LOADING SCREEN: LETS DO IT!

    View full-size slide

  24. T3: FANCY PROGRESS DIALOG
    void onProgressChanged(WebView view, int progress){
    // set progress
    }
    progress == 100 ?!

    View full-size slide

  25. T3: FANCY PROGRESS DIALOG: LET'S DO IT!

    View full-size slide

  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!");
    }");
    }
    }
    }

    View full-size slide

  27. THANKS FOR YOUR ATTENTION!
    QUESTIONS?
    checkout this and other presentations at:
    zasadnyy.com/slides/

    View full-size slide