Application

Each desktop application consists of the backend and the frontend. The backend is responsible for the application business logic, while the frontend is responsible for the user interface and interaction.

The backend implementation is located in the src/main directory of your project.

When the application is launched, the src/main/index.ts file is executed. This is the main entry point of your application backend. Here you can manage the application lifecycle, create windows, create tray items, register global shortcuts, etc.

Overview 

To work with the application use the app object that is exported from the @mobrowser/api package. This object is a singleton that represents the application. You can access it from anywhere in the main process.

import { app } from '@mobrowser/api';

Single-instance mode 

By default, the application is a single instance application. This means that only one instance of the application can be running at a time. Any attempts to launch the application again will bring the existing instance to the foreground.

Theme 

By default, the application uses the system theme. You can change it to light or dark as follows:

import { app } from '@mobrowser/api';

// Set the dark theme.
app.setTheme('dark')

To get the current application theme, you can use the app.theme property:

import { app } from '@mobrowser/api';

// Get the current application theme.
const theme = app.theme

Read more about the enable dark/light mode in your desktop application in Dark Mode.

Frontend URL 

The application url property is the URL of the application frontend entry point. In the development mode, it is the URL of the local development server. In the production mode, it is an internal URL that is used to access the protected application resources.

To get the current application URL, you can use the app.url property:

import { app } from '@mobrowser/api';

const win = app.createWindow()
// Load the application frontend.
win.browser.loadUrl(app.url)
win.show()

If during project generation you have chosen to use the None frontend framework, then the app.url property will be an empty string.

Details 

You may want to access the information about the current application name, version, description, or copyright. For example, to show it in the “About” dialog or in the “Help” menu.

To get this information programmatically you can use the following properties of the app object:

import { app } from '@mobrowser/api';

const name = app.name
const version = app.version
const description = app.description
const copyright = app.copyright

You don’t have to wait for the application to be initialized to access these properties.

These application details are taken from the mobrowser.conf.json file located in the root directory of your project. If you want to change them, then just edit the mobrowser.conf.json file and then re-run the application.

Data directory 

Each application has its own data directory. The data directory is created automatically when the application is launched for the first time. It contains the app preferences, cache, local storage, visited links, web data, spell checking dictionaries, and other browsing data.

The exact location of the directory depends on the operating system and application name:

• On Windows: C:\Users\<USER_NAME>\AppData\Local\<APP_NAME>\User Data\
• On macOS: /Users/<USER_NAME>/Library/Application Support/<APP_NAME>/
• On Linux: /home/<USER_NAME>/.config/<APP_NAME>/

Resources directory 

The resources directory is a folder where the application stores its resources that shouldn’t be encrypted and protected. It is located in the resources directory of the project root.

All the files and folders from this directory will be copied to the application bundle as-is.

To get the absolute path to the resources directory programmatically, you need to wait until the application is ready and then use the app.getPath() method:

import { app } from '@mobrowser/api';

const resourcesDir = app.getPath('appResources')

Terminating application 

You can terminate the application manually or programmatically. To terminate the application programmatically, use the app.quit() method:

import { app } from '@mobrowser/api';

// Terminate the application.
app.quit()

You can terminate the application programmatically only after it’s initialized and the ready callback is invoked.

Restarting application 

To restart the application programmatically, use the app.restart() method:

import { app } from '@mobrowser/api';

// Restart the application.
app.restart()

It will close all application windows, release the allocated resources, terminate the application process, and then run the application again with the same command line arguments.

Packaged 

You can run your application in the development mode (when the frontend is running on a local development server) or you can package it into a native executable and run it as a standalone application.

To check if the application is packaged, you can use the app.packaged property:

import { app } from '@mobrowser/api';

const isPackaged = app.packaged

You can use this property to determine whether to enable or disable certain features in your application. For example, you can display the DevTools window automatically when the application is running in the development mode.

import { app } from '@mobrowser/api';

// Create a new window.
const win = app.createWindow()
win.browser.loadUrl(app.url)
win.show()

// Check if the app is running in the development mode.
if (!app.packaged) {
  // Open the DevTools window.
  win.browser.devTools.open()
}

Launch information 

To detect if the application is running for the first time in this environment or if the app was updated to a newer version, you can use the app.launchInfo property:

import { app } from '@mobrowser/api';

// Check if the application is launched for the first time.
if (app.launchInfo.isFirstRun) {
  // Display a welcome message.
}

// Check if the application is launched for the first time after update.
if (app.launchInfo.lastLaunchedVersion !== app.version) {
  // Display a what's new message.
}