@react-native-ohos/react-native-webview 13.15.2-rc.1 → 13.15.3

package/README.md

@@ -4,9 +4,9 @@ This project is based on [react-native-webview@13.15.0](https://github.com/react
 
 ## Documentation
 
-- [中文](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-webview.md)
+- [中文](https://gitcode.com/OpenHarmony-RN/usage-docs/blob/master/zh-cn/react-native-webview.md)
 
-- [English](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-webview.md)
+- [English](https://gitcode.com/OpenHarmony-RN/usage-docs/blob/master/en/react-native-webview.md)
 
 ## License
 

package/harmony/rn_webview/oh-package.json5

@@ -6,7 +6,7 @@
   "name": "@react-native-ohos/react-native-webview",
   "description": "main cpai architecture",
   "main": "index.ets",
-  "version": "13.15.2-rc.1",
+  "version": "13.15.3",
   "dependencies": {
     "@rnoh/react-native-openharmony": "../react_native_openharmony.har"
   }

package/harmony/rn_webview/src/main/cpp/generated/RNOH/generated/components/RNCWebViewJSIBinder.h

@@ -94,6 +94,7 @@ namespace rnoh
             object.setProperty(rt, "indicatorStyle", true);
             object.setProperty(rt, "newSource", "Object");
             object.setProperty(rt, "userAgent", true);
+            object.setProperty(rt, "schemeList", true);
             return object;
         }
 

package/harmony/rn_webview/src/main/cpp/generated/react/renderer/components/react_native_webview/Props.cpp

@@ -101,7 +101,8 @@ namespace facebook::react
                                   showsVerticalScrollIndicator(convertRawProp(context, rawProps, "showsVerticalScrollIndicator", sourceProps.showsVerticalScrollIndicator, {true})),
                                   indicatorStyle(convertRawProp(context, rawProps, "indicatorStyle", sourceProps.indicatorStyle, {RNCWebViewIndicatorStyle::Default})),
                                   newSource(convertRawProp(context, rawProps, "newSource", sourceProps.newSource, {})),
-                                  userAgent(convertRawProp(context, rawProps, "userAgent", sourceProps.userAgent, {}))
+                                  userAgent(convertRawProp(context, rawProps, "userAgent", sourceProps.userAgent, {})),
+                                  schemeList(convertRawProp(context, rawProps, "schemeList", sourceProps.schemeList, {}))
   {
   }
 

package/harmony/rn_webview/src/main/cpp/generated/react/renderer/components/react_native_webview/Props.h

@@ -506,6 +506,7 @@ class RNCWebViewProps final : public ViewProps {
   RNCWebViewIndicatorStyle indicatorStyle{RNCWebViewIndicatorStyle::Default};
   RNCWebViewNewSourceStruct newSource{};
   std::string userAgent{};
+  folly::dynamic schemeList{};
 };
 
 } // namespace facebook::react

package/harmony/rn_webview/src/main/ets/Magic.ets

@@ -45,7 +45,7 @@ export interface WebViewProps extends ViewRawProps {
   cacheMode: CACHE_MODE
   domStorageEnabled: boolean
   scalesPageToFit: boolean
-   hasOnShouldStartLoadWithRequestEvent?: boolean
+  hasOnShouldStartLoadWithRequestEvent?: boolean
   messagingModuleName: string
   webviewDebuggingEnabled: boolean
   scrollEnabled: boolean
@@ -65,8 +65,23 @@ export interface WebViewProps extends ViewRawProps {
   geolocationEnabled: boolean
   applicationNameForUserAgent: string
   pullToRefreshEnabled: boolean
+  schemeList: Array<string>
+  mediaCapturePermissionGrantType?: 'prompt' | 'grant' | 'deny' | 'grantIfSameHostElsePrompt' | 'grantIfSameHostElseDeny'
+  menuItems?: Array<MenuItem> | undefined;
 }
 
+export interface MenuItem {
+  label: string,
+  key: string
+}
+
+export enum WebMediaCapturePermissionGrantType {
+  GRANT_IF_SAME_HOST_ELSE_PROMPT = "grantIfSameHostElsePrompt",
+  GRANT_IF_SAME_HOST_ELSE_DENY = "grantIfSameHostElseDeny",
+  DENY = "deny",
+  GRANT = "grant",
+  PROMPT = "prompt",
+}
 
 export class RNCWebViewBridge {
   postMessage!: (data: string) => void;

package/harmony/rn_webview/src/main/ets/RNCWebView.ets

@@ -25,9 +25,11 @@ import {
   WebViewDescriptor,
   REFRESH_OFFSET,
   MINHEIGHT,
+  WebMediaCapturePermissionGrantType,
+  MenuItem
 } from './Magic';
 
-import { abilityAccessCtrl, bundleManager } from '@kit.AbilityKit';
+import { abilityAccessCtrl, bundleManager, Permissions } from '@kit.AbilityKit';
 import { WebViewTurboModule, ShouldStartParams, ShouldOverrideCallbackState } from './WebViewTurboModule';
 import { AnyThreadRNInstance, WorkerTaskRunnable } from '@rnoh/react-native-openharmony/src/main/ets/RNOH';
 import buffer from '@ohos.buffer';
@@ -62,6 +64,7 @@ export struct RNCWebView {
   url: string | Resource = "";
   body: string | undefined = "";
   controller: webview.WebviewController = new webview.WebviewController();
+  schemeHandler: webview.WebSchemeHandler = new webview.WebSchemeHandler();
   javaScriptEnable: boolean = true;
   allowFileAccess: boolean = true;
   forceDark: boolean = true;
@@ -98,6 +101,9 @@ export struct RNCWebView {
   private debounceTimer: number = -1
   static readonly DEBOUNCE_TIME: number = 100
   private isFirstDebounce: boolean = true
+  private isMainFrameLoaded:boolean =  false;
+  private isCatchMainFrameError:boolean =  false;
+  private isAlreadyRunInject:boolean =  false;
 
   aboutToAppear() {
     try {
@@ -168,6 +174,8 @@ export struct RNCWebView {
   }
 
   onLoadingStart() {
+    this.isMainFrameLoaded = false;
+    this.isCatchMainFrameError = false;
     this.webViewBaseOperate?.emitLoadingStart({ progress: this.progress })
   }
 
@@ -181,6 +189,13 @@ export struct RNCWebView {
     this.webViewBaseOperate?.emitProgressChange({ progress: this.progress })
     if (this.progress === ONE_HUNDRED) {
       this.allowPageStartInProgress = true;
+
+      if (deviceInfo.sdkApiVersion >= 20 && this.isMainFrameLoaded && !this.isCatchMainFrameError) {
+        if (this.isAlreadyRunInject) {
+          this.onLoadFinished()
+          this.isAlreadyRunInject = false;
+        }
+      }
     }
   }
 
@@ -190,6 +205,7 @@ export struct RNCWebView {
   }
 
   runInjectedJavaScript() {
+    this.isAlreadyRunInject = true;
     let injectedJS = this.descriptorWrapper.rawProps.injectedJavaScript
     if (this.javaScriptEnable && injectedJS != "" && this.controllerAttached) {
       try {
@@ -287,6 +303,20 @@ export struct RNCWebView {
       this.descriptorWrapper.rawProps.applicationNameForUserAgent)
     this.webViewBaseOperate.setFraudulentWebsiteWarningEnabled(this.descriptorWrapper.rawProps.fraudulentWebsiteWarningEnabled)
 
+    let schemeList = this.descriptorWrapper.rawProps.schemeList
+    if(schemeList?.length){
+      schemeList.forEach(scheme=>{
+        this.schemeHandler.onRequestStart((request: webview.WebSchemeHandlerRequest, resourceHandler: webview.WebResourceHandler) => {
+          console.log("[schemeHandler] onRequestStart");
+          return true;
+        })
+        this.schemeHandler.onRequestStop((request: webview.WebSchemeHandlerRequest) => {
+          console.log("[schemeHandler] onRequestStop");
+        });
+        this.controller.setWebSchemeHandler(scheme, this.schemeHandler);
+      })
+    }
+
     let baseUrl = this.source.baseUrl
     let uri = this.source.uri
     if (this.source.html != undefined && this.source.html != "") {
@@ -425,33 +455,130 @@ export struct RNCWebView {
     return false
   }
 
+  onCreateMenu = (menuItems: Array<TextMenuItem>) => {
+    let customMenuItems = this.descriptorWrapper.rawProps.menuItems
+    if (customMenuItems == undefined) {
+      return menuItems;
+    }  else if (customMenuItems.length == 0) {
+      return [];
+    } else {
+      let menuItemsArray: Array<TextMenuItem> = [];
+      for (let index = 0; index < customMenuItems.length; index++) {
+        let element: MenuItem = customMenuItems[index];
+        let customItem: TextMenuItem = {
+          content: element.label,
+          id: TextMenuItemId.of(element.key)
+        };
+        menuItemsArray.push(customItem)
+      }
+      return menuItemsArray;
+    }
+  }
+
+  onMenuItemClick(menuItem: TextMenuItem): boolean {
+    if (this.descriptorWrapper.rawProps.menuItems != undefined) {
+      this.controller.runJavaScript("(function(){return {selection: window.getSelection().toString()} })()")
+        .then((result: string) => {
+          this.webViewBaseOperate?.customMenuSelection(menuItem, result)
+        })
+        .catch((error: string | Error) => {
+          Logger.info('[RNOH] function onMenuItemClick error: ' + error);
+        })
+      // 禁用系统默认行为
+      return true;
+    }
+    return false;
+  }
+
+  onPermissionRequestAlert(event: OnPermissionRequestEvent){
+    AlertDialog.show({
+      title: this.resourceToString($r('app.string.on_confirm')) + event.request.getOrigin(),
+      message: this.getPermissionDialogMessage(event),
+      alignment: DialogAlignment.Center,
+      primaryButton: {
+        value: $r('app.string.deny'),
+        action: () => {
+          event.request.deny();
+        }
+      },
+      secondaryButton: {
+        value: $r('app.string.on_confirm'),
+        action: () => {
+          event.request.grant(event.request.getAccessibleResource());
+        }
+      },
+      cancel: () => {
+        event.request.deny();
+      }
+    })
+  }
+
+  async handleMediaCapturePermissionGrantType(resources: string[], domain: string) {
+    let permissionList: Array<Permissions> = [];
+    resources.forEach(resource => {
+      switch (resource.toString()) {
+        case 'TYPE_VIDEO_CAPTURE':
+          permissionList.push('ohos.permission.CAMERA');
+          break;
+        case 'TYPE_AUDIO_CAPTURE':
+          permissionList.push('ohos.permission.MICROPHONE');
+          break;
+      }
+    });
+
+    await atManager.requestPermissionsFromUser(this.ctx.uiAbilityContext, permissionList);
+  }
+
   build() {
     Stack() {
         if ( deviceInfo.sdkApiVersion >= 20) {
           Web({ src: "", controller: this.controller, renderMode: this.renderMode })
             .mixedMode(this.mode)
-            .onPermissionRequest((event: OnPermissionRequestEvent) => {
+            .onPermissionRequest(async (event: OnPermissionRequestEvent) => {
               if (event && (this.getPermissionDialogMessage(event) != "TYPE_SENSOR")) {
-                AlertDialog.show({
-                  title: this.resourceToString($r('app.string.on_confirm')) + event.request.getOrigin(),
-                  message: this.getPermissionDialogMessage(event),
-                  alignment: DialogAlignment.Center,
-                  primaryButton: {
-                    value: $r('app.string.deny'),
-                    action: () => {
+                const resources: string[] = event.request.getAccessibleResource();
+                if (resources.indexOf('TYPE_AUDIO_CAPTURE') >= 0 || resources.indexOf('TYPE_VIDEO_CAPTURE') >= 0 ) {
+                  const originUrl = this.webViewBaseOperate?.verifyURLFormat(event.request.getOrigin(), this.source.html,
+                    this.source.baseUrl);
+                  const currentUrl = this.webViewBaseOperate?.verifyURLFormat(this.controller.getUrl(), this.source.html,
+                    this.source.baseUrl);
+                  const originDomain: string = OSUrl.URL.parseURL(originUrl).hostname;
+                  const currentDomain: string = OSUrl.URL.parseURL(currentUrl).hostname;
+                  let mediaCapturePermissionGrantType: string = WebMediaCapturePermissionGrantType.PROMPT
+                  if (this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType != undefined) {
+                    mediaCapturePermissionGrantType = this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType;
+                  }
+                  if (mediaCapturePermissionGrantType != WebMediaCapturePermissionGrantType.DENY) {
+                    await this.handleMediaCapturePermissionGrantType(resources, originDomain)
+                  }
+                  switch (mediaCapturePermissionGrantType) {
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_PROMPT:
+                      if (originDomain != currentDomain) {
+                        this.onPermissionRequestAlert(event)
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_DENY:
+                      if (originDomain != currentDomain) {
+                        event.request.deny();
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.DENY:
                       event.request.deny();
-                    }
-                  },
-                  secondaryButton: {
-                    value: $r('app.string.on_confirm'),
-                    action: () => {
-                      event.request.grant(event.request.getAccessibleResource());
-                    }
-                  },
-                  cancel: () => {
-                    event.request.deny();
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT:
+                      event.request.grant(resources);
+                      break;
+                    case WebMediaCapturePermissionGrantType.PROMPT:
+                      this.onPermissionRequestAlert(event)
+                      break;
                   }
-                })
+                } else {
+                  this.onPermissionRequestAlert(event)
+                }
               }
             })
             .width(this.webviewWidth)
@@ -480,11 +607,36 @@ export struct RNCWebView {
               scrollForward: this.nestedScroll,
               scrollBackward: this.nestedScroll,
             })
-            .onLoadStarted(() => this.onPageBegin())
-            .onLoadFinished(() => this.onLoadFinished())
-            .onPageEnd(() => {this.onPageEndExecuteRunInjectedJavaScript()})
-            .onErrorReceive((event: OnErrorReceiveEvent) => this.webViewBaseOperate?.emitLoadingError(event))
-            .onHttpErrorReceive((event: OnHttpErrorReceiveEvent) => this.webViewBaseOperate?.emitHttpError(event))
+            .onLoadStarted(() => {
+              this.isMainFrameLoaded = false;
+              this.isCatchMainFrameError = false;
+              this.onPageBegin()
+            })
+            .onPageEnd(() => {
+              this.isMainFrameLoaded = true;
+              if (this.isCatchMainFrameError) {
+                if (this.source.html) {
+                  this.onLoadFinished();
+                }
+                return;
+              }
+              this.onPageEndExecuteRunInjectedJavaScript()
+
+            })
+            .onErrorReceive((event: OnErrorReceiveEvent) => {
+              const isMainFrame = event.request.isMainFrame();
+              if (isMainFrame) {
+                this.isCatchMainFrameError = true;
+              }
+              this.webViewBaseOperate?.emitLoadingError(event)
+            })
+            .onHttpErrorReceive((event: OnHttpErrorReceiveEvent) => {
+              const isMainFrame = event.request.isMainFrame();
+              if (isMainFrame) {
+                this.isCatchMainFrameError = true;
+              }
+              this.webViewBaseOperate?.emitHttpError(event)
+            })
             .onControllerAttached(() => this.controllerAttachedInit())
             .onAlert((event: AlertEvent) => this.onJavascriptAlert(event))
             .onConfirm((event: AlertEvent) => this.onJavascriptConfirm(event))
@@ -499,31 +651,58 @@ export struct RNCWebView {
             .onRenderExited((event: OnRenderExitedEvent) => this.webViewBaseOperate?.onRenderExited(event))
             .onLoadIntercept((event: OnLoadInterceptEvent) => this.onLoadIntercept(event))
             .onTitleReceive((event: OnTitleReceiveEvent) => this.webViewBaseOperate?.onTitleReceive(event))
+            .editMenuOptions({
+              onCreateMenu: this.onCreateMenu.bind(this),
+              onMenuItemClick: this.onMenuItemClick.bind(this),
+            })
         } else {
           Web({ src: "", controller: this.controller, renderMode: this.renderMode })
             .mixedMode(this.mode)
-            .onPermissionRequest((event: OnPermissionRequestEvent) => {
+            .onPermissionRequest(async (event: OnPermissionRequestEvent) => {
               if (event && (this.getPermissionDialogMessage(event) != "TYPE_SENSOR")) {
-                AlertDialog.show({
-                  title: this.resourceToString($r('app.string.on_confirm')) + event.request.getOrigin(),
-                  message: this.getPermissionDialogMessage(event),
-                  alignment: DialogAlignment.Center,
-                  primaryButton: {
-                    value: $r('app.string.deny'),
-                    action: () => {
+                const resources: string[] = event.request.getAccessibleResource();
+                if (resources.indexOf('TYPE_AUDIO_CAPTURE') >= 0 || resources.indexOf('TYPE_VIDEO_CAPTURE') >= 0 ) {
+                  const originUrl = this.webViewBaseOperate?.verifyURLFormat(event.request.getOrigin(), this.source.html,
+                    this.source.baseUrl);
+                  const currentUrl = this.webViewBaseOperate?.verifyURLFormat(this.controller.getUrl(), this.source.html,
+                    this.source.baseUrl);
+                  const originDomain: string = OSUrl.URL.parseURL(originUrl).hostname;
+                  const currentDomain: string = OSUrl.URL.parseURL(currentUrl).hostname;
+                  let mediaCapturePermissionGrantType: string = WebMediaCapturePermissionGrantType.PROMPT
+                  if (this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType != undefined) {
+                    mediaCapturePermissionGrantType = this.descriptorWrapper.rawProps.mediaCapturePermissionGrantType;
+                  }
+                  if (mediaCapturePermissionGrantType != WebMediaCapturePermissionGrantType.DENY) {
+                    await this.handleMediaCapturePermissionGrantType(resources, originDomain)
+                  }
+                  switch (mediaCapturePermissionGrantType) {
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_PROMPT:
+                      if (originDomain != currentDomain) {
+                        this.onPermissionRequestAlert(event)
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT_IF_SAME_HOST_ELSE_DENY:
+                      if (originDomain != currentDomain) {
+                        event.request.deny();
+                      } else {
+                        event.request.grant(resources);
+                      }
+                      break;
+                    case WebMediaCapturePermissionGrantType.DENY:
                       event.request.deny();
-                    }
-                  },
-                  secondaryButton: {
-                    value: $r('app.string.on_confirm'),
-                    action: () => {
-                      event.request.grant(event.request.getAccessibleResource());
-                    }
-                  },
-                  cancel: () => {
-                    event.request.deny();
+                      break;
+                    case WebMediaCapturePermissionGrantType.GRANT:
+                      event.request.grant(resources);
+                      break;
+                    case WebMediaCapturePermissionGrantType.PROMPT:
+                      this.onPermissionRequestAlert(event)
+                      break;
                   }
-                })
+                } else {
+                  this.onPermissionRequestAlert(event)
+                }
               }
             })
 
@@ -571,7 +750,10 @@ export struct RNCWebView {
             .onRenderExited((event: OnRenderExitedEvent) => this.webViewBaseOperate?.onRenderExited(event))
             .onLoadIntercept((event: OnLoadInterceptEvent) => this.onLoadIntercept(event))
             .onTitleReceive((event: OnTitleReceiveEvent) => this.webViewBaseOperate?.onTitleReceive(event))
-
+            .editMenuOptions({
+              onCreateMenu: this.onCreateMenu.bind(this),
+              onMenuItemClick: this.onMenuItemClick.bind(this),
+            })
           }
       }
     .width(this.webviewWidth)

package/harmony/rn_webview/src/main/ets/WebViewBaseOperate.ets

@@ -454,4 +454,17 @@ export class BaseOperate {
       Logger.error(TAG, `[RNOH] onTitleReceive Errorcode: ${error.code}`);
     }
   }
+
+  customMenuSelection(menuItem: TextMenuItem, selectionText: string) {
+    try {
+      selectionText = JSON.parse(selectionText).selection;
+      this.eventEmitter!.emit('customMenuSelection', {
+        label: menuItem.content.toString(),
+        key: JSON.parse(JSON.stringify(menuItem.id)).id_,
+        selectedText: selectionText
+      })
+    } catch (error) {
+      Logger.error(TAG, `[RNOH] customMenuSelection Errorcode: ${error.code}`);
+    }
+  }
 }

package/harmony/rn_webview/src/main/ets/generated/components/RNCWebView.ts

@@ -101,6 +101,7 @@ export namespace RNCWebView {
     indicatorStyle?: 'default' | 'black' | 'white';
     newSource: {uri?: string, method?: string, body?: string, headers?: {name: string, value: string}[], html?: string, baseUrl?: string};
     userAgent?: string;
+    schemeList?: unknown;
   }
   
   export interface Props extends ViewBaseProps {}
@@ -425,7 +426,10 @@ export namespace RNCWebView {
     get userAgent() {
       return this.rawProps.userAgent;
     }
-    
+
+    get schemeList() {
+      return this.rawProps.schemeList;
+    }
   
   }
 

package/package.json

@@ -9,7 +9,7 @@
     "Thibault Malbranche <malbranche.thibault@gmail.com>"
   ],
   "license": "MIT",
-  "version": "13.15.2-rc.1",
+  "version": "13.15.3",
   "homepage": "https://gitcode.com/openharmony-sig/rntpc_react-native-webview/tree/br_rnoh0.77#readme",
   "scripts": {
     "macos": "react-native run-macos --scheme WebviewExample --project-path example/macos",
@@ -48,6 +48,7 @@
     "@react-native/eslint-config": "0.73.2",
     "@react-native/metro-config": "0.73.5",
     "@react-native/typescript-config": "0.73.1",
+    "@react-native-oh/react-native-harmony-cli": "npm:@react-native-oh/react-native-harmony-cli@0.77.18-1",
     "@rnx-kit/metro-config": "1.3.15",
     "@semantic-release/git": "7.0.16",
     "@types/invariant": "^2.2.30",

package/src/RNCWebViewNativeComponent.ts

@@ -303,6 +303,7 @@ export interface NativeProps extends ViewProps {
     baseUrl?: string;
   }>;
   userAgent?: string;
+  schemeList?: ReadonlyArray<string>;
 }
 
 export interface NativeCommands {

package/src/WebView.harmony.tsx

@@ -67,7 +67,7 @@ const WebViewComponent = forwardRef<{}, IOSWebViewProps & { scalesPageToFit: boo
       injectedJavaScript,
       injectedJavaScriptBeforeContentLoaded,
       injectedJavaScriptObject,
-      menuItems = [],
+      menuItems,
       injectedJavaScriptForMainFrameOnly = true,
       injectedJavaScriptBeforeContentLoadedForMainFrameOnly = true,
       thirdPartyCookiesEnabled = false,