APP中Web容器的核心實現

2023-07-01 06:00:45
 
現在的業務型APP中,採用純原生開發策略的已經很少了,大部分都使用的混合開發。如原生,H5,ReactNative,Flutter,Weex它們之間任意的組合就構成了混合開發。
其中原生+H5是出現最早的,老牌混合方案,即使過來多年,在現在的混合開發方案中H5也是使用率非常高的。在APP中嵌入Web容器,將更新迭代快,使用者互動少的頁面採用H5開發,將互動性強,穩定的部分使用原生開發是Hybird開發常用的策略。
Webview通過WebKit來渲染Web頁面,通過JavaScriptCore執行JS程式碼與使用者互動,這篇文章主要講Hybird方案中Web容器的JS與原生互動的部分。
 
JSBridge原生與Web通訊
 
為什麼需要JSBridge雙端通訊?
在Hybrid開發模式下,H5頁面經常需要使用到Native的功能,比如開啟二維條碼掃描、呼叫本地相簿、獲取使用者資訊等,同時Native也需要向Web端傳送推播、更新狀態等。
JavaScript執行環境與原生執行環境是隔離的,JavaScript是執行在單獨的JS Context中(Webview容器、JSCore等)。
WebView是一個原生UI控制元件,可以通過載入url展示一個網頁,它是執行在原生中。所以需要有一種機制實現Native端和Web端的雙向通訊。
JSBridge主要做兩件事:
1.將Native端原生介面封裝成JavaScript介面,讓js呼叫。
2.將Web端JavaScript介面封裝成原生介面,讓原生呼叫。

JSBridge的實現方案
原生呼叫JS的方式
原生呼叫JS比較簡單,直接呼叫WebView提供的evaluateJavaScript API就可以了。
不過在呼叫之前要先保證 在H5頁面中 將JS方法儲存在window(js的執行context)上,原生是呼叫的js全域性上下文window上的方法
UIWebView呼叫方式:
NSString *jsStr = @"執行的JS程式碼";
[webView stringByEvaluatingJavaScriptFromString:jsStr];
WKWebView呼叫方式:
[webView evaluateJavaScript:@"執行的JS程式碼" completionHandler:^(id _Nullable response, NSError * _Nullable error) {}];

 

JS呼叫原生的方式
JS呼叫原生的常見解決方案如下:
一、UIWebView使用JavaScriptCore注入和Scheme攔截方式
二、WKWebView使用WKScriptMessageHandler注入和Scheme攔截方式
三、使用第三方框架WebViewJavascriptBridge呼叫
 
UIWebView使用JavaScriptCore注入和Scheme攔截方式
JavaScriptCore注入
1.注入API
將Native的相關介面注入到JS的Context(window)的物件中,一般來說這個物件內的方法名與Native相關方法名是相同的,Web端就可以直接在全域性window下使用這個暴露的全域性JS物件,進而呼叫原生端的方法。
UIWebView的JavaScriptCore注入方式:
1.原生新建類繼承自NSObject(如AppJSModel)。
2.h檔案中宣告一個代理並遵循JSExport,代理內的方法和js定義的方法名一致。
3.m檔案中實現代理中對應的方法,可以在方法內處理事件或通知代理。
 
原生類實現:
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>

@protocol JSNativeProtocol <JSExport>

- (NSDictionary *)QRCodeScan:(NSDictionary *)param;

@end

@interface AppJSModel : NSObject <JSNativeProtocol>

@end


#import "AppJSModel.h"

@implementation AppJSModel
- (NSDictionary *)QRCodeScan:(NSDictionary *)param {
    NSLog(@"param: %@",param);
    return @{@"name":@"jack"};
}
@end
H5端呼叫:
import './App.css';
import { useState } from 'react';

