Motivation

The current Push API Draft specifies a system that has no notion of push channel persistence. Further, it does not include push message payloads, a feature that many developers want.

This gist outlines an API which:

integrates with the Service Worker to enable delivery of push messages to applications which do not have visible tabs
enables a JSON-formatted body of content
guards access to registration for pushes on potential user consent

Example

<!DOCTYPE html>
<!-- https://example.com/index.html -->
<html>
  <head>
    <script>
      // Notes:
      //  - PushRegistration has been extended with a "channelName" property
      //  - PushMessage has been extended with "data" and "channelName" properties
      //  - The "version" property of PushMessage has been removed.

      var logError = console.error.bind(console);

      function toQueryString(obj) {
        var encode = encodeURIComponent;
        for (var x in obj) {
          components.push(encode(x) + "=" + encode(obj[x]));
        }
        return "?" + components.join("&");
      }

      function registerWithAppServer(registration) {
        // We've been handed channel name with a PushRegistration which
        // we send to the app server
        asyncXHR(
          "http://example.com/push/activate" + toQueryString(registration);
        );
      }

      // This is an ugly detail of the current SW design. See:
      //   https://github.com/slightlyoff/ServiceWorker/issues/174
      function swReady() {
        var sw = navigator.serviceWorker;
        return new Promise(function(resolve, reject) {
          if (!sw.active) {
            // Note that the promise returned from register() resolves as soon
            // as the script for the SW is downloaded and evaluates without issue.
            // At this point it is NOT considered installed and will not receive
            // push events. We will, however, allow the registration for pushes
            // to proceed at this point. Push registrations that succeed and generate
            // messages will see those messages queued until the SW is installed
            // and activated, perhaps at some time in the near future (e.g., once
            // resources for the application itself are downloaded).
            sw.register("/service_worker.js", { scope: "*" }).then(resolve, reject);
          } else {
            sw.ready().then(resolve, reject);
          }
        });
      }


      // Only try to register for a push channel when we have valid SW
      swReady().then(function(sw) {
        var gcmSenderId = "......";
        var apnSenderId = "......";
        var cn = "channel name";
        var push = navigator.push;

        // The push object is an async map that can be used to enumerate and
        // test for active channels.
        push.has(cn).catch(function() {
          // register() is async and can prompt the user. On success, the
          // channel name is added to the map.
          push.register(cn, {
            // the "sender" field is push-server-specific and is optional.
            // Some servers (e.g., GCM) will require that this field be
            // populated with a pre-arranged ID for the app. The system
            // selects between the supplied keys to decide which one to
            // offer the "local" push server for this registration.
            sender: {
              apn: apnSenderId,
              gcm: gcmSenderId,
              // ...
            }
          }).then(registerWithAppServer, logError);
        });
      });


    </script>
  </head>
</html>

// https://example.com/service_worker.js

this.oninstall = function(e) {
  // Note that push messages won't be delivered to this SW
  // until the install and activate steps are completed. This
  // May mean waiting until caches are populated, etc.
  e.waitUntil(...);
};
this.onactivate = function(e) { ... }

// Note that we no longer need navigator.hasPendingMessages() because the UA
// can queue push messages for the SW and deliver them as events whenever it
// deems necessary.
this.onpush = function(e) {
  // Log the channel name
  console.log(e.message.channelName);
  // Log the deserialized JSON data object
  console.log(e.message.data);

  // ...

  // From here the SW can write the data to IDB, send it to any open windows,
  // etc.
}

sotayamashita/push_api_sketch.md

Motivation

Example