Embed multiple web apps into one Ionic App

Ionic Framework Ionic Vue
1

Hi,

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

Regards
Guenter

2

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>

3

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
4

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