Angular 7 PWA настроить Push-уведомления - PullRequest
Новая
       78

Angular 7 PWA настроить Push-уведомления

0 голосов
/ 18 ноября 2018

Я создаю PWA, используя angular 7, но я борюсь с push-уведомлениями.

Я следовал инструкциям как this и this используя пары ключей SWPush и Vapid.Я был в состоянии подписаться и отписаться, и моя серверная часть также работает, но, к сожалению, учебные пособия не охватывают показ фактического уведомления в приложении.

Как я понял, уведомления должны появляться автоматически, не вызывая его.в коде, верно?Вы просто подписываетесь, а ngsw сделает все остальное.К сожалению, они не появляются в моем случае.Я могу показать их только вручную, вызывая их в коде, подобном следующему: 

 this.swPush.messages.subscribe(
  (notification: any) => {
    console.log("received push message", notification);

    let options = {
      body: notification.body,
      icon: "assets/icon/favicon.png",
      actions: <any>notification.actions,
      data: notification.data,
      vibrate: [100, 50, 10, 20, 20]
    };
    this.showNotification(notification.title, options)
  },

  err => {
    console.error(err);
  }
);

[...]

showNotification(title: string, options: NotificationOptions) {
    navigator.serviceWorker.getRegistration().then(reg => {
      reg.showNotification(title, options).then(res => {
        console.log("showed notification", res)
      }, err => {
        console.error(err)
      });
   });
}

Но, похоже, это работает, только когда приложение / страница находятся на переднем плане.В противном случае я получаю уведомление типа «Сайт был обновлен в фоновом режиме».Очевидно, что я делаю что-то не так. Но что?

  1. Что мне нужно сделать, чтобы показывать уведомления, когда приложение находится в фоновом режиме?

  2. Есть ли способ обработки событий щелчка в уведомлениях?

Документация ng здесь очень редкая.

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

После долгой борьбы я нашел что-то и поделюсь этим для других:

Копание в ngsw-worker.js, который создается при запуске build --prod, есть эта функция: 

onPush(msg) {
    // Push notifications without data have no effect.
    if (!msg.data) {
        return;
    }
    // Handle the push and keep the SW alive until it's handled.
    msg.waitUntil(this.handlePush(msg.data.json()));
}
...
handlePush(data) {
    return __awaiter$5(this, void 0, void 0, function* () {
            yield this.broadcast({
                type: 'PUSH',
                data,
            });

            if (!data.notification || !data.notification.title) {
                return;
            }

            const desc = data.notification;

            let options = {};
            NOTIFICATION_OPTION_NAMES.filter(name => desc.hasOwnProperty(name))
                .forEach(name => options[name] = desc[name]);
            yield this.scope.registration.showNotification(desc['title'], options);
    });
}

Поскольку это выглядит как угловая подписка и показывает уведомление для вас, нет необходимости подписываться и показывать его в своем собственном коде. У меня была проблема с отправляющей библиотекой (https://github.com/laravel-notification-channels/webpush), которая отправляла полезную нагрузку следующим образом: 

payload = {"title":"test","actions":[{"title":"View App","action":"view_app"}],"body":"test","icon":"\/icon.png","data":{"id":"21a3804e-6d71-4a56-b513-535709c37c0f"}}

но angular ожидает что-то вроде: 

payload = {
    "notification":{"title":"test","actions":[{"title":"View App","action":"view_app"}],"body":"test","icon":"\/icon.png","data":{"id":"21a3804e-6d71-4a56-b513-535709c37c0f"}}
}

, что привело к сбою этой строки в ngsw-worker.js: 

if (!data.notification || !data.notification.title) {
    return;
}

Таким образом, уведомление не отображалось, но браузер сообщил об обновлении в фоновом режиме. Надеюсь, это кому-нибудь поможет.

0 голосов
/ 04 декабря 2018

Есть ли способ обработки событий щелчка в уведомлениях?

Попробуйте это: 

this.swPush.notificationClicks.subscribe(data => {
    // handle click
})
...