The Freshcaller web interface is built as a single-page application. Unlike a traditional web application, a single-page app does not reload the entire page when the context is changed; it modifies only the relevant sections.

To enable an app to refresh its data at the appropriate time, the parent application emits an app.activated() method. The method timing differs based on the app’s location. When the page that contains the app is loaded for the first time (identified by the app.initialized() method), the app needs to register to listen for the app.activated() method.

app.initialized()

The method is triggered when the page that contains the app is loaded for the first time. On success, it returns the client object that is used to register for the app.activated() and app.deactivated() methods. As the app renders within an IFrame, all communication (through Data methods, Interface methods, and Events methods) between the app and parent page occurs through the client object.

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
app.initialized().then(
    function(client)
    {
      //If successful, register the app activated and deactivated event callback.
      client.events.on("app.activated", onAppActivated);
      client.events.on("app.deactivated", onAppDeactivated);
    },
    function(error)
    {
      //If unsuccessful
      console.log();
    }
  );

Unless you are building an app that is completely isolated (independent of the data on the page), ensure that the core logic of the app is not within the app.initialized() callback. Place the logic within the app.activated() callback, to ensure that the app can react when the parent application communicates. For example, when a user clicks on your app from the app tray, app.activated() is triggered and the corresponding callback is run.

app.activated()

The method is triggered when the app comes into scope and the method timing differs based on the location of the app.

app.js

1
2
3
4
5
client.events.on("app.activated", onAppActivated);

function onAppActivated() {
  console.log("App Activated");
}

app.deactivated()

The method is triggered when the app goes out of scope. The method can be used to clean stale data.

app.js

1
2
3
4
5
client.events.on("app.deactivated", onAppDeactivated);

function onAppDeactivated() {
  console.log("App Deactivated");
}