title: Angular 2 Listening for Push Events
body: <p>I'm attempting to listen for push notifications sent by a server in an Angular 2 web app. I've initialized a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers" rel="nofollow">ServiceWorker</a>, service worker script (<code>sw.js</code>) and registered for push notifications as follows</p>
  
  <pre><code>if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/app/sw.js', { scope: '/app/' }).then(function(reg) {
      // registration worked
      console.log('Registration succeeded. Scope is ' + reg.scope);
      // register for push notifications
      reg.pushManager.subscribe({
         userVisibleOnly: true;
      }).then(
          function(subscription) {
             console.log('subscription endpoint is ' + subscription.endpoint);
          }, 
          function(err) {
             console.log(err);
          })
    }).catch(function(error) {
      // registration failed
      console.log('Registration failed with ' + error);
    });
  }
  </code></pre>
  
  <p>and in <code>sw.js</code> I listen for push events, i.e.,</p>
  
  <pre><code>self.addEventListener('push', function(event) {
      console.log('Push message received!', event);
  });
  </code></pre>
  
  <p>This all works: the app initializes a <code>ServiceWorker</code> and I can receive push notifications in the ServiceWoker thread. However, I want the components of my Angular 2 app to listen for push events, not just the <code>sw.js</code> script.</p>
  
  <p>How can I make components of the app listen for push notifications received in the service worker? Or, how can I access the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/onpush" rel="nofollow">ServiceWorkerGlobalScope</a> from within my app?</p>