Bundle an IOS native app with An ionic app

Warning: this page is extremely technical, I hope you might not have to use it because we should make it into 2 apps for performance but if it helps you, please comment below :)

Hi, everyone. lately, I have got a question which is “Can we navigate from the IOS App to Navigate App?”. You might think that why don’t we create the new App instead LOL. Nevertheless, I have to make it happen so I started researching about it and I’m gonna explain you how it works.

Overview

The purpose of this page is to explain how to bundle an iOS native application with an Ionic application and how to switch application from the main native application to ionic. And for more convenient, I use git submodule for pulling an ionic app code to the main app.

Step 1 : Install Cordova framework

Because an exported ionic applications use Cordova framework so we have to use it too

Firstly, install dependency project management such as cocoa pod or Carthage (in this example picked Carthage)

Use dependency library

Open Terminal

$ touch Cartfile
$ vim Cartfile

Then, add below

github "apache/cordova-ios"

Press on control+c keyboard

Then type :wq!

Update Carthage

In Terminal, type below

$ Carthage update

Add Library to Xcode

Open Xcode, choose the project that you want to bundle

Choose application in project navigation

Then, click Build Phases

Click Link Binary With Libraries section to expand

Then click Add(+) press Add Other… Finder will show on your screen

Select Carthage(On project folder) > Build > iOS > Cordova.framework

Then click open

Step 2 add git submodule

Type these commands in terminal

$ git submodule add <git https url> Frameworks/<your folder name>

The terminal will load the source code from git into Frameworks folder

For example, $ git submodule add https://gitlab.com/o2oplatform/trueyours.git Frameworks/trueyours

Noted

In this step, you have to have git in your project before running the above command. if not, type below in terminal

git init

Step 3 Installation ionic app to Xcode

Add config.xml to project

Go to root project folder via finder

Drag file Frameworks/<your app name>/platforms/ios/<your app name>config.xml to Xcode project navigation

IMPORTANT

If you can not find plaforms folder, type commands below

$ cd Frameworks/<your app name>
$ npm install
$ npm run build:stg

Import ionic source code to the project

Drag Folder Frameworks/<your app name>/platforms/ios/<your app name>/www

check Copy items if needed

create folder references

add to targets

Impot bridge header

Drag the bridge header file in root/Framework/<app>/platforms/ios/trueyour/Bridging-Header.h into Xcode

Noted

If you have had bridge header file, you may insert code yourself

Import an ionic plugins folder to the project

Frameworks/<your app name>/platforms/ios/<your app name>Plugins

check Copy items if needed

create groups

add to targets to Xcode project navigation

Add Embeded Binaries

Select your project on The xcode project navigator

Click “General” tab and expand Embeded Binaries section

Then, click “+” button and add Cordova.framework

Add Linked Frameworks and Libraries

The next section of Embeded Binaries is Linked Frameworks and Libraries, click expand the section

Click “+” then add WebKit.framework and Cordova.framework

Then change the status of Cordova.framework to Optional

Ready to test

Now you can run the ionic application with an iOS Native application.

If you have update from ionic app repository, you just pull git in Frameworks/<you folder name>

You don’t have to setup the steps above again.

How to Switch between an ionic app and an iOS native app

There are two things to do. First, create a function to call an Ionic app from native app. Second, make a way to dismiss an ionic app from native app

Call an ionic app

To run an ionic app, you have to override CDVViewController.

Firstly, create a ViewController and override it with CDVViewcontroller.

Secondly, make a function to navigate the page and you can should either push navigation or make it as a subclass of Navigation Controller

Navigate Back from ionic app

Now, We can run swift command on ionic app because is based on javascript language so there is a little bit trick to do.

The concept is using Notification to notify from an ionic app to the Native iOS app.

First of all, create a RECEIVER to receive any message.

Insert the below commands into ViewController that implements CDVViewController

(In this example, I push it on viewDidLoad function). The function will dismiss the viewcontroller when it get any message that contain rawValue:”eventName”

let nc = NotificationCenter.default
        nc.addObserver(forName:Notification.Name(rawValue:"eventName"),
                       object:nil, queue:nil) {
                        notification in
                        self.dismiss(animated: true, completion: nil)
		
}

Second, make SENDER in and ionic app

An ionic app needs cordova-plugin-broadcaster plugin to send notification.

Install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add cordova-plugin-broadcaster
$ npm install --save @ionic-native/broadcaster

Then follow steps in Add this plugin to your app’s module

Usage

Add these command into the class you will assign a go back button.

import { Broadcaster } from '@ionic-native/broadcaster';
constructor(private broadcaster: Broadcaster) { }

Add function to a button that you assign it to be a go back button

You might insert this line to the button that you want to navigate back

goback(){
	this.broadcaster.fireNativeEvent('eventName', {}).then(() => console.log('success'));
}

Note

If you got an error like this :

Failed to load webpage with error: The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.

Go to Info.plist and add

Hopefully, this page will help you. Don’t be hesitate to ask below if need more details.