Android Question Problems with HTML5 web apps in webview

Jack Cole

Well-Known Member
Licensed User
Longtime User
I can't seem to get any examples of HTML5 apps to work. It seems like it is maybe not loading some things dynamically. I have tried different emulators. It works fine if I load the app from a web address.

Here is one example that I wrote many years ago. I assume there is something changed with how the webview works. I don't get errors. It just doesn't load images and the dynamically generated HTML5 doesn't seem to be working correctly. Seems like the issue probably started around late last year. Any ideas?

1628123754699.png
 

JohnC

Expert
Licensed User
Longtime User
Some quick thoughts (without looking at your code).

1) Make sure you are using the chromeclient with webview
2) Storage permissions have changed recently, so loading any resources might need some adjustment to work around the new restrictions.
 
Upvote 0

Jack Cole

Well-Known Member
Licensed User
Longtime User
Thanks, but I am loading the chromeclient. Also, I have tried it with older Android versions, so I don't see how #2 can be an issue.

This is code that worked before. I have tried several different apps with different HTML5/JS apps, and different Android versions. There must be something different about how B4A and/or related core libraries are handling things.
 
Upvote 0

FrostCodes

Active Member
Licensed User
Add this before you try to load the page

B4X:
    WebViewExtras1.addWebChromeClient(WebView1, "WebViewExtras1")
    WebViewSetting1.setDatabaseEnabled(WebView1, True)
    WebViewSetting1.setDOMStorageEnabled(WebView1, True)
    WebViewSetting1.setGeolocationEnabled(WebView1, True)
    
    WebViewSetting1.setJavaScriptCanOpenWindowsAutomatically(WebView1, False)
    WebViewSetting1.setSaveFormData(WebView1, False)
    WebViewSetting1.setSavePassword(WebView1, False)
    WebViewSetting1.setSupportZoom(WebView1, False)
    WebViewSetting1.setUseWideViewPort(WebView1, False)
    
    WebViewSetting1.setDatabasePath(WebView1, "")
    WebViewExtras1.addJavascriptInterface(WebView1, "B4X")
 
Upvote 0

Jack Cole

Well-Known Member
Licensed User
Longtime User
Tried that, and it didn't help. Thanks for trying though.

I think I have figured out the issue. There must have been a change in the b4a build process that does not allow you to access files that are in sub folders from an HTML page. I have attached a simple example where the image in an HTML page is located in a sub folder of the assets directory. I am wondering if this is something that @Erel could fix. Simple example attached showing how it won't load an image from a sub folder.

I know you could maybe copy them to a different folder, but that is not optimal at all (especially for large html5/JS projects). Imagine taking 10 seconds at startup. Plus it is just not great technically.
 

Attachments

  • html5wrapper.zip
    7.1 KB · Views: 187
Upvote 0

FrostCodes

Active Member
Licensed User
Tried that, and it didn't help. Thanks for trying though.

I think I have figured out the issue. There must have been a change in the b4a build process that does not allow you to access files that are in sub folders from an HTML page. I have attached a simple example where the image in an HTML page is located in a sub folder of the assets directory. I am wondering if this is something that @Erel could fix. Simple example attached showing how it won't load an image from a sub folder.

I know you could maybe copy them to a different folder, but that is not optimal at all (especially for large html5/JS projects). Imagine taking 10 seconds at startup. Plus it is just not great technically.

I checked your code its wrong... i would send a fix later as i am a little weak now
 
Upvote 0

Jack Cole

Well-Known Member
Licensed User
Longtime User
Thanks. I know I can modify the HTML to reference files differently and maybe it will work, but that is not practical for a huge HTML app that references sub-folders. Again, this is all code that would have worked in the past. I think the change was when @Erel made the change to allow file groups in the IDE.
 
Upvote 0

FrostCodes

Active Member
Licensed User
You cannot use sub folders with B4a.. it doesn't work... Inside the IDE you can group files but this is not a real sub folder just a virtual group that only works in the IDE not your app to use sub folders, what i do is i compress all my files and extract them to the user internal memory and load the index file from there...

its a neat solution and i use this to run vue js with b4a
 
Upvote 0

Jack Cole

Well-Known Member
Licensed User
Longtime User
What I am saying is that you could use a sub folder before changes were made to b4a. I use the zip option on b4i, because there is no other option. I would prefer not to do that as it takes a lot of time on some devices to extract 3000+ files. I will check with Erel to see if it is a bug or if it was intended for some reason.
 
Upvote 0

asales

Expert
Licensed User
Longtime User
What I am saying is that you could use a sub folder before changes were made to b4a.

I had the same problem with a lib to WhatsApp stickers, that uses files in a subfolder, when the B4A 10.5+ was released. It works fine until B4A 10.2.
Erel says in this post that it happens because: "The behavior change is related to the underlying AAPT2 tool, which is used in B4A 10.7+"
Happily I has only a dozen of files in several subfolders, but 3000 files is a huge number.
 
Upvote 0

Jack Cole

Well-Known Member
Licensed User
Longtime User
I had the same problem with a lib to WhatsApp stickers, that uses files in a subfolder, when the B4A 10.5+ was released. It works fine until B4A 10.2.
Erel says in this post that it happens because: "The behavior change is related to the underlying AAPT2 tool, which is used in B4A 10.7+"
Happily I has only a dozen of files in several subfolders, but 3000 files is a huge number.

Thanks for the info. Maybe it is not fixable, and I'll just have to deal with it.
 
Upvote 0
Top