function OriginalWebViewApp() {
    const[name, setName] = useState('')
 
    // 0.公共
    //原生髮訊息給JS,JS的回撥
    window.qrResult = (res)=>{
      setName(res)
      return '-------: '+res
    }
    // scheme攔截
    const localPostion = () => {
      window.location.href = 'position://localPosition?name=jack&age=20'
    }

    // 2.UIWebView的互動
    //js發訊息給原生
    const qrActionOnAppModel = () => {
      const res = window.appModel.QRCodeScan({"name":"value"})
      alert(res.name)
    }
    const showAlert = () => {
      window.showAlert()
    }
   
   
    return (
      <div className="App">
        <div>------------------公共------------------</div>
          <div><a href='position://abc?name=jack' style={{color:'white'}}>scheme攔截1:定位</a></div>
          <button onClick={localPostion}>scheme攔截2</button>
          <div>
           原生執行程式碼的結果:{name}
          </div>
   
          <div>------------------UIWebView------------------</div>
          <button onClick={qrActionOnAppModel}>點選掃碼</button>
          <button onClick={showAlert}>彈窗</button>
      </div>
    )
}

export default OriginalWebViewApp
原生方法注入到JS上下文中:
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    
    AppJSModel *jsModel = [AppJSModel new];
    jsContext[@"appModel"] = jsModel;
    jsContext[@"showAlert"] = ^(){
        dispatch_async(dispatch_get_main_queue(), ^{
            UIAlertController* alert = [UIAlertController alertControllerWithTitle:@"請輸入支付資訊" message:@"" preferredStyle:UIAlertControllerStyleAlert];
            UIAlertAction* defaultAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil];
            [alert addAction:defaultAction];
            UIAlertAction* cancleAction = [UIAlertAction actionWithTitle:@"Cancle" style:UIAlertActionStyleCancel handler:nil];
            [alert addAction:cancleAction];
            
            [alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
                textField.placeholder=@"請輸入使用者名稱";
            }];
            [alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
                textField.placeholder=@"請輸入支付密碼";
                textField.secureTextEntry=YES;
            }];
            
            [self presentViewController:alert animated:YES completion:nil];
        });
    };
}

Scheme攔截

原生方法執行完後,回撥給js結果
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    if ([request.URL.scheme isEqualToString:@"position"]) {
        //自定義處理定位scheme
        JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        NSString *jsCode = @"qrResult('杭州,之江')";
        [jsContext evaluateScript:jsCode];
        return NO;
    }
    
    return YES;
}

 

WKWebView使用WKScriptMessageHandler注入和Scheme攔截方式
 
WKScriptMessageHandler注入
1.首先iOS與JS約定好使用相同的方法名進行通訊,如 QRCodeScan:
2.然後iOS 使用 WKUserContentController 的 -addScriptMessageHandler:name:方法監聽 name 為 QRCodeScan 的訊息;
3.JS通過 window.webkit.messageHandlers. QRCodeScan.postMessage() 的方式對QRCodeScan 方法傳送訊息;
4.iOS在-userContentController:didReceiveScriptMessage:方法中讀取 name 為 QRCodeScan 的訊息資料 message.body。

H5頁面中JS與原生設定
下面程式碼為React程式碼實現:
import './App.css';
import { useState } from 'react';

function OriginalWebViewApp() {
    const[name, setName] = useState('')
 
    // 0.公共
    //原生髮訊息給JS,JS的回撥
    window.qrResult = (res)=>{
      setName(res)
      return '-------: '+res
    }
    // scheme攔截
    const localPostion = () => {
      window.location.href = 'position://localPosition?name=jack&age=20'
    }
   
    // 1.WKWebView的互動
    //js發訊息給原生
    const qrAction = () => {
      window.webkit.messageHandlers.QRCodeScan.postMessage({"name":"value"})
    }
   
   
    return (
      <div className="App">
        <div>------------------公共------------------</div>
          <div><a href='position://abc?name=jack' style={{color:'white'}}>scheme攔截1:定位</a></div>
          <button onClick={localPostion}>scheme攔截2</button>
          <div>
           原生執行程式碼的結果:{name}
          </div>
   
          <div>------------------WKWebView------------------</div>
          <button onClick={qrAction}>點選掃描</button>
      </div>
    )
}

