We have a .NET Maui App use-case where we are dynamically loading WASM from Azure, in which we want to save the following four (Emscripten-generated) files in a tmp folder that we can access using a Custom Component, after which we will dispose of the content.
In addition, we have a use-case where we want to embed all of the same resources in a single html div snippet, that would work universlly, regardless of being used in a .NET Blazor app, or just consumed by any web page on the internet.
The files are:
index.html
index.wasm
index.data
index.js
- the demo is at https://yatter.itch.io/sdl2wasm
- the repo to resolve this issue is at https://github.com/YatterOfficial/WASM.MobileBanner
- both are discussed further down.
- we are trying to create a simple set of rules for creating WASM Banner Advertisements, using SDL2 and C++, in all of the standard industry sizes that are outlined at https://www.match2one.com/blog/standard-banner-sizes/
In Xamarin Forms, we'd load dynamic content like this as a string, and although we didn't do WASM, we regularly embedded all the assets in the HTML file itself - either as scripts and CSS, or in the case of the ilk of images, as Base64, etc, then loaded the string directly to the WebView.
What's the best pattern in .NET Maui to do this type of thing? And hopefully not a string-side-loading solution like Xamarin Forms, with the reason being that the Custom Component that we want to consume this, is just one ListItem in a list of ListItems.
I've already succesfully embedded a .wasm file in an HTML file as var bytes = "data:application/wasm;base64,AGFzbQEAAAABBAFgAAADAwIAAAQFAXABAQEFAw ...", which is a doddle, the .data file seems a lot more challenging, and arguably we could head down the path of wrapping all of this in a Div snippet and passing that to the Custom Component - but I was wondering if there was another route, in which I could save all four files to storage and then serve them up to a Custom Blazor Component?
I'd welcome answers on two fronts:
- How to embed WASM in an HTML snippet, to be consumed by a Custom Component, or indeed, just capable of being shoved as an html snippet in any web page on the web; and,
- How to store the four Emscriptem-generated files above in a temporary location, to be consumed by a Custom Blazor Component.
For (1) above, I've set up a basic demo at https://yatter.itch.io/sdl2wasm which consists of the four files outlined above, and which the challenge is to embed everything in a single HTML div, in a single HTML page. The repo for that demo is at https://github.com/YatterOfficial/WASM.MobileBanner and any tips, to complete pull-requests to solve the problem, would be appreiated.
Route (1) is quite challenging, and although it is our desired option, Route (2) (if possible), would allow us to fast-track the product whilst ironing out all of the challenges of route 1.
In terms of the big picture, the reason behind this challenge is that being able to easily create banner advertisements using WASM in a single snippet, would be revolutionary, in the sense that we used to make banners in the ilk of Flash, until plugins like that were deprecated.
It seems to me that the WASM revolution wont quite be embraced until we can not only embed everything in a single div tag, but embed multiple WASM-div snippets in a single page. No doubt after resolving this, the subject will change to empowering multiple WASM-divs in a single page, being able to talk to each other. Naturally, they don't all have to be visible components, each with their own canvas.
I'm all ears on this :D
Thanks!