Question

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

那么我们如何将firebase服务工作者与使用sw-precache生成的现有服务工作者集成？

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

pno    month
A    Jan
B    Jun
C    Mar

更新1：我也试过了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); }); }，注册了主要的服务工作者但是当我在我的服务中初始化firebase时它已经期待useServiceWorker(registration)加载，因此它在控制台中引发了一些错误。

服务代码：

firebase-messaging-sw.js

控制台出错：

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

<小时/> 更新2：最后添加

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

  //  ......

}

和空useServiceWorker(registration)文件，两个服务工作者都已注册，但缓存无效。

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


});

Answer 2

在app.module.ts中，或者您可以将以构造函数（sw ...）开头的代码段放入一个服务文件中，当它到达某个延迟加载的功能模块时，您将初始化该服务文件。

if($r['day'] . " " . $month == $day && $r['year'] == date("Y"))
{
   $clicks[$day] = mysqli_num_rows(mysqli_query($mysqli, "SELECT * FROM links WHERE day='".$r['day']."' AND month='".$r['month']."' AND year='".$r['year']."'"));
} else {
   $clicks[$day] = 0;
}

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

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

我们如何将FCM服务工作者与现有服务工作者一起使用？

2 个答案: