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
   

   View Slide

2. ABOUT ME
   @zasadnyy
   

   View Slide

3. PREHISTORY
   10 games
   

   View Slide

4. OUR MMO GAMES
   

   View Slide

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

   View 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 Slide

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

   View 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 Slide

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

   View Slide

10. T1: CUSTOM LAYOUT
    web android
    

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View Slide

20. T2: LOADING SCREEN
    ●
    starts at game launch
    ●
    disappears only when
    first page is loaded
    

    View 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 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 Slide

23. T2: LOADING SCREEN: LETS DO IT!
    

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide