Convert Website Into An App

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 already asume you have your 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

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

Now let convert any responsive website into an app using ionic.

Firstly, create new blank ionic application.

ionic start myApp blank

myApp is the name here and you can give it any name you so desire.

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

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

Now 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 your 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.

    
        
    

You can now run the application to see the results.

ionic serve

Up Next: Hiding ionic header on scroll