Pu sh Уведомления, несколько сервисных работников? Angular Ioni c 5 PWA для Интернета / Android / IOS и Firebase - PullRequest
0 голосов
/ 27 мая 2020

У меня проблемы с Ionic / Angular Capacitor PWA. Мне нужно настроить PU SH УВЕДОМЛЕНИЯ для Интернета, Android и IOS, но сейчас я сосредоточен только на Интернете.

У меня есть приложение Angular, настроенное для запроса разрешения пользователя на уведомления. Я храню токен в firestore, используя uid firebase, с которым они вошли в систему, когда они отвечают «ДА». У меня есть функции firebase, которые должны запускать onCreate определенного типа документа, когда он создается в базе данных firestore.

Моя проблема - следующий шаг. Куда бы я ни посмотрел, я должен назначить сервис-воркера для обработки уведомлений. Но у меня уже ЕСТЬ один (PWA), и я не знаю, как настроить другого сервис-воркера, который не испортит PWA sw.

Как-то мне нужно сделать эту работу кроссплатформенной. Мне нужно будет заставить его работать для Интернета прямо сейчас, но позже и для android / ioni c.

Могу ли я использовать несколько сервисных воркеров, не вызывая проблем? Как? Как это изменится, когда я буду реализовывать Android / IOS? Есть ли ресурс, на который вы могли бы мне указать?

Заранее спасибо

1 Ответ

0 голосов
/ 27 мая 2020

В современном приложении 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, вы можете настроить стратегии активации таким образом, что если платформа является «гибридной», вы пропустите услугу регистрация работника полностью.

...