Google Cloud Messaging for Chrome - a received message is not shown as a popup

Question

I downloaded Google push-sample-app code, removed the key from the manifest, uploaded the app to the Chrome Web Store, then installed it in Chrome from the Web Store.

Now chrome://extensions/ lists the app as "Enabled", with "Inspect views: background page (Inactive)". Chrome Task Manager doesn't list the app as currently running.

If at chrome://extensions/ tab, I click "background page (Inactive)" link for "Push Messaging Sample" app, then an inspect view shows up in a separate Chrome window, and a new entry appears in the Chrome Task Manager: "Background Page: Push Messaging Sample". As long as an inspect view Chrome window is open, an event page "background.js" doesn't get offloaded. And When a message is sent to the push messaging service, a popup window with the message text appears.

If I close the inspect view Chrome window, and send a message to the push messaging service, Chrome Task Manager shows that an event page "background.js" gets loaded, then offloaded in a few seconds disappearing from the Task manager. However, a popup window with a message does not appear.

How this app needs to be changed to show popup messages without any extra Chrome windows running?

Answer 1

The sample app does not show notification from "background page is inactive" state because when the background page is woken up, the event handler for chrome.pushMessaging.onMessage is not set up.

When user launches the app by clicking on its icon, the chrome.app.runtime.onLaunched() event is fired. But when background page is activated because of some incoming event (like push messaging or alarm), the onLaunched is not fired - instead, only the 'initial script', the JS code outside of functions, is executed. The initial script of background page must register event listeners so after initial load Chrome knows which handler to call. The sample app only registers the onMessage handler in onLaunched, but not from initial script.

It is easy to 'fix' the sample app - just move the call of setupPush() from onLaunched() handler to the very end of background.js file:

background.js:

....
// When a Push Message arrives, show it as a text notification (toast)
function showPushMessage(payload, subChannel) {
  var notification = window.webkitNotifications.createNotification(
      'icon.png', 'Push Message',
      "Push message for you! " +
      payload +" [" + subChannel + "]");
  notification.show();
}

setupPush();  // <-- this executes every time page loads, not only in onLaunched

This will cause setupPush() to be executed every time background page is activated, whether user launched the app or the app is started in background in response to incoming push message.

Answer 2

This question / answer explained what is missing:

"Because the listeners themselves only exist in the context of the event page, you must use addListener each time the event page loads; only doing so at runtime.onInstalled by itself is insufficient."

To fix push-sample-app, all is needed is to add to background.js:

// Register with the Push Messaging system for the Push Message.
chrome.pushMessaging.onMessage.addListener(messageCallback);