iOS WebView Bridge - Complete Documentation & Testing Interface

📖 Documentation & Quick Start

🎯 Purpose

This interface allows web developers to test and understand all available native iOS features accessible through the WebView JavaScript bridge. Each feature is documented with examples and implementation details.

⚡ Quick Start Guide

Follow these steps to get started:

Check Connection Status: Look for the green "iOS Bridge Connected" indicator
Navigate Tabs: Use the navigation to explore different features
Test Features: Click buttons to test native functionality
View Console: Check the Console tab for detailed logs
Copy Code: Use the provided code examples in your own implementation

🔧 Technical Requirements

Component	Requirement	Status
iOS Version	iOS 11.0+	Checking...
WebView Type	WKWebView	Checking...
Message Handler	WebAppInterface	Checking...
JavaScript Bridge	window.webkit.messageHandlers	Checking...

📝 Implementation Example

// Basic implementation of iOS bridge communication
function sendToIOS(method, params = {}) {
    if (window.webkit?.messageHandlers?.WebAppInterface) {
        const message = { method, ...params };
        window.webkit.messageHandlers.WebAppInterface.postMessage(message);
        console.log(`Sent to iOS: ${method}`, params);
    } else {
        console.error('iOS bridge not available');
    }
}

// Handle responses from iOS
function handleIOSAppResponse(response) {
    console.log('Response from iOS:', response);
    // Process the response based on your needs
}

🚨 Common Issues & Solutions

Bridge Not Available

Issue: "iOS Bridge Not Available" message appears

Solution: Ensure you're running this in the iOS app, not a regular browser. Check that WebAppInterface is properly initialized in the iOS code.

No Response from iOS

Issue: Buttons work but no response is received

Solution: Verify the handleIOSAppResponse function exists globally and check the iOS implementation for the specific method being called.

📱 Device Information & Capabilities

📋 Overview

Access device-specific information including unique identifiers, app version, and push notification tokens. This data is essential for user tracking, analytics, and push notifications.

🔑 Device Identifiers

// iOS Implementation
@objc func getUUID() {
    let uuid = UIDevice.current.identifierForVendor?.uuidString ?? ""
    sendResponseToJS(response: uuid)
}

@objc func getAppVersion() {
    let version = Bundle.main.infoDictionary?["CFBundleShortVersionString"] as? String ?? "Unknown"
    sendResponseToJS(response: version)
}

🔔 Push Notification Tokens

⚠️ Important Notes

UUID: This is unique per app installation and will change if the app is reinstalled

FCM Token: Required for Firebase Cloud Messaging. May be null if Firebase is not configured

OneSignal ID: Only available after OneSignal initialization and user subscription

🔊 Haptic Feedback

Provide tactile feedback to enhance user experience:

// Trigger haptic feedback
function testVibration(milliseconds) {
    sendToIOS('vibrate', { milliseconds: milliseconds });
}

// Note: On iOS, this uses UIImpactFeedbackGenerator
// The actual vibration duration may vary based on the device

🎨 UI Customization & Controls

🎯 Overview

Customize the iOS app's appearance including status bar colors, text colors, and fullscreen mode. These features help create a seamless, branded experience.

🎨 Status Bar Customization

Click a color to change the status bar background:

📝 Status Bar Text Color

// Change status bar color
function setStatusBarColor(hexColor) {
    sendToIOS('setStatusBarColor', { color: hexColor });
}

// Change status bar text color
function setStatusBarTextColor(useLightText) {
    sendToIOS('setStatusBarTextColor', { lightText: useLightText });
}

// Best practice: Use light text for dark colors
// and dark text for light colors for better readability

🖥️ Display Modes

💡 Tips

Full Screen: Hides status bar and home indicator. User can swipe to show them temporarily.

Secure Mode: May prevent screenshots on some devices (implementation varies by iOS version).

Color Contrast: Always ensure sufficient contrast between status bar color and text color.

🔔 Notifications & Alerts

📢 Overview

Display various types of notifications to users, from simple toasts to interactive dialogs and push notifications. Choose the right type based on urgency and user interaction needs.

💬 In-App Messages

