Native Integration

Learn how to integrate FrankieOne’s Web SDK into native mobile apps via WebView. This approach lets you run your OneSDK web implementation within a native WebView container, combining web and native functionality.

Prerequisites
  • You have installed OneSDK in your web app
  • Android/iOS development experience
  • Your Native App has Camera, Microphone, and Location permissions
  • Your Web App is live

Implementation Steps

1

Setup Web WebAppInterface

First, ensure your web app is properly configured with OneSDK:

1<!-- Add our SDK to your web app -->
2<script>
3    // Initialize OneSDK
4    const oneSdk = await OneSDK({
5			session: {
6				token: YOUR_TOKEN
7			},
8			// Additional configuration options
9    });
10
11		// rest of your OneSDK Implementation
12</script>
2

Implement in Native

Permissions Setup

First, add required permissions to your AndroidManifest.xml:

1<?xml version="1.0" encoding="utf-8"?>
2<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3    <!-- Camera permissions -->
4    <uses-permission android:name="android.permission.CAMERA" />
5    <uses-feature android:name="android.hardware.camera" />
6    
7    <!-- Microphone permissions -->
8    <uses-permission android:name="android.permission.RECORD_AUDIO" />
9    
10    <!-- Location permissions -->
11    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
12    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
13</manifest>

WebView Implementation

Add WebView support with device access permissions:

1class WebViewActivity : AppCompatActivity() {
2    private lateinit var webView: WebView
3    private val PERMISSION_REQUEST_CODE = 1234
4
5    override fun onCreate(savedInstanceState: Bundle?) {
6        super.onCreate(savedInstanceState)
7        setContentView(R.layout.activity_webview)
8
9        // Request permissions
10        requestPermissions()
11
12        webView = findViewById(R.id.webView)
13        
14        // Enable JavaScript
15        webView.settings.apply {
16            javaScriptEnabled = true
17            domStorageEnabled = true
18            allowFileAccess = true
19            allowContentAccess = true
20            mediaPlaybackRequiresUserGesture = false  // Allow media autoplay
21        }
22
23        // Configure WebChromeClient for handling permissions
24        webView.webChromeClient = object : WebChromeClient() {
25            // Camera permission request
26            override fun onPermissionRequest(request: PermissionRequest) {
27                runOnUiThread {
28                    request.grant(request.resources)
29                }
30            }
31
32            // Geolocation permission request
33            override fun onGeolocationPermissionsShowPrompt(
34                origin: String,
35                callback: GeolocationPermissions.Callback
36            ) {
37                callback.invoke(origin, true, false)
38            }
39        }
40
41        // Load your web app
42        webView.loadUrl("https://your-webapp-url.com")
43    }
44
45    private fun requestPermissions() {
46        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
47            requestPermissions(
48                arrayOf(
49                    Manifest.permission.CAMERA,
50                    Manifest.permission.RECORD_AUDIO,
51                    Manifest.permission.ACCESS_FINE_LOCATION
52                ),
53                PERMISSION_REQUEST_CODE
54            )
55        }
56    }
57
58    override fun onRequestPermissionsResult(
59        requestCode: Int,
60        permissions: Array<String>,
61        grantResults: IntArray
62    ) {
63        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
64        when (requestCode) {
65            PERMISSION_REQUEST_CODE -> {
66                if (grantResults.isNotEmpty() && 
67                    grantResults.all { it == PackageManager.PERMISSION_GRANTED }) {
68                    // All permissions granted, proceed with WebView setup
69                } else {
70                    // Handle permission denial
71                }
72            }
73        }
74    }
75}

Establishing Communication Between Native and Web Layers

To enable communication from web to native:

1class WebAppInterface(private val context: Context) {
2    @JavascriptInterface
3    fun onEvent(data: String) {
4        // Handle events from web app
5    }
6}
7
8// Add the interface to WebView
9webView.addJavascriptInterface(WebAppInterface(this), "Android")
Built with