App Integration

App

To run Flarie Studio games in your app you need to create a webview that supports custom interfaces and load your game url in the webview. WKWebView would be our recommended option for iOS. 

[recommendation] - in Flarie Studio you can enable Instruction Views. These Instruction View may include tutorial videos. set allowsInlineMediaPlayback in order to prevent the video going into full screen mode.

 

[App] iOS - Swift

import WebKit

class webGames: UIViewController, WKScriptMessageHandler, WKUIDelegate {

  var webView: WKWebView!
  var contentController = WKUserContentController()

  override func viewDidLoad() {
    // this will add support for the callbacks, meaning you will receive a notification with json data for all callbacks
    contentController.add(self, name: "callback")

    let config = WKWebViewConfiguration()
    config.allowsInlineMediaPlayback = true // recommended to prevent full screen video
    config.userContentController = contentController

    webView = WKWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: viewm.frame.height), configuration: config)
    self.view.addSubview(webView)

    // don’t forget to set the WKUIDelegate otherwise the target='_blank' won’t work
    webView.uiDelegate = self

    let gameUrl = Foundation.URL(string: "YOUR_GAME_URL")
    let gameUrlRequest = URLRequest(url: gameUrl!, cachePolicy: NSURLRequest.CachePolicy.reloadIgnoringCacheData, timeoutInterval: 20)
    webView.load(gameUrlRequest)
  }

  func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
      print("data: \(message.body)")
  }

  // allow target _blank for external urls
  func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
    if let frame = navigationAction.targetFrame,
        frame.isMainFrame {
        return nil
    }

    if let url = navigationAction.request.url {
        // this will allow target _blank on urls
        UIApplication.shared.open(URL(string: "\(url)")!)
    } else {
        webView.load(navigationAction.request)
    }
    return nil
  }
}

[APP] Android - Java


public class Demo {
    WebView webView;
    
    private void setupWebView() {
        webView = findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new WebAppInterface(context), "Android");
        webView.loadUrl("YOUR_GAME_URL");
    }

    private Handler handler = new Handler();
    
    public class WebAppInterface {
        @JavascriptInterface
        public void callback(final String message) {
            handler.post(new Runnable() {
                @Override
                public void run() {
                    Log.d("", "Data: " + message);
                }
            });
        }
    }
}

[APP]  React Native


import React, { useRef } from 'react';
import { SafeAreaView, StyleSheet, Linking } from 'react-native';
import { WebView, WebViewNavigation } from 'react-native-webview';

const App = () => {
  const webViewRef = useRef(null);

  // Handle post messages (callbacks) sent from the webView
  const onMessage = (event: any) => {
    const message = event.nativeEvent.data;
    console.log(message);
    if (message === 'game') {
      console.log('the game has ended');
    }
  };

  // allows external links (target='_blank') always open in the default browser
  const handleExternalLink = (event: WebViewNavigation) => {
    if (event.navigationType === 'click') {
      Linking.openURL(event.url);
      return false;
    }
    return true;
  };

  return (
  <SafeAreaView style={styles.container}>
      <WebView
        ref={webViewRef}
        source= // Replace with your actual game URL
        onMessage={onMessage}
        onShouldStartLoadWithRequest={handleExternalLink}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        allowsInlineMediaPlayback={false}
        style=
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default App;