Update custom protocol example (#315)

* Update custom protocol example * Cargo fmt * Add icon as showcase * Fix delay on Windows
tauri-apps · Jun 28, 2021 · d9c3b9a · d9c3b9a
1 parent ffaa7d0
commit d9c3b9a
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 54 deletions.
diff --git a/examples/custom_protocol.rs b/examples/custom_protocol.rs
@@ -3,6 +3,8 @@
 // SPDX-License-Identifier: MIT
 
 fn main() -> wry::Result<()> {
+  use std::fs::{canonicalize, read};
+
   use wry::{
     application::{
       event::{Event, StartCause, WindowEvent},
@@ -20,60 +22,27 @@ fn main() -> wry::Result<()> {
 
   let _webview = WebViewBuilder::new(window)
     .unwrap()
-    .with_custom_protocol("wry.dev".into(), move |_, requested_asset_path| {
-      // remove the protocol from the path for easiest match
-      let requested_asset_path = requested_asset_path.replace("wry.dev://", "");
-
-      // sample index.html file
-      // files can be bundled easilly into the binary
-      // with https://doc.rust-lang.org/std/macro.include_bytes.html
-
-      let index_html = r#"
-      <!DOCTYPE html>
-      <html lang="en">
-        <head>
-          <meta charset="UTF-8" />
-          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        </head>
-        <body>
-          <h1>Welcome to WRY!</h1>
-          <a href="/hello.html">Link</a>
-          <script type="text/javascript" src="/hello.js"></script>
-        </body>
-      </html>"#;
-
-      // sample hello.js file
-      let hello_js = "console.log(\"hello from javascript\");";
-
-      // sample hello.html file
-      let hello_html = r#"
-      <!DOCTYPE html>
-      <html lang="en">
-        <head>
-          <meta charset="UTF-8" />
-          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        </head>
-        <body>
-          <h1>Sample page!</h1>
-          <a href="/index.html">Back home</a>
-          <script type="text/javascript" src="/hello.js"></script>
-        </body>
-      </html>"#;
-
-      match requested_asset_path.as_str() {
-        // if our path match /hello.html
-        "/hello.html" => Ok((hello_html.as_bytes().into(), "text/html".into())),
-        // if our path match /hello.js
-        "/hello.js" => Ok((hello_js.as_bytes().into(), "text/javascript".into())),
-        // other paths should resolve index
-        // more logic can be applied here
-        _ => Ok((index_html.as_bytes().into(), "text/html".into())),
+    .with_custom_protocol("wry".into(), move |_, requested_asset_path| {
+      // Remove url scheme
+      let path = requested_asset_path.replace("wry://", "");
+      // Read the file content from file path
+      let content = read(canonicalize(&path)?)?;
+
+      // Return asset contents and mime types based on file extentions
+      // If you don't want to do this manually, there are some crates for you.
+      // Such as `infer` and `mime_guess`.
+      if path.ends_with(".html") {
+        Ok((content, String::from("text/html")))
+      } else if path.ends_with(".js") {
+        Ok((content, String::from("text/javascript")))
+      } else if path.ends_with(".png") {
+        Ok((content, String::from("image/png")))
+      } else {
+        unimplemented!();
       }
     })
     // tell the webview to load the custom protocol
-    .with_url("wry.dev://")?
+    .with_url("wry://examples/index.html")?
     .build()?;
 
   event_loop.run(move |event, _, control_flow| {

diff --git a/examples/hello.html b/examples/hello.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+<body>
+  <h1>Sample page!</h1>
+  <a href="/index.html">Back home</a>
+  <script type="text/javascript" src="/hello.js"></script>
+</body>
+</html>
diff --git a/examples/hello.js b/examples/hello.js
@@ -0,0 +1 @@
+console.log("hello from javascript");
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</head>
+<body>
+  <h1>Welcome to WRY!</h1>
+  <a href="/hello.html">Link</a>
+  <script type="text/javascript" src="/hello.js"></script>
+  <img src="/icon.png" />
+</body>
+</html>
diff --git a/src/webview/webview2/win32/mod.rs b/src/webview/webview2/win32/mod.rs
@@ -137,7 +137,7 @@ impl InnerWebView {
           // See https://github.com/MicrosoftEdge/WebView2Feedback/issues/73
           custom_protocol_names.insert(name.clone());
           w.add_web_resource_requested_filter(
-            &format!("https://custom-protocol-{}*", name),
+            &format!("https://custom.protocol.{}*", name),
             webview2::WebResourceContext::All,
           )?;
           let env_clone = env_.clone();
@@ -146,7 +146,7 @@ impl InnerWebView {
             let uri = args.get_request()?.get_uri()?;
             // Undo the protocol workaround when giving path to resolver
             let path = &uri.replace(
-              &format!("https://custom-protocol-{}", name),
+              &format!("https://custom.protocol.{}", name),
               &format!("{}://", name),
             );
 
@@ -195,7 +195,7 @@ impl InnerWebView {
               // See https://github.com/MicrosoftEdge/WebView2Feedback/issues/73
               url_string = url.as_str().replace(
                 &format!("{}://", name),
-                &format!("https://custom-protocol-{}", name),
+                &format!("https://custom.protocol.{}", name),
               )
             }
             w.navigate(&url_string)?;