Angular 7 pwa / SwPush - push-уведомления не работают - PullRequest
Новая
       84

Angular 7 pwa / SwPush - push-уведомления не работают

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

Я пытаюсь заставить push-уведомления работать в Angular 7, используя @ angular / pwa link и используя SwPush.Я не могу получить реальные push-уведомления.В настоящее время я работаю на localhost (запустив http-сервер после ng-build), и мой сервер api находится в облаке.Я смог включить подписку, используя swPush.requestSubscription, и подписка успешно зарегистрирована на сервере.В Chrome все вызовы API блокируются самим сервисным работником (сбой: из сервисного рабочего), в то время как в Firefox ошибки нет, но push-сообщение не появляется.

Я добавил соответствующие фрагменты коданиже.Поскольку о конкретных ошибках не сообщается, я не могу продолжить.

Посоветуйте, пожалуйста, как это сделать и показывайте уведомления. 

app.module.ts

import {PushNotificationService} from 'core';
import { ServiceWorkerModule } from '@angular/service-worker';
@NgModule({
declarations: [
    AppComponent,

],
imports: [

    ServiceWorkerModule.register('ngsw-worker.js', { enabled: true })
],
providers: [
    PushNotificationService,
],
exports: [],
bootstrap: [AppComponent]
   })
 export class AppModule {
  }


   app.component.ts
export class AppComponent  {

constructor(private pushNotification :PushNotificationService,
private swPush : SwPush){
this.swPush.messages.subscribe(notification => {
          const notificationData: any = notification;
     const options = {
      body: notificationData.message,
      badgeUrl: notificationData.badgeUrl,
      icon: notificationData.iconUrl
    };
    navigator.serviceWorker.getRegistration().then(reg => {
      console.log('showed notification');
      reg.showNotification(notificationData.title, options).then(res => {
        console.log(res);
      }, err => {
        console.error(err);
      });
    });
  });

}
     isSupported() {
      return this.pushNotification.isSupported;
   }

  isSubscribed() {
  console.log(' ****** profile component' + this.swPush.isEnabled);
  return this.swPush.isEnabled;
}

 enablePushMessages() {
  console.log('Enable called'); 
  this.pushNotification.subscribeToPush();

}

 disablePushMessages(){
  // code for unsubsribe
  }
}

push.notification.service 

 export class PushNotificationService {
 public isSupported = true;
 public isSubscribed = false;
 private swRegistration: any = null;
  private userAgent = window.navigator.userAgent;
 constructor(private http: HttpClient, private swPush: SwPush) {
   if ((this.userAgent.indexOf('Edge') > -1) || 
   (this.userAgent.indexOf('MSIE') > -1) || (this.userAgent.indexOf('.Net') 
    > -1)) {
      this.isSupported = false;
    }
}

subscribeToPush() {
// Requesting messaging service to subscribe current client (browser)
  let publickey = 'xchbjhbidcidd'
   this.swPush.requestSubscription({
    serverPublicKey: publickey
   }).then(pushSubscription => {
     console.log('request push subscription ', pushSubscription);
     this.createSubscriptionOnServer(pushSubscription);
      })
  .catch(err => {
    console.error(err);
  });
}

 createSubscriptionOnServer(subscription) {
  let urlName = 'api/user/notificationSubscription';
  let params;
  params = {
  endpoint: subscription.endpoint,
   };
this.http.put<any>(urlName, params, httpOptions).pipe(
  tap((res) => {
    if (res.data) {
      if (res.data.success) {
        alert('Success')
      } else {
        alert('error')
      }
    }
  }));
 }
 }

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

Вам необходимо установить Angular CLI, PWA для сервисного работника, webpush для генерации ключей VAPID и http-сервер для запуска фиктивного сервера.Вы можете сделать это, выполнив: 

npm i -g @angular/cli --save
ng add @angular/pwa --save
npm i webpush --save
npm i http-server -g --save

Теперь вам нужно сгенерировать пару ключей VAPID, используя webpush для использования ее в переднем конце и бэкэнде 

web-push generate-vapid-keys --json

Сохранить созданную пару где-нибудь.Используйте указанный ниже код в app.component.ts для запроса подписки у пользователя 

import { Component } from '@angular/core';
import { SwPush } from '@angular/service-worker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(swPush: SwPush) {
if (swPush.isEnabled) {
  swPush.requestSubscription({
      serverPublicKey: VAPID_PUBLIC_KEY
    })
    .then(subscription => {
      // send subscription to the server
    })
    .catch(console.error);
}
  }
}

VAPID_PUBLIC_KEY - это открытый ключ, который вы получили ранее.

Добавьте это в свой проект Angular внутри node_modules/@angular/service-worker/ngsw-worker.js

this.scope.addEventListener('notificationclick', (event) => {
            console.log('[Service Worker] Notification click Received. event:%s', event);
            event.notification.close();
            if (clients.openWindow && event.notification.data.url) {
                event.waitUntil(clients.openWindow(event.notification.data.url));
            }
        });

Вы можете ввести вышеуказанный код, где вы найдете ниже строку внутрифайл> это будет в строке номер 1893. 

this.scope.addEventListener('notificationclick', (event) => ..

И вам нужно снова собрать dist для того, чтобы это работало.Теперь используйте 

ng build --prod

, чтобы сгенерировать dist и обслужить его, используя 

http-server ./dist/YOUR_DIST_FOLDER_NAME -p 9999

А в бэкэнд-файле ваш мог бы быть примерно таким: 

const express = require('express');
const webpush = require('web-push');
const cors = require('cors');
const bodyParser = require('body-parser');

const PUBLIC_VAPID = 'PUBLIC_VAPID_KEY';
const PRIVATE_VAPID = 'PRIVATE_VAPID_KEY';

const fakeDatabase = [];

const app = express();

app.use(cors());
app.use(bodyParser.json());

webpush.setVapidDetails('mailto:you@domain.com', PUBLIC_VAPID, PRIVATE_VAPID);

app.post('/subscription', (req, res) => {
       const subscription = req.body;
      fakeDatabase.push(subscription);
    });

app.post('/sendNotification', (req, res) => {
  const notificationPayload = {
    {"notification":
       { 
        "body":"This is a message.",
        "title":"PUSH MESSAGE",
        "vibrate":300,100,400,100,400,100,400],
        "icon":"ICON_URL",
        "tag":"push demo",
        "requireInteraction":true,
        "renotify":true,
        "data":
          { "url":"https://google.com"}
       }
    }
  };

  const promises = [];
  fakeDatabase.forEach(subscription => {
    promises.push(webpush.sendNotification(subscription, 
JSON.stringify(notificationPayload)));
  });
  Promise.all(promises).then(() => res.sendStatus(200));
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

ВнутриURL-адрес, по которому вы можете ввести свой URL-адрес, и при нажатии на уведомление ваше push-уведомление откроет данную ссылку и сфокусирует ее в браузере.

0 голосов
/ 14 января 2019

для работника сервиса вам нужно скомпилировать с --prod.попробуйте скомпилировать с помощью ng build --prod

...