model/lifecycle Cotonic

Application lifecycle is a key way that modern operating systems manage resources. On Android, iOS, and recent Windows versions, apps can be started and stopped at any time by the OS. This allows these platforms to streamline and reallocate resources where they best benefit the user.

Modern browsers will also suspend and discard pages. Browsers do not provide this information in an orderly fashion. There are individual events like: load, unload, and visibilitychange. The lifecycle model publishes the different states a page can be in.

active

The page has focus, and is visible in the foreground. It is important that the page is responsive to user input. It may be needed to move non-important work from the main thread to a worker.

passive

The page has lost focus, but is still visible. It is important that ui updates and animations still run smoothly. It may be a good time to store unsaved application state.

hidden

The page has lost focus, and is no longer visible, but it still exists. It is likely that this is the end of user interaction with the page. Unsaved state should be saved. It is also a good time to stop making UI updates, since they won't be seen by user.

frozen

The page has been cached to memory by the browser. It can resume in a later stage. Javascript's timers and fetch callbacks no longer work. Browsers can freeze pages to prevent full page reloads. This is a good time to close any open Web Socket connections, close WebRTC channels because the browser want's to conserve energy.

terminated

The page will be terminated shortly.

The lifecycle model publishes the state the page is at on the model/lifecycle/event/state topic as a retained message. This makes it possible to get the current state at any moment, and be notified of changes so the application can scale its resource usage at any moment.

State changes are always done in an orderly way. When a page goes from state active to state hidden it is made sure that the passive state is also published.

State transition diagram:

event/state

When the lifecycle model sees a state change in the page lifecycle state, its state is published on this topic. The message is published as a retained message, and is available when the model is active. Possible states are: active, passive, hidden, frozen, and terminated.

// Subscribe in a worker
self.subscribe("model/lifecycle/event/state",
    function(m) {
        switch(m.payload) {
            case "active":
            case "passive":
                // Speed up network usage again.
            case "hidden":
                // Slow down network usage.
                break;
        }
   });

event/online

When the lifecycle model detects a change in the online state of the browser, the state will be published on this topic. When the browser is online, true will be published false otherwise.

self.subscribe("model/lifecycle/event/online",
    function(m) {
        if(m.payload) {
            console.log("We are online");
        } else {
            console.log("We are offline");
        }
    }
);

event/ping

When the lifecycle model is enabled it publishes a retained pong message on this topic. This makes it possible to check if the model is enabled.

// Subscribe in a worker
self.subscribe("model/lifecycle/event/ping",
    function() {
        console.log("the lifecycle model is enabled")
   });