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 [=Document/initialization=], it will be either [=Document/running in foreground=] or [=Document/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 [=Document/running in background=].

When user reopens the same MiniApp, MiniApp will switch from [=Document/running in background=] to [=Document/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.

MiniApp Global Application Lifecycle States

This spec formalizes four global application lifecycle states to support the above [=Document/global application lifecycle events=]:

launched

Lifecycle state for MiniApp [=Document/initialization=]. This means that the MiniApp [=Document/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 [=Document/running in foreground=]. It is triggered once the MiniApp enters the [=Document/launched=] state, or once the MiniApp switches to be [=Document/running in foreground=] from [=Document/running in background=].

hidden

Lifecycle state for MiniApp [=Document/running in background=]. It is triggered once the MiniApp switches to be [=Document/running in background=] from [=Document/running in foreground=].

error

Lifecycle state for MiniApp [=Document/in error=]. It is triggered once the MiniApp is confronted with script error.

GlobalState enum

The MiniApp [=Document/global application lifecycle states=] are reflected in the API via the {{GlobalState}} enum.

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

The GlobalState enum is used to represent the [=Document/global application lifecycle states=].

The "launched" enum value represents the [=Document/launched=] [=Document/global application lifecycle states=].

The "shown" enum value represents the [=Document/shown=] [=Document/global application lifecycle states=].

The "hidden" enum value represents the [=Document/hidden=] [=Document/global application lifecycle states=].

The "error" enum value represents the [=Document/error=] [=Document/global application lifecycle states=].

MiniApp Global Application Lifecycle interface and callbacks

           [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
          );

         

`InputObject` interface

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

`LifecycleError` interface

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

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 [=Document/initialization=] starts. [=Document/View layer=] and [=Document/Logic layer=] will simultaneously start the initialization.

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

3. After the communication channel is established, [=Document/Logic layer=] sends the initial data to [=Document/View layer=] to start the [=Document/first render=].

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

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

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

7. If user closes the current MiniApp page, MiniApp [=Document/page unloading=] is triggered.

MiniApp Page Lifecycle States

This spec formalizes five MiniApp page lifecycle states to support the above [=Document/page lifecycle events=]:

page loaded

Lifecycle state for MiniApp [=Document/page loading=]. This means that MiniApp [=Document/page loading=] is completed. At this moment, [=Document/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 [=Document/page first render ready=]. It is triggered once the MiniApp page [=Document/first render=] is completed. At this moment, the page UI can be configured.

page shown

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

page hidden

Lifecycle state for MiniApp [=Document/page running in background=]. It is triggered once the MiniApp page switches to be [=Document/page running in foreground=] to [=Document/page running in background=].

page unloaded

Lifecycle state for MiniApp [=Document/page unloading=]. It is triggered once the MiniApp page is closed.

PageState enum

The MiniApp [=Document/page lifecycle states=] are reflected in the API via the {{PageState}} enum.

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

The PageState enum is used to represent the MiniApp [=Document/page lifecycle states=].

The "loaded" enum value represents the [=Document/page loaded=] [=Document/page lifecycle states=].

The "ready" enum value represents the [=Document/page ready=] [=Document/page lifecycle states=].

The "shown" enum value represents the [=Document/page shown=] [=Document/page lifecycle states=].

The "hidden" enum value represents the [=Document/page hidden=] [=Document/page lifecycle states=].

The "unloaded" enum value represents the [=Document/page unloaded=] [=Document/page lifecycle states=].

MiniApp Page Lifecycle interface and callbacks

           [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 (
          );

         

`PageInputObject` interface

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