https://github.com/ronhe/rn-webview-rpc
Add RPC capabilities to a React Native WebView component
https://github.com/ronhe/rn-webview-rpc
bridge comlink react react-native rpc webview
Last synced: about 1 month ago
JSON representation
Add RPC capabilities to a React Native WebView component
- Host: GitHub
- URL: https://github.com/ronhe/rn-webview-rpc
- Owner: ronhe
- License: mit
- Created: 2018-03-23T10:32:12.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:17:34.000Z (over 2 years ago)
- Last Synced: 2023-12-26T17:17:56.511Z (over 1 year ago)
- Topics: bridge, comlink, react, react-native, rpc, webview
- Language: JavaScript
- Homepage:
- Size: 8.52 MB
- Stars: 25
- Watchers: 2
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Native WebView RPC
[](https://www.npmjs.com/package/rn-webview-rpc)
[](https://www.jsdelivr.com/package/npm/rn-webview-rpc)
[](https://travis-ci.org/ronhe/rn-webview-rpc)
RN-WebView-RPC's goal is to allow calls to native API from a web
application that runs inside a `WebView` component, and vice versa.
It can be used as a bridge between the native and the web
parts of hybrid apps, for example,
requesting native geo-location permissions from withing a `WebView`.
RN-WebView-RPC integrates React-Native's
[WebView](https://github.com/react-native-community/react-native-webview)
component together with Google's
[Comlink](https://github.com/GoogleChromeLabs/comlink)
library into an easy-to-use package.
For example, the snippet below allows opening a native alert that lets
the user to choose the background color of an html web page.
```javascript
// App.js
import React from 'react';
import { View, Alert } from 'react-native';
import WebViewRpc from 'rn-webview-rpc/native';
import html from './index.html';
export default class App extends React.Component {
render() {
return (
);
}
}
```
```javascript
// index.html
const proxy = rnRpc.proxy();
await proxy.Alert.alert(
'What is your favorite color?',
'We got green and blue',
[
{text: 'Ask me later'},
{text: 'Green', onPress: rnRpc.proxyValue(() => setBgColor('green'))},
{text: 'Blue', onPress: rnRpc.proxyValue(() => setBgColor('blue'))},
],
{ cancelable: false }
);
function setBgColor(color) {
document.body.style.backgroundColor = color;
}
```
## Installation
### React-Native End Installation
First, install the `react-native-webview` peer dependency, by following the
instruction [here](https://github.com/react-native-community/react-native-webview/blob/master/docs/Getting-Started.md#react-native-webview-getting-started-guide).
For most projects, that would be:
```bash
$ npm install --save react-native-webview
$ react-native link react-native-webview
```
Then, install `rn-webview-rpc` from NPM:
```bash
$ npm install --save rn-webview-rpc
```
Finally, in your code, import the `WebViewRpc` component:
```javascript
import WebViewRpc from 'rn-webview-rpc/native';
```
**Note**: If you encounter this error:
> Objects are not valid as a React child...
then you should try adding the following imports
```javascript
import 'core-js/es6/map';
import 'core-js/es6/symbol';
```
at the top of your app's JavaScript entry point.
See [this thread](https://github.com/facebook/react-native/issues/18542)
for more info.
### Web End Installation
You can either install from NPM or from a CDN.
#### Install from NPM
Install `rn-webview-rpc` from NPM (exactly as for the React-Native project):
```bash
$ npm install --save rn-webview-rpc
```
Then, in your code, import the `rnRpc` object:
```javascript
import rnRpc from 'rn-webview-rpc/web';
```
#### Install from a CDN
##### Install from a CDN automatically
Let the React-Native's `WebViewRpc` inject an HTML script tag to the website,
by setting the `injectScriptTag` prop to `true`:
```javascript
```
##### Install from a CDN manually
Add a `script` tag to your HTML's `head`:
```html
## Under the Hood
> Reading this section is most definitely optionally :)
The major pain coding this package was helping the
delightful Comlink library to work in the native environment (and old browsers).
Comlink is designed for web workers environment, and
unfortunately the native JavaScript engine is more limited.
1. `WebView`'s messaging interface supports only string messages.
Thankfully, solving this issue was easy,
since the Comlink library already includes a
[`MessageChannelAdapter`](https://github.com/ronhe/comlink/blob/master/messagechanneladapter.ts),
to support string based message channels, such as WebRTC.
What remained to be done is to translate the
`postMessage`/`onMessage` WebView's message API to a
`send`/`addEventListener` endpoint.
2. The ES6 `proxy` object is unsupported natively. This was solved using the
[Proxy Polyfill](https://github.com/GoogleChrome/proxy-polyfill)
(with some
[limitations](https://github.com/ronhe/rn-webview-rpc#limitations)).
Moreover, to allow `proxy` to work in React-Native, [a few changes
were required in
Comlink](https://github.com/GoogleChromeLabs/comlink/commits?author=ronhe).
3. The `MessageChannel` and `MessagePort` objects are missing
in the native environment. Since no polyfills are available,
to address this problem I had to write pretty
simple degenerated polyfills.
4. More polyfills: The `Object` and `ArrayBuffer` behave slightly
inconsistently in different environments. Hence, I have them
overridden by polyfills when necessary.