export default OriginalWebViewApp
iOS原生頁面設定
override func viewDidLoad() {
    super.viewDidLoad()
    
    // WKWebViewConfiguration: 用於設定WKWebView的屬性和行為, 常見的操作有
    let webViewConfiguration = WKWebViewConfiguration()
    
    //1.設定WKUserContentController,管理WKUserScript(cookie指令碼)和WKScriptMessageHandler原生與JS的互動
    let userContentController = WKUserContentController()
    webViewConfiguration.userContentController = userContentController
    //新增WKScriptMessageHandler指令碼處理
    userContentController.add(self, name: "QRCodeScan")
    //新增WKUserScript,injectionTime注入時機為atDocumentStart頁面載入時在,forMainFrameOnly不只在主框架中注入,所有的框架都注入。
    let cookieScript = WKUserScript(source: "document.cookie = 'cookieName=cookieValue; domain=example.com; path=/';", injectionTime: .atDocumentStart, forMainFrameOnly: false)
    userContentController.addUserScript(cookieScript)
    
    //2.自定義處理網路,處理Scheme為position的定位網路操作
    webViewConfiguration.setURLSchemeHandler(self, forURLScheme: "position")
    
    //3.偏好設定WKPreferences,設定網頁縮放,字型
    let preferences = WKPreferences()
    preferences.minimumFontSize = 10
    if #available(iOS 14, *) {
        let webpagePreferences = WKWebpagePreferences()
        webpagePreferences.allowsContentJavaScript = true
        webViewConfiguration.defaultWebpagePreferences = webpagePreferences
    } else {
        preferences.javaScriptEnabled = true
    }
    preferences.javaScriptCanOpenWindowsAutomatically = true
    webViewConfiguration.preferences = preferences
    
    //4.多媒體設定,設定視訊自動播放,畫中畫,逐步渲染
    webViewConfiguration.allowsInlineMediaPlayback = true
    webViewConfiguration.allowsPictureInPictureMediaPlayback = true
    webViewConfiguration.allowsAirPlayForMediaPlayback = true
    webViewConfiguration.suppressesIncrementalRendering = true
    
    
    //5.cookie設定
    //WKWebView中HTTPCookieStorage.shared單例預設管理著所有的cookie,一般無需我們做額外的操作,如果想單獨新增一個cookie,可以把建立的cookie放置到HTTPCookieStorage.shared中即可。
    //建立cookie物件
    let properties = [
        HTTPCookiePropertyKey.name: "cookieName",
        HTTPCookiePropertyKey.value: "cookieValue",
        HTTPCookiePropertyKey.domain: "example.com",
        HTTPCookiePropertyKey.path: "/",
        HTTPCookiePropertyKey.expires: NSDate(timeIntervalSinceNow: 31556926)
    ] as [HTTPCookiePropertyKey : Any]
    let cookie = HTTPCookie(properties: properties)!
    // 將cookie新增到cookie storage中
    HTTPCookieStorage.shared.setCookie(cookie)

    
    webView = WKWebView(frame: .zero, configuration: webViewConfiguration)
    webView.uiDelegate = self
    webView.navigationDelegate = self
    self.view.addSubview(webView)
    
    loadURL(urlString: "http://localhost:3000/")
}
JS與原生互動代理
//WKScriptMessageHandler
extension H5WKWebViewContainerController {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "QRCodeScan" {
            print(message)
            
            //JS回撥,原生處理完後,通知JS結果
            //原生給js的回撥事件 會通過」原生呼叫js「方式放入到js執行環境的messageQueue中
            let script = "qrResult('jack')"
            message.webView?.evaluateJavaScript(script,completionHandler: { res, _ in
                print(res)
            })
            
        }
    }
}
Scheme攔截
// 自定義處理網路請求Scheme
// WKURLSchemeHandler 的 Delegate
extension H5WKWebViewContainerController {
    func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) {
        if urlSchemeTask.request.url?.scheme == "position" {
            //自定義處理定位scheme
            webView.evaluateJavaScript("qrResult('杭州,之江')")
        }
        print(webView)
    }
    
    func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask) {
        print(webView)
    }
}

 

使用第三方框架WebViewJavascriptBridge呼叫

