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:
<!-- Add our SDK to your web app -->
<script>
// Initialize OneSDK
const oneSdk = await OneSDK({
session: {
token: YOUR_TOKEN
},
// Additional configuration options
});
// rest of your OneSDK Implementation
</script>
2
Implement in Native
- Android
- iOS
Permissions Setup
First, add required permissions to yourAndroidManifest.xml:<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Camera permissions -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<!-- Microphone permissions -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<!-- Location permissions -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
</manifest>
WebView Implementation
Add WebView support with device access permissions:class WebViewActivity : AppCompatActivity() {
private lateinit var webView: WebView
private val PERMISSION_REQUEST_CODE = 1234
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_webview)
// Request permissions
requestPermissions()
webView = findViewById(R.id.webView)
// Enable JavaScript
webView.settings.apply {
javaScriptEnabled = true
domStorageEnabled = true
allowFileAccess = true
allowContentAccess = true
mediaPlaybackRequiresUserGesture = false // Allow media autoplay
}
// Configure WebChromeClient for handling permissions
webView.webChromeClient = object : WebChromeClient() {
// Camera permission request
override fun onPermissionRequest(request: PermissionRequest) {
runOnUiThread {
request.grant(request.resources)
}
}
// Geolocation permission request
override fun onGeolocationPermissionsShowPrompt(
origin: String,
callback: GeolocationPermissions.Callback
) {
callback.invoke(origin, true, false)
}
}
// Load your web app
webView.loadUrl("https://your-webapp-url.com")
}
private fun requestPermissions() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
requestPermissions(
arrayOf(
Manifest.permission.CAMERA,
Manifest.permission.RECORD_AUDIO,
Manifest.permission.ACCESS_FINE_LOCATION
),
PERMISSION_REQUEST_CODE
)
}
}
override fun onRequestPermissionsResult(
requestCode: Int,
permissions: Array<String>,
grantResults: IntArray
) {
super.onRequestPermissionsResult(requestCode, permissions, grantResults)
when (requestCode) {
PERMISSION_REQUEST_CODE -> {
if (grantResults.isNotEmpty() &&
grantResults.all { it == PackageManager.PERMISSION_GRANTED }) {
// All permissions granted, proceed with WebView setup
} else {
// Handle permission denial
}
}
}
}
}
Permissions Setup
First, add required permissions to yourInfo.plist:<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<!-- Camera permissions -->
<key>NSCameraUsageDescription</key>
<string>We need access to your camera for [YOUR REASON]</string>
<!-- Microphone permissions -->
<key>NSMicrophoneUsageDescription</key>
<string>We need access to your microphone for [YOUR REASON]</string>
<!-- Location permissions -->
<key>NSLocationWhenInUseUsageDescription</key>
<string>We need access to your location for [YOUR REASON]</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>We need access to your location for [YOUR REASON]</string>
</dict>
</plist>
WebView Implementation
Implement WebView with device access permissions:import WebKit
import AVFoundation
import CoreLocation
class WebViewController: UIViewController, WKNavigationDelegate, CLLocationManagerDelegate {
var webView: WKWebView!
private let locationManager = CLLocationManager()
override func viewDidLoad() {
super.viewDidLoad()
// Configure WebView
let configuration = WKWebViewConfiguration()
configuration.allowsInlineMediaPlayback = true
// Configure camera and microphone access
configuration.mediaTypesRequiringUserActionForPlayback = []
// Add script for location access
let contentController = configuration.userContentController
contentController.add(self, name: "locationHandler")
webView = WKWebView(frame: view.bounds, configuration: configuration)
webView.navigationDelegate = self
webView.configuration.allowsInlineMediaPlayback = true
// Set up location manager
locationManager.delegate = self
locationManager.desiredAccuracy = kCLLocationAccuracyBest
view.addSubview(webView)
// Request permissions
requestPermissions()
// Load your web app
if let url = URL(string: "https://your-webapp-url.com") {
let request = URLRequest(url: url)
webView.load(request)
}
}
private func requestPermissions() {
// Request camera and microphone permissions
AVCaptureDevice.requestAccess(for: .video) { granted in
if granted {
// Camera permission granted
}
}
AVCaptureDevice.requestAccess(for: .audio) { granted in
if granted {
// Microphone permission granted
}
}
// Request location permission
locationManager.requestWhenInUseAuthorization()
}
// Handle location updates
func locationManager(_ manager: CLLocationManager,
didUpdateLocations locations: [CLLocation]) {
guard let location = locations.last else { return }
let script = "updateLocation(\(location.coordinate.latitude), \(location.coordinate.longitude))"
webView.evaluateJavaScript(script, completionHandler: nil)
}
}
// Extend for WKScriptMessageHandler to handle location requests
extension WebViewController: WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController,
didReceive message: WKScriptMessage) {
if message.name == "locationHandler" {
locationManager.startUpdatingLocation()
}
}
}
Establishing Communication Between Native and Web Layers
- Android
- iOS
To enable communication from web to native:
class WebAppInterface(private val context: Context) {
@JavascriptInterface
fun onEvent(data: String) {
// Handle events from web app
}
}
// Add the interface to WebView
webView.addJavascriptInterface(WebAppInterface(this), "Android")
Enable web-to-native communication in iOS:
// Configure message handler
configuration.userContentController.add(self, name: "iOSNative")
// Handle messages
extension WebViewController: WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController,
didReceive message: WKScriptMessage) {
if message.name == "iOSNative" {
// Handle message from web app
}
}
}