yew_webview_bridge

yew_webview_bridge - 2-way communcation between yew and web-view

This crate provides a 2-way communcation bridge between web-view and yew.

For the frontend, it provides a yew service (WebViewMessageService), with which components can easily send (and receive matching responses) to web-view.

For the backend, it provides an easy handler that can be used to respond to messages from the frontend.

Internally, unique random IDs are generated for every service and message, so that responses can be matched up with the correct component and message.

Installation

The crate has to be included in both the frontend crate (the one with yew) and the backend/host crate (the one with web-view), with the appropriate feature flags.

Frontend crate

[dependencies]
yew_webview_bridge = { version = "0.1.0", features = ["frontend"] }

Backend crate

[dependencies]
yew_webview_bridge = { version = "0.1.0", features = ["backend"] }

Usage

Frontend (yew)

use yew_webview_bridge::frontend::*;

pub struct MyComponent {
  webview: WebViewMessageService,
  // .. other fields
}

// In one of the components methods (e.g. update)
send_future(
    &self.link,
    self.webview
        .send_message(self.state.value.clone()) // The value you want to send
        .map(|res: String| Msg::AddStr(res)), // Mapping the result to a component Msg
);

Backend (web-view)

use yew_webview_bridge::backend::*;

web_view::builder()
    // all the other options
    .invoke_handler(|webview, arg| {
        handle_yew_message(webview, arg, |message: String| {
            // If we return a Some(_), we send a response for this message
            Some(format!("Hello, {}", &message))
        });
        Ok(())
    })
    .run()
    .unwrap();

Acknowledgements

A large chunk of inspiration was taken from the discussion about the issue, and the resulting example repository by @mbuscemi. Thanks go out to everyone involved!

License