我们正在创建一款PWA Web应用程序,目前我们正在使用sw-precache库生成服务工作者文件,并且它的功能正常。现在,我们已经添加了FCM服务工作者来监听离线状态下的传入消息,但它会覆盖我们现有的服务工作者。
那么,我们该如何将Firebase服务工作者与使用sw-precache生成的现有服务工作者集成起来?
我尝试了几种方法,当前代码:
更新2: 最后添加
那么,我们该如何将Firebase服务工作者与使用sw-precache生成的现有服务工作者集成起来?
我尝试了几种方法,当前代码:
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://dev59.com/WqTja4cB1Zd3GeqPHtLT#46171748
更新2: 最后添加
useServiceWorker(registration)
和一个空的firebase-messaging-sw.js
文件,两个服务工作者都已注册,但缓存不起作用。
${process.env.PUBLIC_URL}/firebase-messaging-sw.js
,其中 firebase-messaging-sw.js 位于创建 React 应用程序的 public 文件夹中。 - haripcce