Add WebView JavaScript channels (Dart side). #1116

amirh · 2019-01-25T00:20:42Z

Allows JavaScript code running in the WebView to send messages that will be received by the Flutter app's Dart code.

To keep the PRs smaller this does not include the platform side implementations which will be sent in following PRs.

Right now there are no return values on the JavaScript side, we could think of returning a JavaScript promise (or a promise equivalent) in the future, but as a first step I start without it (evaluateJavascript can be used to pass messages in the other direction so this shouldn't be a blocking limitation).
I believe that if we end up adding a return value on the JavaScript side this could be done without making a breaking change.

Sample usage

Dart:

WebView(
  javascriptChannels: <JavascriptChannel>[
    JavascriptChannel(name: 'Print', onMessageReceived: (String msg) {print(msg); }),
  ].toSet(),
),

JavaScript (running inside the WebView):

Print.postMessage('Hello!');

Fixes: flutter/flutter#24837

mklim

LGTM

mklim · 2019-01-25T18:47:40Z

packages/webview_flutter/test/webview_flutter_test.dart

      throwsA(anything),
    );
  });
+


nit: It looks like the formatting here is off, it's breaking CI.

mklim · 2019-01-25T19:11:03Z

packages/webview_flutter/lib/webview_flutter.dart

+class JavascriptChannel {
+  /// Constructs a Javascript channel.
+  ///
+  /// The parameters `name` and `onMessageReceived` must not be null.


What happens if somebody tries to pass in foo.bar as a name here? I'm asking because it's a common practice to try and namespace everything under one global namespaced foo object if you need to start creating objects in the global namespace at all in WFE development, so it's something that people are likely to try.

It's described as "Nested Namespacing" on this page.

Good catch.

I changed it to require that channel names follow the Dart identifier naming rules (only letters digits and underscores allowed, can't start with a digit).

mklim · 2019-01-25T20:27:00Z

packages/webview_flutter/lib/webview_flutter.dart

+  /// JavaScript code can call:
+  ///
+  /// ```javascript
+  /// Print.postMessage('Hello');


I think it would be worth establishing here how namespace collision is handled on the JS side. What happens if somebody tries to name their channel Array?

Discussed offline, we're going to override whatever window property that is there as this is what Android is doing. We don't think it's a security risk as the app developer has the power to do something like this anyway by injecting JavaScript.

window properties.

amirh · 2019-01-31T00:53:36Z

@mklim PTAL, changes since your last review:

Updated documentation: b57117f
Bump version and update change log: 59e1248
Updated the example app: 9a350dd

iOS implementation of the method channel API for adding and removing JavaScript channels. #1116 adds the Dart side support, the current PR will land first. flutter/flutter#24837

mklim

LGTM

mklim · 2019-01-31T00:56:54Z

packages/webview_flutter/example/lib/main.dart

-        },
-      ),
+      // We're using a Builder here so we have a context that is below the Scaffold
+      // to allow calling Scaffold.maketoast


nit: "scaffold.makeToast"? It doesn't look like this is getting directly called anywhere though.

thanks, fixed.

Platform implementation of the method channel API for adding and removing JavaScript channels. #1116 adds the Dart side support, the current PR will land first. flutter/flutter#24837

iOS implementation of the method channel API for adding and removing JavaScript channels. flutter#1116 adds the Dart side support, the current PR will land first. flutter/flutter#24837

Platform implementation of the method channel API for adding and removing JavaScript channels. flutter#1116 adds the Dart side support, the current PR will land first. flutter/flutter#24837

Allows JavaScript code running in the WebView to send messages that will be received by the Flutter app's Dart code. To keep the PRs smaller this does not include the platform side implementations which will be sent in following PRs. Right now there are no return values on the JavaScript side, we could think of returning a JavaScript promise (or a promise equivalent) in the future, but as a first step I start without it (`evaluateJavascript` can be used to pass messages in the other direction so this shouldn't be a blocking limitation). I believe that if we end up adding a return value on the JavaScript side this could be done without making a breaking change. ### Sample usage Dart: ```dart WebView( javascriptChannels: <JavascriptChannel>[ JavascriptChannel(name: 'Print', onMessageReceived: (String msg) {print(msg); }), ].toSet(), ), ``` JavaScript (running inside the WebView): ```javascript Print.postMessage('Hello!'); ``` Fixes: flutter/flutter#24837

This reverts commit c1c59a0.

