Build Your Custom Ionic Themeable Browser

ionic-themeable-browser

If you want to display PDFs or external pages inside your app you can use the regular browser, but it feels like people are leaving your app. A better way to present a more consistent UI to your users is to use something called Themeable Browser.

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

In this Quick Win we will go through the basics of creating a new Themeable Browser for our Ionic app and how to work with the custom actions. Also, we are using some free icons I got from here.

Getting Started

Like always we start with a new Ionic app and install the Cordova plugin for the Themeable browser, so go ahead and run:

Once this is done you need to add it to your src/app/app.module.ts and the providers array like this:

Now we are ready to create our own stylish browser instance inside our app!

Opening the Themeable Browser

First of all we need a button to open our new browser, perhaps this is the most basic snippet I’ve ever posted so change your src/pages/home/home.html to:

Now the actual fun begins!

To style our new browser window we can create a (quite big) ThemeableBrowserOptions object which holds all the custom styling we want to apply.

There are really a lot of options here, we just picked a few basic ones to change the color of our toolbar, the title and custom images for buttons.

Here you could also modify the behaviour of the new browser, add a custom menu and add all kinds of custom buttons to perform specific actions.

This of course completely depends on what you want to build, for example a PDF or file viewer needs different buttons than a regular browser with just a more consistent UI feeling.

You can put your images directly into the native folders of Android and iOS or like in our case, simply load them from the www/ folder of your app!

Once your options are ready you can open the browser with a website or your document and pass in the options.

Finally, you can subscribe to all the previously defined events of your buttons. In our case we subscribe to the closePressed event to simply close the browser again!

Now go ahead and change your src/pages/home/home.ts to:

If you run your app on a device now and open the browser, you will see that we got our custom buttons inside the coloured toolbar like in the simulator image below!

themeable-browser-preview

It’s really not that hard to create your own browser styling, and the result is an app that never feels like your users a re leaving it although they are in a browser!

You can also find a video version of this Quick Win below!