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

【问题标题】：How can we use FCM Service Worker with a existing Service Worker?我们如何将 FCM Service Worker 与现有的 Service Worker 一起使用？
【发布时间】：2018-06-25 22:50:26
【问题描述】：

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

那么我们如何将 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)，它注册了主要的服务工作者，但是当我在我的服务中初始化 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 文件，两个服务工作者都已注册但缓存不起作用。

【问题讨论】：

/service-worker.js 提供的路径不正确。我在创建反应应用程序的公共文件夹中提供了路径为 ${process.env.PUBLIC_URL}/firebase-messaging-sw.js 和 firebase-messaging-sw.js。

标签： angular firebase-cloud-messaging service-worker angular-service-worker

【解决方案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);


});

【讨论】：

我也试过这个......但是当我试图在我的服务中初始化firebase时......它显示服务工作者注册失败......
1st，SW 无权访问您的 dom，因此如果您想在 SW 中初始化 firebase，那么您应该在 SW 开始时导入所有 firebase 依赖项。第二你不需要在SW中初始化firebase，在index.html中编写上面的代码。
你能分享一下你在项目目录中的文件结构截图吗...！
在生产中，两个 service-worker 都在同一个目录中，/dist 文件夹
firebase-messaging-sw.js 是 FCM 推送通知的强制文件，我认为您的问题根源是 mime 类型 text/html，请尝试删除该错误

【解决方案2】：

在 app.module.ts 中，或者您可以将 sn-p 以 constructor(sw...) 开头放入一个服务文件中，当它到达某个延迟加载的功能模块时，您将对其进行初始化。

import * as firebase from 'firebase';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(swPush: SwPush) {
    if (swPush.isEnabled) {
      navigator.serviceWorker
        .ready
        .then((registration) => firebase.messaging().useServiceWorker(registration));
    }
  }
}

在 angular-cli.json 中确保你有 firebase-messaging-sw.js

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "manifest.json",
        "firebase-messaging-sw.js"
      ],
      "index": "index.html",
      "main": "main.ts",
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      },
      "serviceWorker": true
    }
  ]
}

【讨论】：