node.js - 当用户点击 pwa、Angular 6 和 Node.JS 中的 web-push 中的通知时路由到 url

标签 node.js angular6 web-push progressive-web-apps

我正在努力使用 Angular6 中的 SwPush 在 PWA 中推送通知。为此,我使用@angular/service-worker。我可以从 Node 服务器发送通知。但是当我点击收到的通知时,它无法路由所需的网址。我在node.js中使用web-push模块,这是有效负载:

        "payload": {
        "title": "Sample Notification",
        "actions": [
          {
            "action": "opentweet",
            "url":"https://pwa-sw-push-notifications.firebaseapp.com",
            "title": "Open tweet"
          }
        ],
        "body": "A sample data to check the notification availability!",
        "dir": "auto",
        "icon": "https://pwa-sw-push-notifications.firebaseapp.com/assets/icons/icon-72x72.png",
        "badge": "https://pwa-sw-push-notifications.firebaseapp.com/assets/icons/icon-72x72.png",
        "lang": "en",
        "url": "https://pwa-sw-push-notifications.firebaseapp.com",
        "renotify": true,
        "requireInteraction": true,
        "tag": 926796012340920300,
        "vibrate": [
          100,
          50,
          100
        ],
        "data": {
          "url": "https://pwa-sw-push-notifications.firebaseapp.com",
          "favorite_count": 0,
          "retweet_count": 0
        }
      }

我正在使用

var webPush=require('web-push');

//sub is userSubscriptionObject to send the notifications to subscribed user browser.
webPush.sendNotification(sub, JSON.stringify(payload))))

有角度,

export class IndexComponent implements OnInit {
  users: any = [];
  constructor(
    private http: HttpClient, 
    private router: Router, 
    private swPush: SwPush) {
    console.log('this is index');
  }
  ngOnInit() {
    this.getCoins();
  }
  subscribeNotifications(){
        this.swPush.requestSubscription({
      serverPublicKey: "BMW3STH0ODuNdhFVAZIy8FUDEwt2f8LLpWBiBnz8WE0_558rZc4aLbZUD9y-HxMlfCtyE5OD0mk3xa2oFJZu5n0"
    }).then(sub => {
        console.log("Notification Subscription: ", sub);
        this
        .http
        .post('https://e1a2e469.ngrok.io/sub/subscribeNotifications', sub);.subscribe(
          () => {
            console.log('Sent push subscription object to server.');        
        },
          err => console.log('Could not send subscription object to server, reason: ', err)
        );
      })
      .catch(err => console.error("Could not subscribe to notifications", err));
  }
  unsubscribeNotifications(){
    this.swPush.subscription.pipe(take(1)).subscribe(subscriptionValue=>{
      console.log('this is un subscription', subscriptionValue);
        this
        .http
        .post('https://e1a2e469.ngrok.io/sub/unsubscribeNotifications', subscriptionValue);
          .subscribe(
          res => {
            console.log('[App] Delete subscriber request answer', res)
            // Unsubscribe current client (browser)
            subscriptionValue.unsubscribe()
              .then(success => {
                console.log('[App] Unsubscription successful', success)
              })
              .catch(err => {
                console.log('[App] Unsubscription failed', err)
              })
          },
          err => {
            console.log('[App] Delete subscription request failed', err)
          }
    );
  });
}
  sendNotifications(){
    console.log('subscribeNotifications')
    this
      .http
      .post('https://e1a2e469.ngrok.io/sub/sendNotifications', null).subscribe(res=>{
      console.log('subscribed successfully');
    });
  }
}

我的意图是,当用户单击通知时,它应该路由到

https://pwa-sw-push-notifications.firebaseapp.com

我尝试在上述对象的不同参数中提供此 URL,例如 actions[0].action.url URL data.url但没有任何作用。所以我很困惑在哪里给出 URL 才能使其成为可能。有人可以帮我吗?

谢谢。

最佳答案

据我所知,您的有效负载没有任何问题。有效负载只是传递到浏览器的数据,在浏览器端,您需要实现 notificationClick 处理程序才能处理有效负载数据,即导航到所需的 URL。一个简单的 notificationClick 处理程序可以在 Service Worker 中实现,如下所示:

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

请查看以下链接作为引用: https://github.com/angular/angular/issues/20956#issuecomment-374133852 https://medium.com/google-developer-experts/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1

关于node.js - 当用户点击 pwa、Angular 6 和 Node.JS 中的 web-push 中的通知时路由到 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50967365/

相关文章:

javascript - 在 Node Mysql 中使用 Promise api 不起作用

linux - Linux Darwin 和 Windows_NT 系统中的禁止文件/目录名称

javascript - 如何在 ExpressJS 中使用 Q Promise?

javascript - 使用 TLS (SSL) 从 flash v11+ 连接到 nodejs

angular - 响应式(Reactive)表单自定义验证器不显示 Angular6 中的错误

ASP.NET Core 中的 Angular 应用程序 6 : More than one module matches

python - Web 推送通知有效负载数据为空

javascript - 如何在 Angular 项目中使用 ng-circle-progress src 代码?

javascript - Web Push 和 FCM 的区别

web-push - Pushpad 或 Web 推送通知如何自定义对话框消息