0.0.3 added react-native-webview support

Author: robseaman

README.md

@@ -1,12 +1,12 @@
 # WebApiBridge
 
-`WebApiBridge` is a plain JavaScript class that can be used in a React Native application and in a web app running in a React Native [WebView](https://facebook.github.io/react-native/docs/webview.html) to support a function call API between the two. It can also be used as an IPC mechanism between a web page and an iframe. The intention is for this code to be used in a web app that is using either a framework or pure JavaScript so framework code was kept out of this class.
+`WebApiBridge` is a plain JavaScript class that can be used in a React Native application and in a web app using [react-native-community/react-native-webview](https://github.com/react-native-community/react-native-webview) to support a function call API between the two. The original [React Native WebView](https://facebook.github.io/react-native/docs/webview.html) has been deprecated but will still work. The api can also be used as an IPC mechanism between other windows, for example, a web page and an iframe. The intention is for this code to be used in a web app that is using either a framework or pure JavaScript so framework code was kept out of this class.
 
 ## Features
 
 * Provides support for API calls between JavaScript processes. Each process can support API calls in an array of JavaScript objects (inluding React components)
 * Marshalls plain JavaScript parameters and return values via `JSON.stringify()`
-* Works for React Native webviews
+* Works with [react-native-community/react-native-webview](https://github.com/react-native-community/react-native-webview), including support of [ReactNativeWebView.postMessage](https://github.com/react-native-community/react-native-webview/blob/cdbfc19cd20a0d96c9cbd13fcb8a32fcde77943b/docs/Guide.md#the-windowreactnativewebviewpostmessage-method-and-onmessage-prop)
 * Works for communication between a web page and iframe based window
 * Provides promise support for asynchronous API calls that need to return results
 * Marshalls exceptions thown in API calls to the caller
@@ -42,7 +42,7 @@ import { Message } from '@precor/web-api-bridge/types/shapes'
 
 ## Gotchas
 
-* Beware that messages passed before `onLoad` is called will probably not get through.
+* Beware that messages passed before `onLoad` is called may not get through.
 * Type files for Flow and TypeScript are included but not used by our projects so they may have issues. Please submit an issue or better yet a pull request with corrections.
 
 ## History

docs/WEBVIEWBRIDGE.md

@@ -6,20 +6,23 @@
     -   [Examples][2]
     -   [apis][3]
     -   [ipc][4]
-    -   [listener][5]
-    -   [origin][6]
-    -   [targetOrigin][7]
-    -   [onMessage][8]
-        -   [Parameters][9]
-    -   [send][10]
-        -   [Parameters][11]
+    -   [useReactNativeWebView][5]
+    -   [listener][6]
+    -   [origin][7]
+    -   [targetOrigin][8]
+    -   [onMessage][9]
+        -   [Parameters][10]
+    -   [send][11]
+        -   [Parameters][12]
 
 ## WebApiBridge
 
-`WebApiBridge` is a JavaScript class that can be used in a React Native application
-and in a web app running in a React Native [WebView][12]
-to support a function call interface between the two. It can also be used as an IPC mechanism
-between a web site and content running in an iframe.
+`WebApiBridge` is a plain JavaScript class that can be used in a React Native application and
+in a web app running in a [react-native-webview][13]
+to support a function call API between the two. [React Native WebView][14]
+will also still work. It can also be used as an IPC mechanism between other windows, for example,
+a web page and an iframe. The intention is for this code to be used in a web app that is using
+either a framework or pure JavaScript so framework code was kept out of this class.
 
 WebApiBridge works by passing `Message` objects between Javascript processes.
 
@@ -30,7 +33,7 @@ Example React Native API implementation using a `WebApiBridge`.
 
 ```javascript
 import React from 'react';
-import { WebView } from 'react-native';
+import { WebView } from 'react-native-webview';
 import WebApiBridge from '@precor/web-api-bridge';
 
 class WebViewApi extends React.Component {
@@ -63,6 +66,7 @@ class WebViewApi extends React.Component {
   render() {
     return (
       <WebView
+        originWhitelist={['*']}
         javaScriptEnabled
         ref={(webview) => { this.webview = webview; }}
         onMessage={this.onMessage}
@@ -82,15 +86,21 @@ Example `window` API implementation using a `WebApiBridge`.
 ```javascript
 import WebApiBridge from '@precor/web-api-bridge';
 
+const iOS = (process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent));
 class MyApi
   constructor() {
      webApiBridge = new WebApiBridge();
      webApiBridge.apis = [this];
-     // webApiBridge.origin = 'https://www.mydom.com'; // should enable if in iframe
-     // webApiBridge.targetOrigin = 'https://www.mydom.com'; // should enable if in iframe
-     // and following would add to `window` if running in iframe instead of webview
-     document.addEventListener('message', event => webApiBridge.onMessage(event, event.data));
-     webApiBridge.ipc = window; // window.parent if running in iframe
+     // set-up orgins if not in a webview:
+     // webApiBridge.origin = 'https://www.mydom.com';
+     // webApiBridge.targetOrigin = 'https://www.mydom.com';
+     const eventObj = (iOS) ? window : document; // window if not in a webview
+     eventObj.addEventListener('message', event => webApiBridge.onMessage(event, event.data));
+     // for webview:
+     webApiBridge.ipc = window;
+     webApiBridge.useReactNativeWebView = true; // webview side only
+     // enable this for non-webview:
+     // webApiBridge.ipc = window; // use window.parent for an iframe
   }
 
    // call with myApi.myApiCall(thing1, thing2).then(result => console.log(result));
@@ -117,9 +127,17 @@ in more than one API.
 
 ### ipc
 
-Property for the Inter Process Communications object that will handle
-messages from the other-side. This is the `window` object on a web page
-and the `ref` for the `WebView` component on the React Native side.
+Property for ipc object to post messages to the other side. Typically the `window`,
+or a `window.parent` for an iframe in a normal web page. For the `WebView`
+component on the React Native side use the `ref`, and for the web side of
+[react-native-webview][13]
+use `window.parent` for iOS and `window` for Android.
+
+### useReactNativeWebView
+
+Property that should be truthy for a webview using
+[react-native-webview][13]. When set
+`ipc.ReactNativeWebView.postMessage` will be used instead of `ipc.postMessage`.
 
 ### listener
 
@@ -150,8 +168,8 @@ from the other side.
 
 #### Parameters
 
--   `event` **[object][13]** Incomming event.
--   `data` **[string][14]** The incoming data received, which is a stingified JSON
+-   `event` **[object][15]** Incomming event.
+-   `data` **[string][16]** The incoming data received, which is a stingified JSON
     message. Defaults to `event.nativeEvent.data`, which is correct for React Native
     but needs to be overridden for the web app with `event.data`. (optional, default `event.nativeEvent.data`)
 
@@ -162,13 +180,13 @@ Returns a `Promise` object.
 
 #### Parameters
 
--   `targetFunc` **[string][14]** A string of the name of the api function to execute.
--   `args` **[Array][15]** An array of parameters to be passsed to the `targetFun`.
--   `wantResult` **[boolean][16]** Boolean to indicate if a `Promise` should be `fullfilled`
+-   `targetFunc` **[string][16]** A string of the name of the api function to execute.
+-   `args` **[Array][17]** An array of parameters to be passsed to the `targetFun`.
+-   `wantResult` **[boolean][18]** Boolean to indicate if a `Promise` should be `fullfilled`
        or `rejected` after the remote api completes the call. If `false` then no `Promise`
        will be `fullfilled`. (optional, default `false`)
 
-Returns **[Promise][17]** Promise object if `wantResult` is `true`, `null` if not.
+Returns **[Promise][19]** Promise object if `wantResult` is `true`, `null` if not.
 
 [1]: #webapibridge
 
@@ -178,28 +196,32 @@ Returns **[Promise][17]** Promise object if `wantResult` is `true`, `null` if no
 
 [4]: #ipc
 
-[5]: #listener
+[5]: #usereactnativewebview
+
+[6]: #listener
+
+[7]: #origin
 
-[6]: #origin
+[8]: #targetorigin
 
-[7]: #targetorigin
+[9]: #onmessage
 
-[8]: #onmessage
+[10]: #parameters
 
-[9]: #parameters
+[11]: #send
 
-[10]: #send
+[12]: #parameters-1
 
-[11]: #parameters-1
+[13]: https://github.com/react-native-community/react-native-webview
 
-[12]: https://facebook.github.io/react-native/docs/webview.html
+[14]: https://facebook.github.io/react-native/docs/webview.html
 
-[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise
+[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@precor/web-api-bridge",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Provides api marshalling for React Native WebvViews and web page iframes.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/__tests__/index.test.js

@@ -26,6 +26,9 @@ class TestAPI {
 class TestIPC {
   constructor() {
     this.postMessage = jest.fn();
+    this.ReactNativeWebView = {
+      postMessage: jest.fn(),
+    };
   }
 }
 
@@ -90,6 +93,18 @@ describe('WebApiBridge', () => {
     expect(testIPC.postMessage).toHaveBeenCalledWith(JSON.stringify(expectedResultMsg), '*');
   });
 
+  it('sends a result using ReactNativeWebView, given a response coming from a ReactNativeWebView', () => {
+    const wantResultMsg = { ...testFuncMsg, wantResult: true };
+    const expectedResultMsg = {
+      ...wantResultMsg, type: 'response', args: [], error: 'Cannot read property \'then\' of undefined',
+    };
+    wab.useReactNativeWebView = true;
+    wab.onMessage('message', JSON.stringify(wantResultMsg));
+    expect(testAPI.testFunc).toHaveBeenCalled();
+    expect(testIPC.ReactNativeWebView.postMessage)
+      .toHaveBeenCalledWith(JSON.stringify(expectedResultMsg));
+  });
+
   it('calls an api function with params, given an incoming request has params', () => {
     const args = [5, { key: 'value' }];
     const argRequestMsg = {
@@ -275,6 +290,13 @@ describe('WebApiBridge', () => {
     expect(JSON.parse(testIPC.postMessage.mock.calls[0][0])).toEqual(testFuncMsg);
   });
 
+  it('sends an api request using using ReactNativeWebView, given request from a ReactNativeWebView', () => {
+    wab.useReactNativeWebView = true;
+    expect(wab.send('testFunc', [], false)).toBeNull();
+    expect(JSON.parse(testIPC.ReactNativeWebView.postMessage.mock.calls[0][0]))
+      .toEqual(testFuncMsg);
+  });
+
   it('sends an api request without requesting a result by default', () => {
     expect(wab.send('testFunc', [])).toBeNull();
     expect(JSON.parse(testIPC.postMessage.mock.calls[0][0])).toEqual(testFuncMsg);

src/index.d.ts

@@ -1,3 +1,5 @@
+import { PostMessage } from "../lib";
+
 /*
  * WebApiBridge should be left as a pure JS implementation. In order to
  * support typescript these declarations are supported in a separate .flow file.
@@ -29,6 +31,7 @@ export type OnMessage = (event: string, data: {}) => void
 export default class WebApiBridge {
   listener: Listener | null;
   ipc: {};
+  useReactNativeWebView: boolean;
   send: Send;
   apis: {}[];
   onMessage: OnMessage;

src/index.js

@@ -1,16 +1,18 @@
 /**
  * @class
  * @description
- * `WebApiBridge` is a JavaScript class that can be used in a React Native application
- * and in a web app running in a React Native [WebView](https://facebook.github.io/react-native/docs/webview.html)
- * to support a function call interface between the two. It can also be used as an IPC mechanism
- * between a web site and content running in an iframe.
+ * `WebApiBridge` is a plain JavaScript class that can be used in a React Native application and
+ * in a web app running in a [react-native-webview](https://github.com/react-native-community/react-native-webview)
+ * to support a function call API between the two. [React Native WebView](https://facebook.github.io/react-native/docs/webview.html)
+ * will also still work. It can also be used as an IPC mechanism between other windows, for example,
+ * a web page and an iframe. The intention is for this code to be used in a web app that is using
+ * either a framework or pure JavaScript so framework code was kept out of this class.
  *
  * WebApiBridge works by passing `Message` objects between Javascript processes.
  *
  * @example <caption>Example React Native API implementation using a `WebApiBridge`.</caption>
  * import React from 'react';
- * import { WebView } from 'react-native';
+ * import { WebView } from 'react-native-webview';
  * import WebApiBridge from '@precor/web-api-bridge';
  *
  * class WebViewApi extends React.Component {
@@ -43,6 +45,7 @@
  *   render() {
  *     return (
  *       <WebView
+ *         originWhitelist={['*']}
  *         javaScriptEnabled
  *         ref={(webview) => { this.webview = webview; }}
  *         onMessage={this.onMessage}
@@ -58,15 +61,21 @@
  * @example <caption>Example `window` API implementation using a `WebApiBridge`.</caption>
  * import WebApiBridge from '@precor/web-api-bridge';
  *
+ * const iOS = (process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent));
  * class MyApi
  *   constructor() {
  *      webApiBridge = new WebApiBridge();
  *      webApiBridge.apis = [this];
- *      // webApiBridge.origin = 'https://www.mydom.com'; // should enable if in iframe
- *      // webApiBridge.targetOrigin = 'https://www.mydom.com'; // should enable if in iframe
- *      // and following would add to `window` if running in iframe instead of webview
- *      document.addEventListener('message', event => webApiBridge.onMessage(event, event.data));
- *      webApiBridge.ipc = window; // window.parent if running in iframe
+ *      // set-up orgins if not in a webview:
+ *      // webApiBridge.origin = 'https://www.mydom.com';
+ *      // webApiBridge.targetOrigin = 'https://www.mydom.com';
+ *      const eventObj = (iOS) ? window : document; // window if not in a webview
+ *      eventObj.addEventListener('message', event => webApiBridge.onMessage(event, event.data));
+ *      // for webview:
+ *      webApiBridge.ipc = window;
+ *      webApiBridge.useReactNativeWebView = true; // webview side only
+ *      // enable this for non-webview:
+ *      // webApiBridge.ipc = window; // use window.parent for an iframe
  *   }
  *
  *    // call with myApi.myApiCall(thing1, thing2).then(result => console.log(result));
@@ -95,12 +104,21 @@ class WebApiBridge {
     this.apis = [];
 
     /**
-     * Property for the Inter Process Communications object that will handle
-     * messages from the other-side. This is the `window` object on a web page
-     * and the `ref` for the `WebView` component on the React Native side.
+     * Property for ipc object to post messages to the other side. Typically the `window`,
+     * or a `window.parent` for an iframe in a normal web page. For the `WebView`
+     * component on the React Native side use the `ref`, and for the web side of
+     * [react-native-webview](https://github.com/react-native-community/react-native-webview)
+     * use `window.parent` for iOS and `window` for Android.
      */
     this.ipc = {};
 
+    /**
+     * Property that should be truthy for a webview using
+     * [react-native-webview](https://github.com/react-native-community/react-native-webview). When set
+     * `ipc.ReactNativeWebView.postMessage` will be used instead of `ipc.postMessage`.
+     */
+    this.useReactNativeWebView = undefined;
+
     /**
      * Listener functions can monitor all `Message` objects exchanged
      * between `WebApiBridge` objects. Listener functions are attached to `WebApiBridge` instances
@@ -155,7 +173,11 @@ class WebApiBridge {
   sendResponse(response) {
     response.type = 'response';
     if (this.listener) this.listener(response);
-    this.ipc.postMessage(JSON.stringify(response), this.targetOrigin);
+    if (this.useReactNativeWebView) {
+      this.ipc.ReactNativeWebView.postMessage(JSON.stringify(response));
+    } else {
+      this.ipc.postMessage(JSON.stringify(response), this.targetOrigin);
+    }
   }
 
   handleRequest(request) {
@@ -230,7 +252,11 @@ class WebApiBridge {
 
   doSend(message) {
     if (this.listener) this.listener(message);
-    this.ipc.postMessage(JSON.stringify(message), this.targetOrigin);
+    if (this.useReactNativeWebView) {
+      this.ipc.ReactNativeWebView.postMessage(JSON.stringify(message));
+    } else {
+      this.ipc.postMessage(JSON.stringify(message), this.targetOrigin);
+    }
   }
 
   /**

src/index.js.flow

@@ -29,6 +29,7 @@ export type OnMessage = (event: string, data: {}) => void
 export default class WebApiBridge {
   listener: Listener | null;
   ipc: {};
+  useReactNativeWebView: boolean;
   send: Send;
   apis: {}[];
   onMessage: OnMessage;