How To Convert Website Into An App Using Ionic V5

With great number of internet users relying on smart phones for surfing, having an app made available for download via play store is a plus and can increase customer and user base.

Ionic InAppBrowser simplified the process of converting any responsive website into an app.

I asume you have a development environment set up and right to dive in. No worries if you do not have ionic set-up as I will walk you through a breath installation process.

Installing Ionic

STEP 1: Download and install Node.js

STEP 2: Install Ionic CLI with npm

npm install -g @ionic/cli

STEP 3: Create New Application. With the cli installed, create a new blank application with these commands:

ionic start newApp blank --type=angular

You made it! For complete demonstration of the above process, check ionic complete set up.

Convert any responsive website into an app using ionic.

Firstly, create new blank ionic application.

ionic start myApp blank --type=angular

myApp is the application name and can be given any name you so desire.

‘Blank’ instruct the cli to use blank template in bootstrapping the app.

‘–type=angular’ specifies the framework type to be used alongside ionic, as there are other frameworks you can work with: ionic-react, ionic-vue.

Change directory into the project and run the app which will pop up on the computer browser or, simply navigate to http://localhost:8100

cd myApp
//navigate into folder myApp

ionic serve
//launch app on local host

In order to create a webview to host the website, add ionic inAppBrowser and cordova plugin.

ionic cordova plugin add cordova-plugin-inappbrowser

npm install @ionic-native/in-app-browser

Import inAppBrowser plugin in app.module.ts inside src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';  // inFocus

import { RouteReuseStrategy } from '@angular/router';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [
    //AppComponent,
    //HomePage
  ],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    InAppBrowser,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Replace the code in src/app/home/home.page.ts

Don’t get confiused with home.page.ts and home.ts. Still the same!

import { Component, OnInit } from '@angular/core';
import { NavController  } from '@ionic/angular';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx' // inFocus

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  constructor(public navCtrl: NavController,private iab: InAppBrowser) {} // inFocus
  ngOnInit(){
    const browser = this.iab.create('https://google.com','_self',{location:'no'});  // inFocus

  }

}

Open the terminal inside project directory and add platforms for android and ios

ionic cordova platform add android

ionic cordova platform add ios

Replaced or comment out everything on src/app/home/home.page.html and add below code.

<pre>
    <code class="language-markup">
        <script type="prism-html-markup">
<!--

commented code

 -->

<ion-content class="padding">
  loading... 
</ion-content>
<!--ionic 5 uses css classes instead of utility attributes -->
</script>
    </code>
</pre>

Run the application to see the results. Blog4Developers website is used as a case study and result is shown below.

ionic serve