单击@ angular/service-worker推送通知的操作部分 [英] Clicking the action part of @angular/service-worker push notifications

问题描述

我一直在尝试将用户重定向到来自后端(PHP)的Webpush的操作"部分.

I've been trying to redirect users to the "action" part of Webpush coming from the backend (PHP).

    return (new WebPushMessage)
        ->title('Title')
        ->icon('icon.png')
        ->body('Body Msg')
        ->action('Open Notification', 'open_notification')
        ->data(['id' => $notification->id,'url'=>'http://somewhere']);

默认服务人员使用:

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event.notification.tag);
    event.notification.close();

    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(clients.matchAll({
       type: "window"
    }).then(function(clientList) {
       for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
              if (client.url == '/' && 'focus' in client)
                 return client.focus();
       }
       if (clients.openWindow)
          return clients.openWindow('/');
    }));
});

来自 https://developer.mozilla.org/zh-CN/docs/Web/Events/notificationclick

Angular 5用途

Angular 5 uses

import {SwPush, SwUpdate} from '@angular/service-worker'; 

然后我的问题是如何使用@ angular/service-worker在前端(Angular 5)中解释这一点

My question then is how to interpret this in the front end (Angular 5) using @angular/service-worker

推荐答案

得到 u-ryo 的响应>在Github上

Got a response from u-ryo on Github

有一种解决方法. 围绕以下代码将以下代码添加到ngsw-worker.js中 this.scope.addEventListener('push'，(event)=> this.onPush(event));(第1775行).

There is a workaround. Add the codes below to ngsw-worker.js around the line this.scope.addEventListener('push', (event) => this.onPush(event));(Line 1775).

  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));
    }
  });

然后，您可以在"notification.data.url"中指定URL.

Then you can specify the URL in the "notification.data.url".

https://github.com/angular/angular/issues/20956# issuecomment-374133852

这篇关于单击@ angular/service-worker推送通知的操作部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！