MiniApp Lifecycle

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.

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.

The mapping to existing Web specifications such as Service Workers is listed in MiniApp Lifecycle Explainer .

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 .

WebIDL[Exposed=Window]
interface Global {
 readonly attribute GlobalState globalState;
 readonly attribute InputObject inputObject;
 readonly attribute LifecycleError lifecycleError;
 attribute EventHandler ongloballaunched;
 attribute EventHandler onglobalshown;
 attribute EventHandler onglobalhidden;
 attribute EventHandler onglobalerror;
};

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

WebIDLenum TextDirection {    
    "auto",
    "ltr",    
    "rtl"
};

The text-direction values are the following, implying that the value of the human-readable members is by default:

auto

Directionality is determined by the Unicode Bidirectional Algorithm [ UAX9 ] algorithm.

ltr

Left-to-right text.

rtl

Right-to-left text.

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

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.

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.

The mapping to existing Web specifications such as Page Visibility is listed in MiniApp Lifecycle Explainer .

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 .

WebIDL[Exposed=Window]
interface Page {
    readonly attribute PageState pageState;
    readonly attribute PageInputObject pageInputObject;
    attribute EventHandler onpageloaded;
    attribute EventHandler onpageready;
    attribute EventHandler onpageshown;
    attribute EventHandler onpagehidden;
    attribute EventHandler onpageunloaded;
};

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