WebViewJavascriptBridge是一個原生與JS互動的工具,使用簡單,設計巧妙,是一個進行Hybird開發必不可少的工具。
WebViewJavascriptBridge的使用方式很簡單,首先建立一個WKWebView變數,然後根據WKWebView變數建立WebViewJavascriptBridge屬性。
然後就可以使用WebViewJavascriptBridge屬性提供的API進行與H5的互動了。
在JS上下文中註冊OC原生方法:
- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler;
呼叫JS上下文中已經存在的方法:
- (void)callHandler:(NSString *)handlerName data:(id)data
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    WKWebView *wkWebView = [[WKWebView alloc] initWithFrame:self.view.frame];
    wkWebView.navigationDelegate = self;
    [self.view addSubview:wkWebView];
    
    [WebViewJavascriptBridge enableLogging];
    self.bridge = [WebViewJavascriptBridge bridgeForWebView:wkWebView];
    
    // 在JS上下文中註冊callOC方法
    [self.bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"收到了JS的呼叫");
        responseCallback(@"Object-C Received");
    }];
    
    // iOS呼叫JS
    [self.bridge callHandler:@"testJavascriptHandler" data:@{@"state":@"before ready"}];
    
    NSURLRequest *req = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://localhost:3000/"]];
    [wkWebView loadRequest:req];
}
h5中,在JS上下文中註冊處理方法
import React from "react"

function setupWebViewJavascriptBridge(callback) {
  if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge); }
  if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
  window.WVJBCallbacks = [callback];
  var WVJBIframe = document.createElement('iframe');
  WVJBIframe.style.display = 'none';
  WVJBIframe.src = 'https://__bridge_loaded__';
  document.documentElement.appendChild(WVJBIframe);
  setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}


function WebViewJavaScriptBridgeApp() {

    return (
        <div className="WebViewJavaScriptBridgeApp">
          <div>---------WebViewJavaScript---------</div>
          <div id="buttons"></div>
          <div id="log"></div>
          <div>
          {
              setupWebViewJavascriptBridge(function(bridge) {
                var uniqueId = 1
                function log(message, data) {
                  var log = document.getElementById('log')
                  var el = document.createElement('div')
                  el.className = 'logLine'
                  el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
                  if (log.children.length) { log.insertBefore(el, log.children[0]) }
                  else { log.appendChild(el) }
                }
            
                bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
                  log('ObjC called testJavascriptHandler with', data)
                  var responseData = { 'Javascript Says':'Right back atcha!' }
                  log('JS responding with', responseData)
                  if (responseCallback !== undefined) {
                     responseCallback(responseData)
                  }
                })
            
                document.body.appendChild(document.createElement('br'))
                if (document.getElementById('buttons') === null) {
                  setTimeout(function() {
                    document.getElementById('buttons').innerHTML = ""
                    var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
                    callbackButton.innerHTML = 'js 呼叫 OC方法'
                    callbackButton.onclick = function(e) {
                      e.preventDefault()
                      log('JS calling handler "testObjcCallback"')
                      bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
                        log('JS got response', response)
                      })
                    }
                  },0)
                }
                
              })  
          }
          </div>
        </div>
      )
}

export default WebViewJavaScriptBridgeApp

 

WKWebViewJavascriptBridge核心知識點分析

WebViewJavascriptBridge物件結構
WebViewJavascriptBridge物件如下:
window.WebViewJavascriptBridge = {
    // 儲存js註冊的處理常式:messageHandlers[handlerName] = handler;
    registerHandler: registerHandler,
    //JS呼叫OC方法
    callHandler: callHandler,
    disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
    //JS呼叫OC的訊息佇列
    _fetchQueue: _fetchQueue,
    //JS處理OC過來的方法呼叫。
    _handleMessageFromObjC: _handleMessageFromObjC
};
它的內部結構中有一個佇列:JS呼叫OC的佇列_fetchQueue,不過_fetchQueue是一個函數變數,這個函數的返回值才是真正的js呼叫OC的訊息佇列。
function _fetchQueue() {
    var messageQueueString = JSON.stringify(sendMessageQueue);
    sendMessageQueue = [];
    return messageQueueString;
}
訊息佇列的設計模式是與JS執行機制有關的,JS引擎執行的關鍵是訊息佇列和事件迴圈,詳情可以閱讀文章:
[JS引擎中的執行緒,事件迴圈,上下文] https://www.cnblogs.com/zhou--fei/p/17452687.html

