MiniApp Lifecycle

2.1 MiniApp Global Application Lifecycle Events

This spec defines what the lifecycle of a MiniApp global application is and adds definition to enable MiniApp to respond to four important global application lifecycle events commonly performed by MiniApp:

• MiniApp initialization

• MiniApp running in foreground

• MiniApp running in background

• MiniApp in error

For each MiniApp, after initialization, it will be either running in foreground or running in background.

When user chooses to close the MiniApp by clicking the close button on MiniApp, or go to the mobile phone’s home screen, the MiniApp will not be destroyed immediately, but switch to be running in background.

When user reopens the same MiniApp, MiniApp will switch from running in background to running in foreground.

Only when MiniApp runs in the background for more than a specific time duration (e.g., 5 minutes), or occupies too much system resources in the background, the MiniApp will be destroyed.

2.2 MiniApp Global Application Lifecycle States

This spec formalizes four global application lifecycle states to support the above global application lifecycle events:

launched

Lifecycle state for MiniApp initialization. This means that the MiniApp initialization is completed, and it is triggered only once. Through this event, developer can obtain the information of the MiniApp, such as URI, source info, etc.

shown

Lifecycle state for MiniApp running in foreground. It is triggered once the MiniApp enters the launched state, or once the MiniApp switches to be running in foreground from running in background.

hidden

Lifecycle state for MiniApp running in background. It is triggered once the MiniApp switches to be running in background from running in foreground.

error

Lifecycle state for MiniApp in error. It is triggered once the MiniApp is confronted with script error.

2.3 GlobalState enum

The MiniApp global application lifecycle states are reflected in the API via the GlobalState enum.

WebIDLenum GlobalState {
    "launched", "shown", "hidden", "error"
};

The GlobalState enum is used to represent the global application lifecycle states.

The "launched" enum value represents the launched global application lifecycle states.

The "shown" enum value represents the shown global application lifecycle states.

The "hidden" enum value represents the hidden global application lifecycle states.

The "error" enum value represents the error global application lifecycle states.

2.4 MiniApp Global Application Lifecycle interface and callbacks

WebIDL [Exposed=Window]
 interface Global {
  undefined getGlobalState (
      GlobalLaunchedCallback globalLaunchedCallback,
      GlobalShownCallback globalShownCallback,
      GlobalHiddenCallback globalHiddenCallback,
      GlobalErrorCallback globalErrorCallback
  );
 };

callback GlobalLaunchedCallback = undefined (
  InputObject inputObject
);

callback GlobalShownCallback = undefined (
  InputObject inputObject
);

callback GlobalHiddenCallback = undefined (
);

callback GlobalErrorCallback = undefined (
  LifecycleError lifecycleError
);

2.5 InputObject interface

WebIDL[Exposed=Window]
interface InputObject {
    readonly attribute DOMString inputQuery;
    readonly attribute DOMString pagePath;
    readonly attribute DOMString referrerInfo;
};

2.6 LifecycleError interface

WebIDL[Exposed=Window]
interface LifecycleError {
    readonly attribute DOMString errorDescription;
};

3.1 MiniApp Page Lifecycle Events

This spec defines what the lifecycle of a MiniApp page is and adds definition to enable MiniApp to respond to five important page lifecycle events commonly performed by MiniApp:

• MiniApp page loading

• MiniApp page first render ready

• MiniApp page running in foreground

• MiniApp page running in background

• MiniApp page unloading

1. When user firstly opens a MiniApp, the MiniApp initialization starts. View layer and Logic layer will simultaneously start the initialization.

2. Once Logic layer initialization is completed, it creates a MiniApp instance. Simultaneously, once View layer initialization is completed, it starts the MiniApp page loading, to establish communication channel between View layer and Logic layer.

3. After the communication channel is established, Logic layer sends the initial data to View layer to start the first render.

4. If View layer completes the page UI update based on the inputted initial data from Logic layer, the first render is considered as completed, and then View layer notifies Logic layer, to trigger the MiniApp page first render ready.

5. Afterwards, user can interact with MiniApp. View layer can be triggered to deliver user event to Logic layer for further processing, then Logic layer returns result data to View layer for re-render.

6. If user leaves the current MiniApp page (e.g., by navigating to another MiniApp page), MiniApp page running in background is triggered. If the MiniApp page is reopened, MiniApp page running in foreground is triggered.

7. If user closes the current MiniApp page, MiniApp page unloading is triggered.

3.2 MiniApp Page Lifecycle States

This spec formalizes five MiniApp page lifecycle states to support the above page lifecycle events:

page loaded

Lifecycle state for MiniApp page loading. This means that MiniApp page loading is completed. At this moment, Logic layer has obtained initialization data, and developer can obtain the path of current MiniApp page as well as the path’s query.

page ready

Lifecycle state for MiniApp page first render ready. It is triggered once the MiniApp page first render is completed. At this moment, the page UI can be configured.

page shown

Lifecycle state for MiniApp page running in foreground. It is triggered once the page switches to be page running in foreground from page running in background. At this moment, developer can update data and refresh page.

page hidden

Lifecycle state for MiniApp page running in background. It is triggered once the MiniApp page switches to be page running in foreground to page running in background.

page unloaded

Lifecycle state for MiniApp page unloading. It is triggered once the MiniApp page is closed.

3.3 PageState enum

The MiniApp page lifecycle states are reflected in the API via the PageState enum.

WebIDLenum PageState {
    "loaded", "ready", "shown", "hidden", "unloaded"
};

The PageState enum is used to represent the MiniApp page lifecycle states.

The "loaded" enum value represents the page loaded page lifecycle states.

The "ready" enum value represents the page ready page lifecycle states.

The "shown" enum value represents the page shown page lifecycle states.

The "hidden" enum value represents the page hidden page lifecycle states.

The "unloaded" enum value represents the page unloaded page lifecycle states.

3.4 MiniApp Page Lifecycle interface and callbacks

WebIDL [Exposed=Window]
 interface Page {
  undefined getPageState (
      PageLoadedCallback pageLoadedCallback,
      PageReadyCallback pageReadyCallback,
      PageShownCallback pageShownCallback,
      PageHiddenCallback pageHiddenCallback,
      PageUnloadedCallback pageUnloadedCallback
  );
 };

callback PageLoadedCallback = undefined (
  PageInputObject pageInputObject
);

callback PageReadyCallback = undefined (
);

callback PageShownCallback = undefined (
);

callback PageHiddenCallback = undefined (
);

callback PageUnloadedCallback = undefined (
);

3.5 PageInputObject interface

WebIDL[Exposed=Window]
interface PageInputObject {
    readonly attribute DOMString pageInputQuery;
};