Embed multiple web apps into one Ionic App


I’m new to Ionic, so first sorry for my newbie question :slight_smile: I already spent hours of searching on Google, etc but could not find an answer to my question

My scenario is very simple. I just want to include three different WebApps (consisting of several html,css,js files) in my Ionic app. What I tried till now:

  1. Created an Ionic app based on template “tabs” ⇨ worked
  2. Put my WebApps in 3 different folders w1, w2 and w3 directly in the src directory of my Ionic app
  3. Replace line#4 in src/components/ExploreContainer.vue to

<p>My WebApp <a target="_blank" rel="noopener noreferrer" href="w1/index.html">enter here</a></p>

Starting the app with ionic serve works perfectly well. But it’s not possible to open the WebApp by pressing the link.

What is missing? Any help is really appreciated


I already solved this issue. If someone else has this problem, too - here is the soultion

Just copy all your html content into the assets directory. Then it could be linked, eg:

<p>My WebApp <a target="_blank" rel="noopener noreferrer" href="assets/w1/index.html">enter here</a></p>

I personally wouldn’t suggest doing something like this in most cases. If you’re deploying this as a native app, it’s not really a good user experience to load “multiple apps”

1 Like

Hi Mike,

thanks for your feedback! Which approach would you recommend?

Some background info: My App is an e-Learning app. You can find it here: https://test.coverdale.at/ Just press Demo-Licence after the tutorial. As you can see, there are 4 different tabs. The first tab includes courses which are generated with Articulate Rise 360 (https://articulate.com/360/rise). Currently I just put all these generated files to the assets folder and navigate to the index.html file when a course is selected. This works fine. It just brings one downside: The app becomes very large, because the course data includes many videos, etc. Therefore I’m looking for a solution to download all the files generated by Articulate and save them using the File API. Unfortunately I found no solution to show the downloaded content. Here is what I already tried:

  let content = await Filesystem.getUri({
    path: '/c01/index.html',
    directory: FilesystemDirectory.Documents

  let url = Capacitor.convertFileSrc (content.uri)

  console.log (url)           // -> Output is: capacitor://localhost/_capacitor_file_/DOCUMENTS/c01/index.html

  // Option 1: Open downloaded and saved file with InApp Browser
  Browser.open ({url: url})   // -> Leads to Error Message: {"errorMessage":"","message":"Invalid URL"}

  // Option 2: Navigate to saved file
  window.location.href = url; // -> does nothing

Any feedback is highly appreciated