Message Text This message will be used for toasts, snackbars, and alerts

// Different notification types
function showToast() {
    const message = document.getElementById('notificationMessage').value;
    sendToIOS('showToast', { 
        message: message, 
        duration: 3.0  // seconds
    });
}

function showSnackbar() {
    const message = document.getElementById('notificationMessage').value;
    sendToIOS('showSnackbar', { message: message });
}

function showAlert() {
    const message = document.getElementById('notificationMessage').value;
    sendToIOS('showAlertDialog', { 
        title: 'Important Notice', 
        message: message 
    });
}

📱 Push Notifications

Notification Title

Notification Body

📌 Notification Types Explained

Toast: Brief message that appears and disappears automatically. Non-intrusive.

Snackbar: Appears at the bottom with optional action button. Good for confirmations.

Alert Dialog: Modal dialog that requires user interaction. Use for important messages.

Push Notification: System-level notification. Appears even when app is in background.

🎭 Interactive Elements

// Create interactive dialog with multiple options
function showInteractiveDialog() {
    const buttons = [
        { title: 'Save', action: 'handleSave()' },
        { title: 'Delete', action: 'handleDelete()' },
        { title: 'Share', action: 'handleShare()' }
    ];
    
    sendToIOS('showInteractiveDialog', {
        title: 'What would you like to do?',
        message: 'Please select an action:',
        buttonsJson: JSON.stringify(buttons),
        cancelable: true
    });
}

// Handle button actions (called by iOS)
function handleSave() {
    console.log('Save action triggered');
}

function handleDelete() {
    console.log('Delete action triggered');
}

function handleShare() {
    console.log('Share action triggered');
}

🔒 Security Features

🛡️ Overview

Comprehensive security features to protect sensitive content from screenshots, copying, and unauthorized access. Essential for apps handling confidential information like exams, medical records, or financial data.

📸 Screenshot Protection

🔍 Checking security status...

How Screenshot Protection Works

Default Mode: Protection is automatically enabled for URLs containing: /quizapp/, /courses/, /exam/, /test/, /protected/

Manual Override: Use Enable/Disable buttons to force protection on ALL pages regardless of URL

Reset: Returns to default URL-based protection

// Screenshot protection implementation
function enableScreenshotProtection() {
    // This will protect ALL pages, regardless of URL
    sendToIOS('enableScreenshotProtection');
}

function disableScreenshotProtection() {
    // This will disable protection on ALL pages
    sendToIOS('disableScreenshotProtection');
}

function resetScreenshotProtection() {
    // Returns to default URL-based protection
    sendToIOS('resetScreenshotProtection');
}

// Check current protection status
function checkSecurityStatus() {
    sendToIOS('checkScreenshotProtectionStatus');
}

🧪 Test Security Features

🔐 Content Protection

CSS Selector for Protected Elements Elements matching this selector will have copy/select protection applied

🚨 Security Best Practices

• Enable protection before displaying sensitive content

• Use CSS classes to mark protected elements

• Implement server-side validation for critical operations

• Consider disabling right-click and text selection via CSS

• Monitor for security violations and log them

📊 Security Event Log

Security Events

--:--:-- ℹ️ Security monitoring active

📤 Sharing & External Actions

🎯 Overview

Enable users to share content, rate your app, and open external links. These features help with app growth, user engagement, and seamless integration with iOS.

📱 Share Content

Text to Share

// Share text content
function shareText() {
    const text = document.getElementById('shareText').value;
    sendToIOS('shareText', { text: text });
}

// Share app link with custom message
function shareApp() {
    sendToIOS('shareApp', { 
        customText: 'Check out this amazing app!' 
    });
}

// The iOS share sheet will automatically include:
// - Copy to clipboard
// - Share to Messages, Mail, WhatsApp, etc.
// - Save to Notes
// - More options based on installed apps

⭐ App Store Actions

💡 Review Guidelines

• Don't ask for reviews too frequently (max 3 times per year)

• Time the request after positive experiences

• iOS may not show the dialog if shown recently

• Users can disable review prompts in Settings

🌐 External Links

URL to Open This will open in Safari or the default browser

📞 System Actions

