postMessage works on emulator but not on phone #221

tapir · 2018-12-30T14:55:49Z

try {
	function whenRNPostMessageReady(cb) {
		if(postMessage.length === 1) {
			cb();
		} else {
			setTimeout(function() {
				whenRNPostMessageReady(cb);
			}, 1000);
		}
	}
	whenRNPostMessageReady(function() {
		window.parent.postMessage('test-data-as-string', '*');
	});
}
catch(err) {
	document.getElementById("errr").innerHTML = err.message;
}

Above is my script block in the page I'm viewing from webview which is defined as below:

<WebView
	ref = {(ref) => {this.webViewRef = ref;}}
	startInLoadingState = {true}
	scrollEnabled = {false}
	useWebKit = {true}
	onMessage = {(e) => console.warn(e.nativeEvent.data)}
	source = {{uri: 'http://my-page-url'}}
/>

Works perfectly in emulator but does not work nor gives any error on my One Plus 5T (Oreo)

Any ideas?

Titozzz · 2019-01-02T10:32:33Z

i'm not sure, I have a Oneplus 3T and everything is fine. Can you give me any more informations ?

tapir · 2019-01-02T11:07:58Z

Bad news, it's not only One Plus 5T. I've tried with Galaxy S8 and it's the same.
Here is the smallest possible reproducable file and screenshots of both OnePlus 5T, Galaxy S8 and Emulator.
How can I better help debug this?

Edit: Changed the example a little bit to DOMContentLoaded just in case

import React, {Component} from 'react';
import {WebView} from 'react-native-webview';

const page = `
<html>
<head>
<script>
	function whenRNPostMessageReady(cb) {
		if(postMessage.length === 1) {
			cb();
		} else {
			setTimeout(function() {
				whenRNPostMessageReady(cb);
			}, 1000);
		}
	}
	document.addEventListener("DOMContentLoaded", function(event) {
		try {
			whenRNPostMessageReady(function() {
				window.postMessage('test-data-as-string', '*');
			});
		}
		catch(err) {
			document.getElementById('errr').innerHTML = err.message;
		}
	});
</script>
</head>
<body>
	<div id='errr'>...</div>
</body>
</html>`;

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
		<WebView
			onMessage = {(e) => console.warn(e.nativeEvent.data)}
			source = {{html: page}}
		/>
    );
  }
}

Titozzz · 2019-01-02T14:11:51Z

Can you try window.postMessage('test-data-as-string', '*'); ?

EDIT: added docs
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Syntax

tapir · 2019-01-02T14:15:43Z

Already did. Doesn't work either.

…

On Wed, 2 Jan 2019, 17:11 Thibault Malbranche ***@***.*** wrote: Can you try window.postMessage('test-data-as-string', '*'); ? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#221 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AANq8NDyQHR8VK1hGOLBF21J7o4Kq1QVks5u_L4ngaJpZM4Zk9mZ> .

tapir · 2019-01-03T08:53:50Z

Changed the example to window.postMessage('data', '*') as well to avoid confusion.

Edit: At this point I'm confident that this has nothing to do with the example itself but it's a legit bug. Can we change the label from 'question' to something more appropriate?

Titozzz · 2019-01-03T09:01:44Z

I've been able to reproduce the issue with your code. But the thing is it's working perfectly fine inside my app and I do a lot of postMessage stuff. So I'm a bit confused.

Here's how I do:

const injectedJavascript = `(function() {
  window.WebViewBridge = {
    onMessage: function() {
      return null;
    },
    send: function(data) {
      window.postMessage(data, '*');
    },
  };
  var event = new Event('WebViewBridge');
  window.dispatchEvent(event);
})()`;

const generateOnMessageFunction = data =>
  `(function() {
    window.WebViewBridge.onMessage(${JSON.stringify(data)});
  })()`;

Then to send to web (web is free to listen by overriding window.WebViewBridge.onMessage):

sendMessageToWebView = message => {
    this.webView.current.injectJavaScript(generateOnMessageFunction(message));
  };

And web can send stuff to native by:

window.WebViewBridge.send(message);

tapir · 2019-01-03T09:20:49Z

