Customization

We use a simple json file to customize the WebOS app. After you open your WebOS folder you can find the config.json inside src folder. So, file path is src/config.json.

Our default config.json looks like this:

src/config.json

{
  "page_loader": {
    "display": true,
    "statusbar_color": "#000",
    "statusbar_theme": "dark-content",
    "background_color": "#fff",
    "image_height": 225,
    "image_width": 300
  },
  "website": {
    "url": "https://google.com",
    "statusbar_color": "#fff",
    "statusbar_theme": "dark-content"
  },
  "notifications": {
    "enabled": false,
    "oneSignal_app_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
  },
  "no_internet": {
    "text_color": "#fff",
    "statusbar_color": "#303952",
    "statusbar_theme": "light-content",
    "background_color": "#596275"
  },
  "website_not_reachable": {
    "text_color": "#fff",
    "statusbar_color": "#eb4d4b",
    "statusbar_theme": "light-content",
    "background_color": "#eb4d4b"
  },
  "texts": {
    "no_internet": "No internet connection please try again later.",
    "website_not_reachable": "OOPS! Service is currently offline. Please Try again later"
  }
}

So from the following configuration file you can see there are total 5 sub objects for editing. This are there following usages.

Object	Usages
page_loader	This is the object is used to edit the app loader image
website	This is the object is used to edit for serving your website as an app
no_internet	This is the object is used to edit for the no internet screen
website_not_reachable	This is the object is used to edit to for the website error page
texts	This is the object is used to edit to for the texts of all the error

Configuring website screen

To configure the website simply edit the website child object. And under url put your website url and under statusbar_color put a top bar color depending on your website. Top bar is mainly the color of the StatusBar component. If you don't know what is StatusBar check it from here.

For Example:

"website": {
  "url": "https://google.com",
  "statusbar_color": "#fff",
  "statusbar_theme": "dark-content"
}

Configuring the preloader screen

To make the user experience smoother we have added an preloader with inside the app. As you are turning an website to an app it means if any user have a slow internet he will see a blank screen unless the website is fully loaded inside the app. So, in order to make the experience smoother whe have an preloader functionality inside the app. That means the user will see a good preloader until the website is fully loaded.

To configure the page loader simply edit the no_internet child object. You can define the page loader background color by changing the value of background_color, you can change the StatusBar color by changing the value of statusbar_color. You can also define the value of you preloader's image height and width by simply changing the value of image_height & image_width.

For Example:

"page_loader": {
  "display": true,
  "statusbar_color": "#000",
  "statusbar_theme": "dark-content",
  "background_color": "#fff",
  "image_height": 225,
  "image_width": 300
},

Configuring the no internet screen

In side the WebOS app we have provided inbuilt support for internet status checking.

To configure the no internet screen simply edit the no_internet child object. You can define the no internet screen background color by changing the value of background_color, you can change the StatusBar color by changing the value of statusbar_color and finally to change the color of the text edit the value of text_color.

For Example:

"no_internet": {
  "text_color": "#fff",
  "statusbar_color": "#303952",
  "statusbar_theme": "light-content",
  "background_color": "#596275"
}

Configuring the website error screen

In side the WebOS app we have provided inbuilt support for custom error page if your website is not reachable by the user.

To configure the website error screen simply edit the website_not_reachable child object. You can define the website error screen background color by changing the value of background_color, you can change the StatusBar color by changing the value of statusbar_color and finally to change the color of the text edit the value of text_color.

For Example:

"website_not_reachable": {
  "text_color": "#fff",
  "statusbar_color": "#eb4d4b",
  "statusbar_theme": "light-content",
  "background_color": "#eb4d4b"
}

Editing the custom error texts

WebOS allows the developers to change the error texts easily. In order to edit this texts you need to edit the texts child object. Edit the value of no_internet property if you wish to change the text of the no internet screen and edit the value of website_not_reachable property if you wish to change the text of the website error screen.

For example:

"texts": {
  "no_internet": "No internet connection please try again later.",
  "website_not_reachable": "OOPS! Service is currently offline. Please Try again later"
}

Conclusion

That all now your app is fully ready and customized now we will be moving to the core settings and there we will mainly customize the app name and the icons and images of the app.