我们如何将 FCM Service Worker 与现有的 Service Worker 一起使用?
How can we use FCM Service Worker with a existing Service Worker?
我们正在创建一个 PWA 网络应用程序,目前我们正在使用 sw-precache 库来生成服务工作者文件,它按预期工作。现在我们已经添加了 FCM service worker 用于在离线时侦听传入消息,但它正在覆盖我们现有的 service 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)
,它注册了主要的服务人员,但是当我在我的服务中初始化 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();
}
}
// ......
}
控制台错误:
也尝试了以下答案,但没有成功:
更新 2: 最后添加 useServiceWorker(registration)
和一个空的 firebase-messaging-sw.js
文件,两个服务工作人员都在注册,但缓存不起作用。
为了完全控制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);
});
在app.module.ts中或者您可以将以构造函数(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
}
]
}
我们正在创建一个 PWA 网络应用程序,目前我们正在使用 sw-precache 库来生成服务工作者文件,它按预期工作。现在我们已经添加了 FCM service worker 用于在离线时侦听传入消息,但它正在覆盖我们现有的 service 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)
,它注册了主要的服务人员,但是当我在我的服务中初始化 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();
}
}
// ......
}
控制台错误:
也尝试了以下答案,但没有成功:
更新 2: 最后添加
useServiceWorker(registration)
和一个空的 firebase-messaging-sw.js
文件,两个服务工作人员都在注册,但缓存不起作用。
为了完全控制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);
});
在app.module.ts中或者您可以将以构造函数(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
}
]
}