Webview <> Thunkable Interations and Constraints

Hi,

I am exploring using a web viewer as the primary element of an app but want to be able to use some native functionality that Thunkable exposes. I have come across this in order to achieve 2 way comms between the WV and Thunkable:

That seems great and the demo projects work well. My questions are:

  1. If I wanted to take a photo in the native app, would I be able to pass that as the ‘message’ to the web view page ? If so, how ?
  2. Same comment goes for a video
  3. Any other constraints or considerations I should be aware of at all ?

I am also exploring having local html files but I believe there is (still valid ?) an issue with not being able to load assets locally ? (see below):

FROM: Thunkable X - local path for WebViewer for Android - Thunkable Discuss - Community

Thanks

1 Like

Yes, this issue is still not fixed yet.

You need to specify what you mean by take a photo or video?
Are you saving it to Cloudinary for example? If yes, then you will have a URL link to the saved photo/video which you need to pass to your HTML page.

See my demo for loading an image by selecting it from the HTML and then loading it to the native app which is the opposite of what you described but will give you the understanding of the mechanism.
https://x.thunkable.com/projectPage/61f68431c3761001dba12df1

The Web Viewer is an iframe HTML element and therefore all considerations and constrains of iframe will hold true for the Web Viewer component. A major constraint is that some sites, for security reasons, does not allow executing their pages from iframe element which is referred to as CORS policy.

2 Likes

Thanks @muneer I was concerned about the max size of the parameter to be able to pass between the two.

In answer to your question - no I’m not using Cloudinary - I have my own custom backend that all my stuff goes to / interacts with and it has a fairly decent api :slight_smile:

Really think the local assets issue should be fixed tbh.

1 Like

If you have API service already setup then you would use Web API component instead of the Web Viewer.

Any how, if you tested my demo app you will see that you can upload the image file to the app with nearly any size.

Thanks @muneer but that depends. I did consider that and in that scenario, I’d have to upload via webapi, get a url, pass that to the webviewer, it would then download and display the image.

Alternatively I could pass the image to the web viewer for immediate display and upload from there.

1 Like

@collabor8te.projectq what Have you tried? I imagine it would pass a file path but idk if that would render an image. I’ve not tried this, tbh :man_shrugging:

1 Like

It shouldn’t. This would lead to a high security concern.

1 Like

I was intending to Base64 the image (still possible in Stp correct ?) and sending that to the page…

2 Likes

If not now, @collabor8te.projectq, it should be soonish. We’re working hard to release a component that will reliably do this for us! (Convert files to base64)

1 Like

Thanks @jared I was of the opinion that StP did it but there was (is) an issue with that functionality in DnD ?

1 Like

At the moment only the Canvas image is Base64 but other images (background pictures and image component) are not.

However, if you have a Base64 URI then the image component will display it correctly.

Thanks @muneer but I was referring to being able to convert the image to base64 to send to the web page. That not possible ?

1 Like

At the moment not possible.

1 Like