Webview loading linked files

Questions
#1

Hi, Im pretty new to Defold, but loving it so far.
I have been using the Webview extension, and I can get remote pages working no problems. However when I try to use local pages with linked content (like bootstrap js and css files) Im not certain how to put them in the html.
What I have done:

  • I made a folder (as recommended in the tutorial) and added it to the custom_resources for the project.
  • I then used sys.load_resource( “/custom_resources/tableview.html”) —> this works fine.

Within the tableview.html I have:
<link rel=“stylesheet” href=“refs:/custom_resources/bootstrap.min.css”>

I have tried refs:/ and file:/ and relative path etc. I cant seem to get anything to work.
This feels like it should be pretty simple . I would appreciate any help with this.
Thanks.

#2

HI @dlannan!

What tutorial are you referring to?

custom_resources are put into our internal .darc file, in a custom format, and won’t be accessible by anything other than the engine itself, and the function sys.load_resources()

You can perhaps try using bundle_resourcesinstead, since then the resources will simply be put next to the executable (or the folder you specify), and then you should be able to refer to it.

1 Like
#3

Hi Mathias,
The manual/tutorial here: https://defold.com/manuals/webview/
‘Opening and displaying a custom html page’

Thanks for the tip - I’ll try the bundle resources tonight.

2 Likes
#4

Looks like bundle resources dont work either.
I might have a dig through the webview component and see whether it can access local files - maybe using the file:// mechanism or similar. It may be simply unsupported.
Im a bit surprised no-one has tried loading a local html file with webview that uses js or css files?

---- some additional notes ----
The code seems to indicate it should be able to access the applications ‘local’ storage. So the bundle_resources should technically work, assuming thats where they end up. Bit puzzling.

#6

You can easily check the output folder after you’ve bundled the app?
Or if you’ve pressed Build HTML5, check your build folder of the project.

#7

Ok. Not sure if Im doing silly things or not with webview :slight_smile: but I sure managed to break a few things along the way here. I finally found a way that works fine (for the time being).

I created a “body” html with all the normal things in it and place it in a custom_resources folder. I also put all the dependcies in there too (css files and js files). Then I load the html body using sys.load_resources which I put into a variable. I also load all the other dependencies and put into a variable.

When I load the dependencies though I made a couple of helper functions (for js and css specifically). They are here:

function loadJSscript( filename )
local text = sys.load_resource(filename)
return "<script>"..text.."</script>"
end

function loadCSSscript( filename )
local text = sys.load_resource(filename)
return "<style>"..text.."</style>" 
end

Then I generate my own header like so:

local headerstart = [[
<html class=" js no-touch cssanimations csstransitions" lang="en" style="">
<head>
<meta charset="utf-8">
<title>Project – Scenarist</title>
<meta name="description" content="Describe your website here.">
<meta name="generator" content="GravCMS">
]]
local headerend = "</head>"

Then I add the sections together using string concat in lua like so:
local html = headerstart..cssscript..jsscript..headerend..body
And then load it into webview using open_raw. And it all works. JS works fine, the CSS looks great and I now have a nice html interface that I can interact with the app :smile:

Hope this helps others. And if there is a simpler way, Id be happy to hear about it.
Cheers.

2 Likes
#8

Oh. if people are interested in the full working project its available here. I havent licensed it yet, but it will be MIT.

3 Likes