Platform implementation of the method channel API for adding and removing JavaScript channels. flutter#1116 adds the Dart side support, the current PR will land first. flutter/flutter#24837

Allows JavaScript code running in the WebView to send messages that will be received by the Flutter app's Dart code. To keep the PRs smaller this does not include the platform side implementations which will be sent in following PRs. Right now there are no return values on the JavaScript side, we could think of returning a JavaScript promise (or a promise equivalent) in the future, but as a first step I start without it (`evaluateJavascript` can be used to pass messages in the other direction so this shouldn't be a blocking limitation). I believe that if we end up adding a return value on the JavaScript side this could be done without making a breaking change. ### Sample usage Dart: ```dart WebView( javascriptChannels: <JavascriptChannel>[ JavascriptChannel(name: 'Print', onMessageReceived: (String msg) {print(msg); }), ].toSet(), ), ``` JavaScript (running inside the WebView): ```javascript Print.postMessage('Hello!'); ``` Fixes: flutter/flutter#24837

Platform implementation of the method channel API for adding and removing JavaScript channels. flutter#1116 adds the Dart side support, the current PR will land first. flutter/flutter#24837

Allows JavaScript code running in the WebView to send messages that will be received by the Flutter app's Dart code. To keep the PRs smaller this does not include the platform side implementations which will be sent in following PRs. Right now there are no return values on the JavaScript side, we could think of returning a JavaScript promise (or a promise equivalent) in the future, but as a first step I start without it (`evaluateJavascript` can be used to pass messages in the other direction so this shouldn't be a blocking limitation). I believe that if we end up adding a return value on the JavaScript side this could be done without making a breaking change. ### Sample usage Dart: ```dart WebView( javascriptChannels: <JavascriptChannel>[ JavascriptChannel(name: 'Print', onMessageReceived: (String msg) {print(msg); }), ].toSet(), ), ``` JavaScript (running inside the WebView): ```javascript Print.postMessage('Hello!'); ``` Fixes: flutter/flutter#24837

kingctan · 2019-10-11T23:30:12Z

is there any way to add callback in js side which can postmessage and get a return object?

yexiaodong · 2020-10-26T03:45:25Z

is there any way to add callback in js side which can postmessage and get a return object?

Add WebView JavaScript channels (Dart side only).

0e16deb

googlebot added the cla: yes label Jan 25, 2019

amirh requested a review from mklim January 25, 2019 00:20

mklim approved these changes Jan 25, 2019

View reviewed changes

amirh added 5 commits January 25, 2019 13:29

format

015f025

Enforce channel names

452a45c

Pass messages as JavascriptMessage objects. Add a note about overriding

1699836

window properties.

format

83be1fa

fix channel cache update cache bug

2c423dd

amirh mentioned this pull request Jan 29, 2019

WebView JavasScript channels Android implementation. #1130

Merged

format with stable flutter

57b3cd5

amirh mentioned this pull request Jan 30, 2019

WebView JavaScript channels - iOS implementation. #1139

Merged

amirh added 3 commits January 30, 2019 16:23

Document when adding a channel takes affect.

b57117f

update changelog and bump version

59e1248

Use JavascriptChannels in the example app

9a350dd

amirh force-pushed the webview_js_dart branch from cf433da to 9a350dd Compare January 31, 2019 00:52

mklim approved these changes Jan 31, 2019

View reviewed changes

fix example comment

61807a1

amirh mentioned this pull request Feb 4, 2019

[WebView] Provide a Dart<->Javascript communication channel flutter/flutter#24837

Closed

amirh changed the title ~~Add WebView JavaScript channels (Dart side only).~~ Add WebView JavaScript channels (Dart side). Feb 4, 2019

amirh merged commit ac64477 into flutter:master Feb 4, 2019

andreidiaconu added a commit to andreidiaconu/plugins that referenced this pull request Feb 17, 2019

Revert "Add WebView JavaScript channels (Dart side). (flutter#1116)"

b96792c

This reverts commit c1c59a0.

Add WebView JavaScript channels (Dart side). #1116

Add WebView JavaScript channels (Dart side). #1116

Uh oh!

Conversation

amirh commented Jan 25, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Sample usage

Uh oh!

mklim left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amirh commented Jan 31, 2019

Uh oh!

mklim left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kingctan commented Oct 11, 2019

Uh oh!

yexiaodong commented Oct 26, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

amirh commented Jan 25, 2019 •

edited

Loading