Child Application

Child application is a downloadable application which is available over internet in the form of zip file and rendered in a fragment. The child application is self-contained and should be complete as the application rendered as child application do not depend on main application assets for rendering but only the shared the native code required to execute the application.

Development

The development of child application is as follows:

Install Plugins

Install the following plugin in main application which helps to download zip file into local file system:

cordova plugin add https://github.com/AsheraCordova/cordova-plugin-file-downloader.git

Download and Host Child App

The main application should host the child application in fragment using the namespace and rootDirectory as shown below:

<fragment
    android:id="@+id/nav_host_fragment_container"
	android:name="androidx.navigation.fragment.NavHostFragment"
	rootDirectory="cordova.file.persistent/ChildApp"
	namespace="ChildApp"
	navGraph="navigation/nav_graph_child"
	android:layout_width="match_parent"
	android:layout_height="match_parent"></fragment>

The above code loads the child application in the main application configures the fragment to load javascript module index_lite.js into namespace ChildApp and displays the content of the zip file which has been unzipped at the location "cordova.file.persistent/ChildApp""

Sample code which loads child application into the fragment with a progressbar to download the zip file:

Name	Description
Launch Child App	Code to launch child app from main app using a button
Progress Bar Fragment	Code to download zip file and show a progress bar to the user
Progress Bar Backing Fragment	Code to download zip file and show a progress bar to the user
Hosting Child App	Code to host the child app in the Main App

Main app needs to be given permission to download/store the zip file and access the zip file contents:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://raw.githubusercontent.com/ https://ssl.gstatic.com 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;worker-src 'self' blob:; script-src-elem 'self' blob:;">

Create zip file of Child App

The structure of zip file is shown below:

zip file
├──  www/
│   ├── css
│   ├── js
│   │	└── index_lite.js
│   └── img
├── res/
├──	res-ios
├──	resources
├──	res-swt
└──	 res-swt

Use the command npm install archiver to install archiver as dependency in child app.

Add the following scripts to package.json to create zip file:

{
	...,
	"scripts": {
		"build-child-app": "cd platforms/android/app/src/main/tsc && npm install --legacy-peer-deps && npm run build-child",
		"postbuild-child-app": "node append-export.js && node zip-folder"
	
		...
  	},
  	"dependencies": {
    	"archiver": "^7.0.1",
    	"ev": "^0.0.7",
    	"minimatch": "^10.0.3"
  	},
}

Create a file by named append-export.js and zip-folder.js in the root directory.

Use the below command to create Child App:

npm run build-child-app

Example - Child App

This example demonstrates a child application developed using Ashera.

Add New Native Event Handler