// System actions using URL schemes
function makePhoneCall() {
    window.location.href = 'tel:+1234567890';
}

function sendSMS() {
    window.location.href = 'sms:+1234567890&body=Hello from WebView';
}

function sendEmail() {
    window.location.href = 'mailto:example@email.com?subject=Hello&body=Sent from WebView';
}

// These URL schemes are handled by iOS automatically

🎯 OneSignal Push Notifications

📱 Overview

OneSignal integration for advanced push notification features including user segmentation, tags, and external user ID management.

👤 User Management

External User ID Link OneSignal player to your backend user system

Email Address

Phone Number (without country code) Country code will be added automatically (+1 for US)

🏷️ User Tags & Segmentation

Tags allow you to segment users for targeted notifications:

// Set user tags for segmentation
function setBasicTags() {
    const tags = {
        'user_type': 'free',
        'app_version': '2.0',
        'language': 'en',
        'last_active': new Date().toISOString()
    };
    
    sendToIOS('setOneSignalTags', { 
        tags: JSON.stringify(tags), 
        userId: document.getElementById('externalUserId').value 
    });
}

// Premium user tags example
function setPremiumUserTags() {
    const tags = {
        'user_type': 'premium',
        'subscription_end': '2024-12-31',
        'features_enabled': 'all',
        'notification_preference': 'immediate'
    };
    
    sendToIOS('setOneSignalTags', { 
        tags: JSON.stringify(tags), 
        userId: document.getElementById('externalUserId').value 
    });
}

📊 Subscription Status

🔧 Implementation Tips

• Always set External User ID after user login

• Use tags to create user segments (e.g., premium users, specific interests)

• Update tags when user preferences change

• Phone numbers require SMS permission in OneSignal dashboard

💻 Debug Console

🔍 Overview

Real-time logging of all iOS bridge communications. Use this to debug issues and understand the flow of data between JavaScript and native iOS code.

Auto-scroll

--:--:-- ℹ️ Console initialized. All iOS bridge communication will appear here.

🎮 Console Commands

Type commands directly in your browser console:

// Test any iOS method directly
sendToIOS('vibrate', { milliseconds: 200 });

// Check bridge status
console.log('Bridge available:', !!window.webkit?.messageHandlers?.WebAppInterface);

// Get all available methods
console.log('Available handlers:', Object.keys(window.webkit?.messageHandlers || {}));

// Simulate iOS response
handleIOSAppResponse('Test response from iOS');

// Log levels
logToConsole('Test message', 'info');    // ℹ️ Info
logToConsole('Success!', 'success');     // ✅ Success
logToConsole('Warning!', 'warning');     // ⚠️ Warning
logToConsole('Error!', 'error');         // ❌ Error

🚀 iOS WebView Bridge Interface

📖 Documentation & Quick Start

🎯 Purpose

⚡ Quick Start Guide

🔧 Technical Requirements

📝 Implementation Example

🚨 Common Issues & Solutions

Bridge Not Available

No Response from iOS

📱 Device Information & Capabilities

📋 Overview

🔑 Device Identifiers

🔔 Push Notification Tokens

⚠️ Important Notes

🔊 Haptic Feedback

🎨 UI Customization & Controls

🎯 Overview

🎨 Status Bar Customization

📝 Status Bar Text Color

🖥️ Display Modes

💡 Tips

🔔 Notifications & Alerts

📢 Overview

💬 In-App Messages

📱 Push Notifications

📌 Notification Types Explained

🎭 Interactive Elements

🔒 Security Features

🛡️ Overview

📸 Screenshot Protection

How Screenshot Protection Works

🧪 Test Security Features

🔐 Content Protection

🚨 Security Best Practices

📊 Security Event Log

📤 Sharing & External Actions

🎯 Overview

📱 Share Content

⭐ App Store Actions

💡 Review Guidelines

🌐 External Links

📞 System Actions

🎯 OneSignal Push Notifications

📱 Overview

👤 User Management

🏷️ User Tags & Segmentation

📊 Subscription Status

🔧 Implementation Tips

💻 Debug Console

🔍 Overview

🎮 Console Commands