@DavidSM100 (@DavidSM10) and me (95% @DavidSM100) have worked on this… I was gonna say “for a while” but it actually took basically no time.
Stop watching the video and go Try It yourself:
How
Very easy.
What you are seeing is our fork of the webxdc apps website (which is fully static), with an added “Try it” button which is simply a link to another webiste (which can be a subdomain of the original one).
Believe it or not, but that other website is also static (i.e. doesn’t have any server-side logic). All that is needed for it to work is a bit of DNS and ServiceWorker magic. The instructions to set such a website up, as well as its source code, can be found here: GitHub - davidsm10/web-app-runner: Run web apps inside a zip file with the browser..
The changes to the app store code are also trivial:
App store diff
diff --git a/main.js b/main.js
index 5e616b4..3537d1e 100644
--- a/main.js
+++ b/main.js
@@ -18,6 +18,7 @@ dayjs.extend(dayjs_plugin_localizedFormat);
// without a trailing slash
const xdcget_export = "https://apps.testrun.org";
+const tryItBaseUrl = "https://webxdc-try-it.xyz";
/*
Each <App> is implemented as a button that, when clicked, would show
@@ -48,6 +49,19 @@ downloading the actual webxdc file from the server.
const Dialog = ({app, modal, toggleModal}) => {
const [subtitle, description] = [app.description.split('\n').shift(), app.description.split('\n').slice(1).join(' ')];
+ let tryItUrl = new URL(tryItBaseUrl);
+ tryItUrl.hostname =
+ "webapp-" +
+ app.app_id +
+ "-" +
+ app.tag_name.replaceAll(".", "-") +
+ "." +
+ tryItUrl.hostname;
+ const params = new URLSearchParams({
+ url: xdcget_export + "/" + app.cache_relname,
+ });
+ tryItUrl.hash = params.toString();
+
// Change the title when a dialog is open
if(modal === app.app_id) {
document.title = `webxdc apps: ${app.name}`;
@@ -90,6 +104,7 @@ const Dialog = ({app, modal, toggleModal}) => {
<a href="${xdcget_export + "/" + app.cache_relname}" target="_blank" class="button">
Download
</a>
+ <a class="button" target="_blank" href="${tryItUrl.toString()}">Try it</a>
<button class="ghost" onClick=${() => toggleModal(false)}>Close</button>
</div>
</div>
Thanks to the fact that each app runs on a separate dynamically-generated subdomain, it gets a separate web origin, thus it’s basically an entire new website, fully isolated from all other ones.
Additionally, as you might have inferred, that other website, https://webxdc-try-it.xyz/, can run arbitrary .xdcs which you can upload manually.
You can read more about this whole thing in my post from 2024 (but the @DavidSM100 's repo above should also be enough).
Why
This feature can be particularly useful for people who are not (yet?) using Delta Chat or any other WebXDC-supporting messengers (see WebXDC apps can now exchange data and run on other messengers! - Delta Chat). You can “Try it” (well the WebXDC part of Delta Chat, at least) before you actually have to install anything.
Or it’s also useful to those who would like to just understand how WebXDC works. Such feature (the “Try it” button) really does drive the point home that WebXDC apps really are “just web apps”. You basically don’t even need to read about what it is, you can just see it. Well, at least the most important part about WebXDC, apart from how instances communicate and how they are isolated from the internet.
You have probably guessed by this point that I propose that this feature be adopted by the “main” website, webxdc apps. I am willing to provide assistance in setting this up.