In app browser

Ionic Framework ionic-v3
1

Hi,

So I have a project to build an app, that downloads a zip file that contains a HTML file, CSS and JS files.
I’ve managed to download the zip, save it to the disk and extract the content.

Now I’m trying to open the HTML file and render it in the app. I think i should use the In-app-browser plugin. But i cant get it to work yet.

In a empty page I’ve put this code into the ionViewDidLoad() method:

    const browser = this.iab.create('file://DIRECTORY/Index.html', '_self');
    browser.show();

iab is a private variable of type InAppBrowser in the constructor of that page.
The file path is different but this is for the example.

The method will run, I’ve checked that with logging. But the app won’t load the file and doesn’t show it.
Also no errors or what so ever.

Anyone know’s what im missing?

Kind regards.

2

2 things here…

  1. You said you added the code to your view did load. Please always make sure that Cordova is initialised and your plugins are available when executing a function that early! You can simply wrap it in the platform ready event like:
this.plt.ready().then((readySource) => {
      // Do your stuff with iab now
});
  1. The URL to the file could be wrong. Try to add a file to your assets and serve that dummy file to see if your call is actually working like it should.

Finally, I’m not sure if the in app browser will load/serve the full content of your package or just that one file. Another solution might be to start a lightweight server that serves those assets, for that check out the httpd plugin!

3

Hi Saimon,

Thanks for you suggestions.
I would like to use the Httpd plugin.
I’ve installed it and trying to get it running.

Could you help me out again maybe?
The current issue i have is:

INTERNAL ERROR: serveFile(): given homeDir is not a directory

I start the server like this:

const dataDir = await this.file.resolveDirectoryUrl(this.file.externalDataDirectory);
const websiteDir = await this.file.getDirectory(dataDir, 'website', null);
const indexFile = await this.file.getFile(websiteDir, 'index.html', null);

let options: HttpdOptions = {
www_root: indexFile.nativeURL, // file:///storage/emulated/0/Android/data/io.test.testapp/files/website/index.html
port: 9000,
localhost_only: true
};

this.httpd.startServer(options).subscribe(url => {
console.log('Server is live');
const iabPage = iab.create(url, '_self', 'location=yes');
});

I know I’m giving the url of the file, I’ve also tried to give the url of the directory like this:

let options: HttpdOptions = {
www_root: websiteDir.nativeURL, // file:///storage/emulated/0/Android/data/io.test.testapp/files/website/
port: 9000,
localhost_only: true
};

What am I doing wrong.
I think the directory url should be different, but I cannot figure out what it should be.

4

This afternoon I’ve learned that the path is relatieve to the WWW folder.
That means that only the folder names that are inside the WWW folder could be used to create a webserver with.

Unfortunately you can’t put a path on the external sd card or something.
I can’t unzip the files from the file to the application data folder.

Anyone has another solution?

1 Like
5

Okay, so the problem is the URL to the location.

The location I’ve mentioned in my last message was like this.

websiteDir.nativeURL // file:///storage/emulated/0/Android/data/io.test.testapp/files/website/

The problem is the file:// prefix. Whenever you substring this and use it as www_root value it works.

To make a complete working example:

const dataDir = await this.file.resolveDirectoryUrl(this.file.externalDataDirectory);
const websiteDir = await this.file.getDirectory(dataDir, 'website', null);

let options: HttpdOptions = {
www_root: websiteDir.nativeURL.substring(7), // /storage/emulated/0/Android/data/io.test.testapp/files/website/
port: 9000,
localhost_only: true
};

this.httpd.startServer(options).subscribe(url => {
console.log('Server is live');
const iabPage = iab.create(url, '_self', 'location=yes');
});
2 Likes
6

Thank you so much for this… Was stuck here for almost 2 weeks…Thank you once again…

7

No problem! Goodluck