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

Вам необходимо установить 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) => ..

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

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:[email protected]', 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-уведомление откроет данную ссылку и сфокусирует ее в браузере.

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

В моем случае уведомления Google Chrome были отключены на моем компьютере с Windows в настройках Уведомления и действия.