Unfortunately your example doesn't work for me at all. Not even in emulator. I've noticed you didn't the the workaround delay thing where RN-Webview bridge is not live yet. But even then it doesn't fire up a message for me. Here is how I've tried to run it.

import React, {Component} from 'react';
import {WebView} from 'react-native-webview';

const page = `
<html>
<head>
<script>
	(function() {
		window.WebViewBridge = {
			onMessage: function() {
				return null;
			},
			send: function(data) {
				window.postMessage(data, '*');
			},
		};
		var event = new Event('WebViewBridge');
		window.dispatchEvent(event);
	})();
	document.addEventListener('DOMContentLoaded', function(event) {
		try {
			window.WebViewBridge.send('test-data');
		}
		catch(err) {
			document.getElementById('errr').innerHTML = err.message;
		}
	});
</script>
</head>
<body>
	<div id='errr'>...</div>
</body>
</html>`;

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
		<WebView
			onMessage = {(e) => console.warn(e.nativeEvent.data)}
			source = {{html: page}}
		/>
    );
  }
}

Titozzz · 2019-01-03T09:24:05Z

I do, just did not post it.

const outgoingWebViewMessageQueue = queue({
  concurrency: 0,
  autostart: false,
});

let queueShouldStart = false;

export const sendMessageToWebViewBridge = message => {
  if (isClientSide()) {
    outgoingWebViewMessageQueue.push(() => {
      window.WebViewBridge.send(message);
    });
    if (queueShouldStart) {
      outgoingWebViewMessageQueue.start();
    }
  }
};

and receiveMessageFromWebViewBridge is my custom message handler for the web

const setupWebViewBridge = () => {
  queueShouldStart = true;
  outgoingWebViewMessageQueue.start();
  window.WebViewBridge.onMessage = receiveMessageFromWebViewBridge;
};

export const initializeWebViewBridge = () => {
  if (isClientSide()) {
    if (window.WebViewBridge) {
      setupWebViewBridge();
    } else {
      window.addEventListener('WebViewBridge', () => {
        setupWebViewBridge();
      });
    }
  }
};

tapir · 2019-01-03T10:56:44Z

Had to use react-native-webview-bridge for now which is using an older version of WebView.

Hoping this gets fixed soon. Maybe a common working client side JS should be injected by default before everything else. Leaving this open. Let me know if you want me to test something.

jamonholmgren · 2019-01-05T20:21:30Z

@tapir I've replicated the problem using your steps as well. Made this a bug.

If anyone wants to tackle it, there's a good replication step posted above.

Titozzz · 2019-01-07T13:53:39Z

Well we are already working on postMessage implementation, as we now the current implementation is really bad. #104

abendi · 2019-01-21T10:21:49Z

Could it be that if(postMessage.length === 1) { ... } breaks on newer Chrome versions and that your real device and emulator have different Chrome versions?
see: facebook/react-native#11594 (comment)

tapir · 2019-01-23T21:55:05Z

Could it be that if(postMessage.length === 1) { ... } breaks on newer Chrome versions and that your real device and emulator have different Chrome versions?
see: facebook/react-native#11594 (comment)

tried with postMessage.toString().includes('__REACT_WEB_VIEW_BRIDGE') still doesn't work

abendi · 2019-01-24T01:02:50Z

You can also try this:

window.onload = function() { 
  setTimeout(function() {
    window.parent.postMessage('test-data-as-string', '*');
  }, 2000);
};

This always waits for 2 seconds after the page has loaded.

tapir · 2019-01-24T11:38:24Z

How does that help? Initial example waits as much as necessary. It's recursive.

abendi · 2019-01-24T12:23:59Z

They are not the same, because some Chrome versions might report postMessage.length === 1 falsely. On those versions the callback in recursive example gets called immediately when in reality the postMessage bridge is not actually ready.
Last example waits a constant time and does not rely on versioning. Try it out to exclude that case.

tapir · 2019-01-24T12:26:29Z

That why I've tried postMessage.toString().includes('__REACT_WEB_VIEW_BRIDGE') instead of postMessage.length === 1 like you recommended.
I'll try it without any tests as well but I doubt it will work.

tapir · 2019-01-24T12:48:26Z

