title: FCM Push notifications arrive twice if the browser is in background
body: <p>I've set up a simple push notification site, the notifications arrive okay if the browser is in foreground. </p>
  
  <p>The problem begins if the browser is in background: the notification arrives twice, one styled with image and other settings set and the other has only title and body message.</p>
  
  <p>Content of the service worker:</p>
  
  <pre><code>importScripts('https://www.gstatic.com/firebasejs/3.5.2/firebase-app.js');
  importScripts('https://www.gstatic.com/firebasejs/3.5.2/firebase-messaging.js');
  
  // Initialize the Firebase app in the service worker by passing in the
  // messagingSenderId.
  firebase.initializeApp({
      'messagingSenderId': '...'
  });
  
  const messaging = firebase.messaging();
  
  messaging.setBackgroundMessageHandler(function(payload) {
      console.log('[firebase-messaging-sw.js] Received background message ', 
      return null;
  });
  
  self.addEventListener('install', function (event) {
      event.waitUntil(skipWaiting());
  });
  
  self.addEventListener('activate', function (event) {
      event.waitUntil(clients.claim());
  });
  
  self.addEventListener('push', function (event) {
      var pushData = event.data.json();
      try {
          var notificationData = pushData.data;
          notificationData.data = JSON.parse(notificationData.data);
          console.log(notificationData);
          self.registration.showNotification(pushData.notification.title, notificationData);
      }
      catch (err) {
          console.log('Push error happened: ', err);
      }
  });
  </code></pre>
  
  <p>Client side js:</p>
  
  <pre><code>firebase.initializeApp(firebaseConfig);
  const messaging = firebase.messaging();
  
  messaging.onMessage(function (payload) {
      console.log("notification recieved");
      return null;
  });
  
  self.addEventListener('push', function (event) {
      console.log("window push stuff");
      return null;
  });
  </code></pre>
  
  <p>Thanks!</p>