title: How can we use FCM Service Worker with a existing Service Worker?
body: <p>We are creating a PWA web app and currently, we are using sw-precache library for generating service worker file, which is working as expected. And now we have added FCM service worker for listening incoming message while it's offline, but it's overwriting our existing service worker. </p>
  
  <p>So how can we integrate the firebase service worker with an existing service worker which is generated using sw-precache? </p>
  
  <p>I'd tried several ways, current code :</p>
  
  <pre><code>if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js').then((registration) =&gt; {
          console.log('Service Worker registered');
      }).catch(function (err) {
          console.log('Service Worker registration failed: ', err);
      });
  
      navigator.serviceWorker.register('/firebase-messaging-sw.js', { scope: '/firebase-cloud-messaging-push-scope' }).then(function (registration) {
           console.log('f Service Worker registered');
       }).catch(function (err) {
           console.log('f Service Worker registration failed: ', err);
       });
  }
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE 1:</strong> I'd tried <code>useServiceWorker(registration)</code> as well, its registering the main service worker but when I'd initializing firebase within my service it's expecting the <code>firebase-messaging-sw.js</code> to load so it's throwing some error in console.</p>
  
  <p>Service code:</p>
  
  <pre><code>import * as firebase from 'firebase';
  import { isPlatformBrowser } from '@angular/common';
  
  @Injectable()
  export class MessagingService {   
    messaging;
  
    constructor(
      @Inject(PLATFORM_ID) private _platformId: Object, ) {
      if (isPlatformBrowser(this._platformId)) {
        var config = {
          messagingSenderId: "XXXXXXXX"
        };
  
        firebase.initializeApp(config);
        this.messaging = firebase.messaging();
      }
    }
  
    //  ......
  
  }
  </code></pre>
  
  <p>Error in console : </p>
  
  <p><a href="https://i.stack.imgur.com/ywnJX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ywnJX.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/jXA7n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jXA7n.png" alt="enter image description here"></a></p>
  
  <p>Tried the following answer as well, but no success:  <a href="https://stackoverflow.com/a/46171748/3037257">https://stackoverflow.com/a/46171748/3037257</a>
  <hr>
  <strong>UPDATE 2:</strong> Finally adding <code>useServiceWorker(registration)</code> and an empty <code>firebase-messaging-sw.js</code> file both service workers are getting registered but caching is not working.</p>