訊息佇列中儲存的message結構
訊息佇列中儲存的是一組message字典序列化後的字串,message訊息中儲存著方法名handlerName,引數data,回撥方法callbackId
一個訊息的建立方式如下:
NSMutableDictionary* message = [NSMutableDictionary dictionary];
message[@"data"] = data;
    
NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId];
self.responseCallbacks[callbackId] = [responseCallback copy];
message[@"callbackId"] = callbackId;
message[@"handlerName"] = handlerName;
在原生與JS的互動中,當傳送完訊息時只會把對應的回撥方法和回撥方法ID在各自全域性變數中以key,value的方式儲存。
原生呼叫JS時儲存如下:
@interface WebViewJavascriptBridgeBase : NSObject
// 在成員變數中定義欄位responseCallbacks
@property (strong, nonatomic) NSMutableDictionary* responseCallbacks;
@end


//傳送訊息時,儲存回撥ID:回撥函數鍵值對。
- (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName {
    NSMutableDictionary* message = [NSMutableDictionary dictionary];
    
    if (data) {
        message[@"data"] = data;
    }
    
    if (responseCallback) {
        NSString* callbackId = [NSString stringWithFormat:@"objc_cb_%ld", ++_uniqueId];
        self.responseCallbacks[callbackId] = [responseCallback copy];
        message[@"callbackId"] = callbackId;
    }
    
    if (handlerName) {
        message[@"handlerName"] = handlerName;
    }
    [self _queueMessage:message];
}
JS對原生傳送訊息時,儲存如下:
// 在JS全域性上下文中定義物件responseCallbacks
var responseCallbacks = {};
function _doSend(message, responseCallback) {
    if (responseCallback) {
        var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime();
        //儲存回撥id:回撥方法,鍵值對
        responseCallbacks[callbackId] = responseCallback;
        message['callbackId'] = callbackId;
    }
    sendMessageQueue.push(message);
    messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
WebViewJavascriptBridge的Scheme攔截
WebViewJavascriptBridge物件是原生向JS注入的,而WebViewJavascriptBridge物件向JS注入採用的方式是Scheme攔截。
當h5中傳送"__bridge_loaded__"Scheme跳轉時,則會在原生觸發WebViewJavascriptBridge物件相關資料的注入[_base injectJavascriptFile]。
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    if (webView != _webView) { return; }
    NSURL *url = navigationAction.request.URL;
    __strong typeof(_webViewDelegate) strongDelegate = _webViewDelegate;

    
    if ([_base isWebViewJavascriptBridgeURL:url]) {
        if ([_base isBridgeLoadedURL:url]) {
            //iOS原生進行js互動環境注入
            [_base injectJavascriptFile];
        } else if ([_base isQueueMessageURL:url]) {
            [self WKFlushMessageQueue];
        } else {
            [_base logUnkownMessage:url];
        }
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    
    if (strongDelegate && [strongDelegate respondsToSelector:@selector(webView:decidePolicyForNavigationAction:decisionHandler:)]) {
        [_webViewDelegate webView:webView decidePolicyForNavigationAction:navigationAction decisionHandler:decisionHandler];
    } else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}
另外其他與訊息傳送無關的呼叫也採用的Scheme攔截,如訊息佇列的重新整理。
 

另外

iOS程式碼Demo地址:https://github.com/zhfei/MixContainer
H5程式碼Demo地址:https://github.com/zhfei/ReactBasicKnowledge
H5頁面使用的是React框架生成的Demo,下載後執行:
cd h5-demo
npm install
npm start
就可以線上偵錯了
 

參考文章:
https://juejin.cn/post/7097845525587689486
https://blog.csdn.net/ws1836300/article/details/119182057