推送通知，多个 Service Worker？适用于 Web/Android/IOS 和 Firebase 的 Angular Ionic 5 PWA

Question

我的 Ionic/Angular Capacitor PWA 有问题。我需要为 Web、Android 和 IOS 设置推送通知，但现在只关注 Web。

我已将 Angular 应用程序设置为向用户请求通知权限。我使用他们在响应“是”时登录的 firebase uid 将令牌存储在 firestore 中。我有 firebase 函数，当它在 firestore db 中创建时应该触发特定文档类型的 onCreate。

我的问题是下一步。我到处都应该设置一个服务人员来处理通知。但是我已经有了一个（PWA），但我不知道如何设置另一个不会弄乱 PWA 软件的服务人员。

不知何故，我需要使这项工作跨平台。我现在需要让它适用于 Web，但稍后也适用于 android/ionic。

我可以使用多个 Service Worker 而不引起问题吗？如何？ 当我进行 Android/IOS 实现时它会如何变化？ 你有资源可以指点我吗？

提前致谢

Answer 1

在现代 Angular (8+) 应用程序中，Service Worker 是在构建时生成的，其 configuration is done via ngsw-config.json 文件位于项目的根文件夹中。

在您的情况下，您需要确保项目的服务人员具有 Firebase 导入和传入通知消息处理程序功能。为此，一种策略可以是：

• 创建另一个 combine-service-worker.js 文件
• 使用 importScripts('ngsw-worker.js'); 使其导入 Angular 的服务工作者；
• 在您的 app.module.ts 中指向 ServiceWorkerModule 以明确利用 combine-service-worker.js

以下是您的 combine-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);
        });
    };

};

您可以在根文件夹中创建此文件并配置项目的 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"
          }
        ],

这将确保combined-service-worker.js 在构建后将其放入文件夹中。

现在，在您的 app.module.ts 中，您可以明确将此工作人员设置为需要激活的一个应用程序：

...
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 的混合版本时，您可以调整激活策略，这样如果平台是“混合”的，您就可以完全跳过 Service Worker 注册。