Didn't work unfortunately

@KoenLav

…entation (#303) fixes #29 fixes #272 fixes #221 fixes #105 fixes #66 BREAKING CHANGE: Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way. Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data). Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that: const injectedJavascript = `(function() { window.postMessage = function(data) { window.ReactNativeWebView.postMessage(data); }; })()`; Huge thanks to @jordansexton and @KoenLav!

@KoenLav

# [5.0.0](v4.1.0...v5.0.0) (2019-02-01) ### Features * **Android/iOS postMessage:** refactoring the old postMessage implementation ([#303](#303)) ([f3bdab5](f3bdab5)), closes [#29](#29) [#272](#272) [#221](#221) [#105](#105) [#66](#66) ### BREAKING CHANGES * **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way. Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data). Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that: const injectedJavascript = `(function() { window.postMessage = function(data) { window.ReactNativeWebView.postMessage(data); }; })()`; Huge thanks to @jordansexton and @KoenLav!

Titozzz · 2019-02-01T17:39:39Z

🎉 This issue has been resolved in version 5.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

tapir · 2019-02-01T21:56:19Z

Works like a charm!

koofka · 2019-02-01T22:59:03Z

@tapir Any chance you could share your generateMessage function? We are currently running into the same issue where it works perfectly in the simulator but not on the phone deploys.

tapir · 2019-02-01T23:06:56Z

@koofka I'm directly using the window.ReactNativeWebview.postMessage(strData) method. Nothing else. No timeouts nothing.
Are you sure you're on version 5.0.0? Also notice the small letter 'v' in 'Webview'. It's been wrongly documented as window.ReactNativeWebView.postMessage but later was fixed.

koofka · 2019-02-01T23:09:36Z

@tapir Yep we added those fixes, Im wondering about the other direction for messaging into the webview. The only code that has worked for that so far for us has been :

 generateOnMessageFunction = (action, payload) =>
    `(function() {
      var event = new CustomEvent('WebViewBridge', {detail: {
          action: ${JSON.stringify(action)},
          payload: ${JSON.stringify(payload)},
        }
      });
      window.dispatchEvent(event);
    })()`
`

and then a corresponding window listener in the webview

tapir · 2019-02-01T23:14:28Z

Ah sorry, I've used it like this in my app

sendToWebview(msg) {
	const { webview } = this.refs;
	webview.postMessage(msg)
};
...
...
<WebView
	ref = "webview" // you need this for above to work
	...
	...
	source = {{uri: this.uri}}/>

and like below in the html served by webview

document.addEventListener('message', function (event) {
	// do your thing here with event.data
});

koofka · 2019-02-01T23:15:16Z

interesting. Thanks for the help will give it a shot.

@KoenLav

…entation (react-native-webview#303) fixes react-native-webview#29 fixes react-native-webview#272 fixes react-native-webview#221 fixes react-native-webview#105 fixes react-native-webview#66 BREAKING CHANGE: Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way. Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data). Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that: const injectedJavascript = `(function() { window.postMessage = function(data) { window.ReactNativeWebView.postMessage(data); }; })()`; Huge thanks to @jordansexton and @KoenLav!

@KoenLav

# [5.0.0](react-native-webview/react-native-webview@v4.1.0...v5.0.0) (2019-02-01) ### Features * **Android/iOS postMessage:** refactoring the old postMessage implementation ([react-native-webview#303](react-native-webview#303)) ([f3bdab5](react-native-webview@f3bdab5)), closes [react-native-webview#29](react-native-webview#29) [react-native-webview#272](react-native-webview#272) [react-native-webview#221](react-native-webview#221) [react-native-webview#105](react-native-webview#105) [react-native-webview#66](react-native-webview#66) ### BREAKING CHANGES * **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way. Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data). Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that: const injectedJavascript = `(function() { window.postMessage = function(data) { window.ReactNativeWebView.postMessage(data); }; })()`; Huge thanks to @jordansexton and @KoenLav!

@KoenLav

# [5.0.0](react-native-webview/react-native-webview@v4.1.0...v5.0.0) (2019-02-01) ### Features * **Android/iOS postMessage:** refactoring the old postMessage implementation ([#303](react-native-webview/react-native-webview#303)) ([f3bdab5](react-native-webview/react-native-webview@f3bdab5)), closes [#29](react-native-webview/react-native-webview#29) [#272](react-native-webview/react-native-webview#272) [#221](react-native-webview/react-native-webview#221) [#105](react-native-webview/react-native-webview#105) [#66](react-native-webview/react-native-webview#66) ### BREAKING CHANGES * **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way. Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data). Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that: const injectedJavascript = `(function() { window.postMessage = function(data) { window.ReactNativeWebView.postMessage(data); }; })()`; Huge thanks to @jordansexton and @KoenLav!

Titozzz added the User: question Further information is requested label Jan 2, 2019

jamonholmgren added bug and removed User: question Further information is requested labels Jan 5, 2019

jamonholmgren added the Help wanted Extra attention is needed label Jan 5, 2019

Titozzz closed this as completed Feb 1, 2019

This comment has been minimized.

Sign in to view

Titozzz added the released label Feb 1, 2019

Titozzz added Type: bug report and removed Type: bug report bug labels Mar 20, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

postMessage works on emulator but not on phone #221

postMessage works on emulator but not on phone #221

tapir commented Dec 30, 2018 •

edited

Loading

Titozzz commented Jan 2, 2019

tapir commented Jan 2, 2019 •

edited

Loading

Titozzz commented Jan 2, 2019 •

edited

Loading

tapir commented Jan 2, 2019 via email

tapir commented Jan 3, 2019 •

edited

Loading

Titozzz commented Jan 3, 2019

tapir commented Jan 3, 2019 •

edited

Loading

Titozzz commented Jan 3, 2019 •

edited

Loading

tapir commented Jan 3, 2019

jamonholmgren commented Jan 5, 2019

Titozzz commented Jan 7, 2019

abendi commented Jan 21, 2019

tapir commented Jan 23, 2019

abendi commented Jan 24, 2019 •

edited

Loading

tapir commented Jan 24, 2019

abendi commented Jan 24, 2019

tapir commented Jan 24, 2019

tapir commented Jan 24, 2019

This comment has been minimized.

Titozzz commented Feb 1, 2019

tapir commented Feb 1, 2019

koofka commented Feb 1, 2019

tapir commented Feb 1, 2019

koofka commented Feb 1, 2019

tapir commented Feb 1, 2019 •

edited

Loading

koofka commented Feb 1, 2019

postMessage works on emulator but not on phone #221

postMessage works on emulator but not on phone #221

Comments

tapir commented Dec 30, 2018 • edited Loading

Titozzz commented Jan 2, 2019

tapir commented Jan 2, 2019 • edited Loading

Titozzz commented Jan 2, 2019 • edited Loading

tapir commented Jan 2, 2019 via email

tapir commented Jan 3, 2019 • edited Loading

Titozzz commented Jan 3, 2019

tapir commented Jan 3, 2019 • edited Loading

Titozzz commented Jan 3, 2019 • edited Loading

tapir commented Jan 3, 2019

jamonholmgren commented Jan 5, 2019

Titozzz commented Jan 7, 2019

abendi commented Jan 21, 2019

tapir commented Jan 23, 2019

abendi commented Jan 24, 2019 • edited Loading

tapir commented Jan 24, 2019

abendi commented Jan 24, 2019

tapir commented Jan 24, 2019

tapir commented Jan 24, 2019

This comment has been minimized.

Titozzz commented Feb 1, 2019

tapir commented Feb 1, 2019

koofka commented Feb 1, 2019

tapir commented Feb 1, 2019

koofka commented Feb 1, 2019

tapir commented Feb 1, 2019 • edited Loading

koofka commented Feb 1, 2019

tapir commented Dec 30, 2018 •

edited

Loading

tapir commented Jan 2, 2019 •

edited

Loading

Titozzz commented Jan 2, 2019 •

edited

Loading

tapir commented Jan 3, 2019 •

edited

Loading

tapir commented Jan 3, 2019 •

edited

Loading

Titozzz commented Jan 3, 2019 •

edited

Loading

abendi commented Jan 24, 2019 •

edited

Loading

tapir commented Feb 1, 2019 •

edited

Loading