angular - 我们如何将 FCM Service Worker 与现有的 Service Worker 一起使用？

Question

我们正在创建一个 PWA Web 应用程序，目前，我们正在使用 sw-precache 库来生成服务 worker 文件，该文件按预期工作。现在我们添加了 FCM 服务 worker ，用于在离线时监听传入的消息，但它会覆盖我们现有的服务 worker 。

那么我们如何将 firebase service worker 与使用 sw-precache 生成的现有 service worker 集成呢？

我尝试了几种方法，当前代码:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js').then((registration) => {
        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);
     });
}

---

更新 1: 我也尝试过 useServiceWorker(registration)，它注册了主要的服务 worker ，但是当我在我的服务中初始化 firebase 时，它​​期望firebase-messaging-sw.js 加载，所以它在控制台中抛出一些错误。

服务代码:

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();
    }
  }

  //  ......

}

控制台错误:

也尝试了以下答案，但没有成功:https://stackoverflow.com/a/46171748/3037257

---

更新 2: 最后添加 useServiceWorker(registration) 和一个空的 firebase-messaging-sw.js 文件，两个服务 worker 都在注册，但缓存是不工作。

Answer 1

为了控制 sw.js 和推送通知，useServiceWorker 非常有用。

请参阅此文档 useServiceWorker(registration)

   /------index.html------/
    var config = {
        apiKey: "xxxxxxxxxxxx",
        authDomain: "xxxxxxxxxxxx",
        databaseURL: "xxxxxxxxxxxx",
        projectId: "xxxxxxxxxxxx",
        storageBucket: "xxxxxxxxxxxx",
        messagingSenderId: "xxxxxxxxxxxx"
    };
    firebase.initializeApp(config);
    var messaging = firebase.messaging();

navigator.serviceWorker.register('service-worker.js')
.then((registration) => {
  messaging.useServiceWorker(registration);


});