Adding the HTML and Javascript Code

The front end implementation of Evergreen involves the Javascript logic that will check, download, install, and restart the app when changes are made.

Evergreen Steps

There are four steps to an evergreen update:

Check for updates, download the update, install the update, restart the app for the changes to take affect. These can be automated, or even chained together or done in the background, however for this example each step will be done manually, allowing you to see each step and identify each part of the code that handles that particular step.

Evergreen Update Example

The following is a basic example of Evergreen functionality within a BlinkMobile hybrid app.

Note: This example is framework independent - it uses only HTML and standard Javascript. You can modify this example code with your own handlers if you wish to take advantage of jQuery, Angular, React, etc. and any events and components that they may offer.

There are two main parts to this example:

index.html
js/update.js

The index.html file is for displaying your HTML elements, and the update.js file is the code to handle this process.

Firstly, you can download a full example below, and then we'll go through each part.

Download an Evergreen "www" Example

The following ZIP file contains the "www" folder of the example app, including Evergreen functionality:

BlinkMobile_Evergreen_www.zip

Explanation of the Code

Inside the ZIP you'll find a basic app. The two files in particular we're interested in are the following:

index.html

The index.html file is a basic example showing a HTML interface that will allow a user to click on a button to check for updates, download them, install them, and then restart the app.

Each element is HTML only, with some CSS styling. Depending on the framework you're using, ideally you will replace these with elements or components that match your look and feel.

js/update.js

The update.js file is the file that handles the actual functionality.

At the top of the script you will see two variables:

var APP_ID = 'io.blinkm.mycordovaapp'
var TENANT = 'mycompany'

You will need to add your own values here.

APP_ID : The is the app "id" you've set in your config.xml file

TENANT : This is the name of your tenant - this is generally your partner company name, with no spaces or special characters. For EPS customers this will be your EPS customer's name.

This is all you need to edit in this file.

Next Step

Creating an Evergreen Update