title: Displaying push notifications in angular
body: <p>App.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>const VAPID_PUBLIC = "XXX"
  
  export class AppComponent {
    title = 'web';
  
    constructor(swPush: SwPush, pushService: PushNotificationService) {
      if (swPush.isEnabled) {
        swPush
          .requestSubscription({
            serverPublicKey: VAPID_PUBLIC,
          })
          .then(subscription =&gt; {
            pushService.sendSubscriptionToTheServer(subscription).subscribe(change =&gt; {
  
            })
          })
          .catch(console.error)
      }
    }
  </code></pre>
  
  <p>push-notification.service.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core'
  import { HttpClient } from '@angular/common/http'
  
  const SERVER_URL = 'http://localhost:3000/subscription'
  
  @Injectable()
  export class PushNotificationService {
    constructor(private http: HttpClient) {}
  
    public sendSubscriptionToTheServer(subscription: PushSubscription) {
      return this.http.post(SERVER_URL, subscription)
    }
  }
  </code></pre>
  
  <p>server.js</p>
  
  <pre class="lang-javascript prettyprint-override"><code>const express = require('express');
  const webpush = require('web-push');
  const cors = require('cors');
  const bodyParser = require('body-parser');
  
  const PUBLIC_VAPID =
    'XXX';
  const PRIVATE_VAPID = 'XXX';
  
  const fakeDatabase = [];
  
  const app = express();
  
  app.use(cors());
  app.use(bodyParser.json());
  
  webpush.setVapidDetails('mailto:domain@test.com', PUBLIC_VAPID, PRIVATE_VAPID);
  
  app.post('/subscription', (req, res) =&gt; {
    const subscription = req.body;
    fakeDatabase.push(subscription);
  });
  
  app.post('/sendNotification', (req, res) =&gt; {
    const notificationPayload = {
      notification: {
        title: 'New Notification',
        body: 'This is the body of the notification',
      },
    };
  
    const promises = [];
    fakeDatabase.forEach(subscription =&gt; {
      promises.push(
        webpush.sendNotification(
          subscription,
          JSON.stringify(notificationPayload)
        )
      );
    });
    Promise.all(promises).then(() =&gt; res.sendStatus(200));
  });
  
  app.listen(3000, () =&gt; {
    console.log('Server started on port 3000');
  });
  </code></pre>
  
  <ul>
  <li><p>With the above code, I'm trying to display notifications using angular and express. I started the server on <code>http://localhost:3000</code> then ran <code>ng build --prod</code> <code>then http-server dist/apps/projectName</code>.</p></li>
  <li><p>The request for notifications is working whether to allow or not, on clicking allow, I get response 200 in (checking in network tab chrome dev tools). But the notification message is not getting popped up or displayed in the browser. I need help in fixing this.</p></li>
  </ul>
  
  <p>I tried the code from <a href="https://malcoded.com/posts/angular-push-notifications/" rel="nofollow noreferrer">https://malcoded.com/posts/angular-push-notifications/</a></p>
  
  <p>Thank you.</p>