Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ios scheme handler #209

Open
wants to merge 24 commits into
base: master
from

Conversation

Projects
None yet
7 participants
@ccorcos
Copy link
Contributor

commented Dec 13, 2018

This PR is on top of #158 and #173. Also in response to #135.

Its lacking in documentation in the README but the types are all there and more explanation here: ccorcos#1.

Basically, scheme handlers and intercepting requests in the webview is full of quirks. Things like the body data doesn't go through on POST requests and CORS requests don't work on Android when serving from a URL scheme.

The goal here is to be able to intercept requests, in my case for serving cached files, but there's all kinds of things you can do with this. Here's how it works...

On iOS:

function App() {
  return (
    <WebView
      source={{uri: "myapp://example.com"}}
      urlScheme="myapp"
      onUrlSchemeRequest={async ({url, method, headers}) => {
        // You can make a requests and return your own response.
        return {
          type: "response",
          url,
          status: 200,
          headers, // response headers, not request headers.
          body: "" // response body. optional.
        
        }

        // You can manipulate the the request if you want and the native code
        // will execute the request and pipe it back to the native webview.
        return {
          type: "redirect",
          url, 
          method, 
          headers, // request headers.
          body: "" // request body. optional.
        }

        // You can return a path to a local file and the native code will serve this
        // file for you complete with response headers.
        return {
          type: "file",
          file: "/absolute/path/to/file.ext", // Recommend using react-native-fs
          url,
          headers, // response headers, not request headers.
        }
      }}
    />	
  )
}

On Android, we simply override the the http and https url scheme and let you specify the base intercept url. But the rest of the behavior is the same.

function App() {
  return (
    <WebView
      source={{uri: "https://example.com"}}
      baseInterceptUrl="https://example.com"
      onUrlSchemeRequest={async ({url, method, headers}) => {
        // Same as iOS
      }}
    />	
  )
}

I know this is a little bit lacking in some places...

  1. I'm not feature flagging properly for iOS 11 and I'm sure there's some gradle versioning stuff for everything to work properly. Believe it or not, we're not native app developers so we're just winging it.
  2. There's a lack of documentation in the README to make this feature discoverable.

I have to move on and work on other things but if someone is willing to help get this across the finish line, I'm happy to help.

ccorcos and others added some commits Nov 21, 2018

WIP: shouldInterceptRequest now flows through JS.
Able to make the request from Android -> JS -> Android.
Next step is to mutate the response.
Working implementation for baseInterceptUrl.
Added the propery baseInterceptUrl to a webview routes all requests
for a URL through a scheme handler in JS.
Add support for file responses to onUrlSchemeRequest.
1. Migrate back down to API version 21.
@jamonholmgren

This comment has been minimized.

Copy link
Collaborator

commented Dec 13, 2018

This looks really good @ccorcos . Well done for a "not native app developer". :)

We'll wait until it is more mature and people have used it a bit before reviewing, testing, and merging. So, basically, let's hang onto this PR and see whether it's useful to people

@jamonholmgren

This comment has been minimized.

Copy link
Collaborator

commented Dec 29, 2018

@ccorcos Can you resolve conflicts and update to master?

@ccorcos

This comment has been minimized.

Copy link
Contributor Author

commented Jan 3, 2019

@jamonholmgren I'll try to get around to this soon.

@Titozzz Titozzz force-pushed the react-native-community:master branch from 6551528 to 79afbd6 Feb 1, 2019

@harrisrobin

This comment has been minimized.

Copy link

commented Mar 7, 2019

hey @ccorcos , would love to test this! Looks great, let us know when you get a chance to resolve the conflicts 😄

@RangerMauve

This comment has been minimized.

Copy link

commented Mar 9, 2019

Would it be okay if I did a new PR with the merge fixes?

@Titozzz

This comment has been minimized.

Copy link
Collaborator

commented Mar 11, 2019

@RangerMauve You can start from his branch, I don't think he would mind that.

@adbs1

This comment has been minimized.

Copy link

commented Mar 17, 2019

Hi @RangerMauve, have you got an active plan to merge commit some merge fixes?

@RangerMauve

This comment has been minimized.

Copy link

commented Mar 18, 2019

I think I have it working in this repo

I've had to put my work on it on pause though. 😅

edit: updated link URL

@ccorcos

This comment has been minimized.

Copy link
Contributor Author

commented Mar 18, 2019

I haven't had time to get around to this but I'm happy to check out your PR @RangerMauve

@RangerMauve

This comment has been minimized.

Copy link

commented Mar 18, 2019

@ccorcos I think it's about as functional as it'll get. I stopped using it because the performance of the thing I was trying to do was awful and requests kept timing out. 😅

@ccorcos

This comment has been minimized.

Copy link
Contributor Author

commented Mar 18, 2019

@RangerMauve

This comment has been minimized.

Copy link

commented Mar 18, 2019

I'm trying to load content from the dat protocol: https://github.com/RangerMauve/datmobile

I don't think it's a problem with the changes to react-native-webview, it's entirely a problem with getting dat working in react-native being slow. 😅

@ccorcos

This comment has been minimized.

Copy link
Contributor Author

commented Mar 18, 2019

@RangerMauve

This comment has been minimized.

Copy link

commented Mar 18, 2019

The problem is that doing cryptography / file access / peer discovery in the RN thread is really slow, so by the time the content is ready to be served to the webview, the request has already timed out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.