Close button

When the branded game is running in the app's Webview, you can enable the Webview to close when the player presses the Close button.

The following content explains how to allow the Webview to close in the App when the Player presses the Close button on the result screen after the game.

Android

The following is an example that shows the Close button on the result screen after the game, and we provide the button. It is not something the brand's app developer needs to prepare.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Game</title>
</head>
<body>
    <h1>Welcome to the Mini Game</h1>
    <!-- Close button -->
    <button onclick="closeWebView()">Close</button>

    <script type="text/javascript">
        function closeWebView() {
            // Call Android's closeWebView method.
            Android.closeWebView();
        }
    </script>
</body>
</html>

They are asking to set up a JavaScript interface in Android code. In MainActivity.java, add a JavaScript interface that will be called from the HTML page and will execute the action to close the WebView.

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.JavascriptInterface;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);
        webView.setWebViewClient(new WebViewClient()); // Set to open links in WebView
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true); // Enable JavaScript

        // Add JavaScript interface
        webView.addJavascriptInterface(new WebAppInterface(), "Android");

        String url = "https://branded.mini-games.io/?php=landing@UserID_Data&campaign_no=0123456";
        webView.loadUrl(url); // Load URL
    }

    // JavaScript interface class
    public class WebAppInterface {
        @JavascriptInterface
        public void closeWebView() {
            // Logic to close the WebView
            finish(); // Finish the current activity
        }
    }
}

Overall operation explanation:

When the user opens the corresponding HTML page as a Branded Game in the WebView, a "Close" button is displayed on the result screen after the game..
When the user clicks the "Close" button, JavaScript calls Android.closeWebView().
This call connects to Android's closeWebView() method, where finish() is called to close the current activity, including the WebView.

With this implementation, pressing the "Close" button in the HTML will allow the WebView window itself to close.

iPhone (iOS)

The following is an example that shows the Close button on the result screen after the game, and we provide the button. It is not something the brand's app developer needs to prepare.

<button id="closeButton">Close</button>

<script type="text/javascript">
    document.getElementById("closeButton").addEventListener("click", function() {
        // Sending a message to the WebView.
        window.webkit.messageHandlers.closeWebView.postMessage(null);
    });
</script>

Here, JavaScript sends a message to the iOS app through the webkit.messageHandlers object.

Swift code to handle the JavaScript message

In the GameViewController, you need to implement a message handler to receive the JavaScript message and close the WebView. Below is an example:

import UIKit
import WebKit

class GameViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler {
    
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Configure WebView settings
        let webConfiguration = WKWebViewConfiguration()
        
        // Add message handler (handle “closeWebView”)
        webConfiguration.userContentController.add(self, name: "closeWebView")
        
        // Initialize WKWebView with settings
        webView = WKWebView(frame: self.view.frame, configuration: webConfiguration)
        webView.navigationDelegate = self
        self.view.addSubview(webView)
        
        // Load URL
        if let url = URL(string: "https://branded.mini-games.io/?php=landing@UserID_Data&campaign_no=0123456") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
    
    // Implement method to handle JavaScript message
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "closeWebView" {
            // Close WebView upon receiving the message
            self.dismiss(animated: true, completion: nil)
        }
    }
    
    deinit {
        // Remove message handler when the view controller is deallocated
        webView.configuration.userContentController.removeScriptMessageHandler(forName: "closeWebView")
    }
}

Key explanation:

JavaScript button: The line window.webkit.messageHandlers.closeWebView.postMessage(null); in JavaScript sends a message to the iOS app’s closeWebView handler.
Swift message handler: In GameViewController, implement the WKScriptMessageHandler protocol to receive messages from JavaScript. When the "closeWebView" message is received, self.dismiss(animated: true, completion: nil) is called to close the WebView.
Message handler setup: webConfiguration.userContentController.add(self, name: "closeWebView") registers a handler to process the "closeWebView" message.
Memory management: In the deinit block, remove the message handler when the view controller is deallocated to prevent memory leaks.

Conclusion: By following the steps above, you can add a "Close" button to the HTML, and when the user clicks the button, the WebView within the iOS app will close. The key to this solution is leveraging the ability of WKWebView to handle JavaScript messages via the WKScriptMessageHandler.

PreviousMobile App -> UserID and Webhook NextPlay & Redeem

Last updated 1 year ago