В современном приложении Angular (8+) сервис-воркер создается во время сборки, а его конфигурация выполняется через ngsw-config. json файл, который находится в папке root вашего проекта.
В вашем случае вам необходимо убедиться, что сервис-воркер вашего проекта поддерживает импорт firebase и функции обработки входящих сообщений уведомлений. Для этого одна стратегия может быть следующей:
- создать другого комбинированного работника службы. js файл
- заставить его импортировать работника службы angular с помощью importScripts ('ngsw- worker. js ');
- в вашем app.module.ts точка ServiceWorkerModule для использования комбинированного работника службы. js точно
Вот как вы service-worker. js может выглядеть так:
// IMPORT ANGULAR'S SW:
importScripts('ngsw-worker.js');
// FIREBASE PART:
if (ServiceWorkerRegistration && "pushManager" in ServiceWorkerRegistration.prototype) {
importScripts('https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.13.1/firebase-messaging.js');
initializeFirebaseCloudMessaging();
const messaging = firebase.messaging();
enableBackGroundMessages();
function initializeFirebaseCloudMessaging() {
const FIREBASE_CONFIG = {
// apiKey: ...
// etc config for your firebase project
}
firebase.initializeApp(FIREBASE_CONFIG);
};
function enableBackGroundMessages() {
messaging.setBackgroundMessageHandler((payload) => {
const notificationOptions = {
body: payload.message,
icon: 'assets/img/mstile-150x150.png'
};
return self.registration.showNotification("Morphistic", notificationOptions);
});
};
};
Вы можете создать этот файл в своей папке root и настроить angular. json своего проекта так, чтобы он рассматривался как «актив»:
"assets": [
"src/favicon.ico",
"src/robot.txt",
"src/manifest.json",
"src/combined-service-worker.js",
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
Это обеспечит объединенный сервис-воркер. js попадет в папку после сборки.
Теперь в вашем app.module.ts вы можете явно установить это worker, так как необходимо активировать одно приложение:
...
import { ServiceWorkerModule } from '@angular/service-worker';
...
@NgModule({
declarations: [
AppComponent,
MorphBarComponent
],
imports: [
IonicModule.forRoot({
mode: 'ios'
}),
AppRoutingModule,
PipesModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
RouterModule,
IonicStorageModule.forRoot(),
ServiceWorkerModule.register('combined-service-worker.js', { enabled: true, registrationStrategy: 'registerImmediately' }),
BrowserModule,
HammerModule,
AngularFireModule.initializeApp(ENV.FIREBASE_CONFIG),
AngularFireMessagingModule
],
Позже, когда вы получите гибридные сборки для iOS / Android, вы можете настроить стратегии активации таким образом, что если платформа является «гибридной», вы пропустите услугу регистрация работника полностью.