Question

我遇到了一个奇怪的问题，似乎找不到任何解决办法。我订阅用户到我的网络推送服务，当他们收到通知我跟踪通知显示时，如果它被点击或关闭。但是当我发送带有require交互标志或持久标志的通知并在1分钟左右打开时，它将被禁用。

残疾人的意思是：

无法点击按钮
无法点击自我通知
只能点击X关闭它

然后当用户关闭通知或系统关闭时，我的服务人员不会注册关闭事件。

我在Firefox上遇到的一个问题是，当用户点击通知时，它只关注Firefox中的空标签。

这是我的服务工作者代码：

self.addEventListener('push', function(event) {

console.log('[Service Worker] Push Received.');

data = event.data.json();
const title = data.title;
const options = data.options;

event.waitUntil(
  self.registration.showNotification(title, options)
  .then((notificationEvent)=>{

    let payload = {
      campaign_id: data.campaign_id,
      subscriber_id:data.subscriber_id,
      action:'display'
    }

   sendData(api_url+'touch',payload,'display');

 })
);
});

self.addEventListener('notificationclick',function(event){

  if(data.url){
  console.log('Notification clicked !');

  const clickedNotification = event.notification;
  let   promiseChain = null;

  clickedNotification.close();

  let payload = {
    campaign_id: data.campaign_id,
    subscriber_id:data.subscriber_id,
    action:'click'
  }

  if(event.action === 'button1Link')
  {
    promiseChain = clients.openWindow(data.button1Link);
  }else if(event.action === 'button2Link')
  {
    promiseChain = clients.openWindow(data.button2Link);
  }else if(event.action === 'button3Link')
  {
    promiseChain = clients.openWindow(data.button3Link);
  }else if(event.action === 'closeButton')
  {
    payload.action = 'close';
  }else
  {
    promiseChain = clients.openWindow(data.url);
  }

  sendData(api_url+'touch',payload).then(()=>console.log('Stat 
  sent!'));

  event.waitUntil(promiseChain);
}

})

self.addEventListener('notificationclose',function(event){

  console.log('Notification closed !');

  let payload = {
      campaign_id: data.campaign_id,
      subscriber_id:data.subscriber_id,
      action:'close'
    }

  event.waitUntil(sendData(api_url+'touch',payload,'close'));

})



function sendData(url,payload)
{

  let data = new FormData();

  Object.keys(payload).map((field)=>{
    data.append(field,payload[field]);
  });

  return fetch(api_url+'touch', {
      method: 'POST', 
      body: data,
      mode:'cors'
     });
}

我真的可以使用一些建议和帮助，因为我在网上看到了为什么会发生这种情况并且似乎无法找到任何有用的东西。

我的有效负载结构如下所示：

   array(7) {
  ["title"]=>
  string(25) "Noise reducing headphones"
  ["url"]=>
  string(76) "https://www.bestbuy.com/site/audio/headphones/abcat0204000.c?id=abcat0204000"
  ["campaign_id"]=>
  string(2) "49"
  ["button1Link"]=>
  string(120) "https://cdn.iconscout.com/public/images/icon/premium/png-512/headphones-phones-music-player-3b0242ebbd8df45e-512x512.png"
  ["button2Link"]=>
  string(120) "https://cdn.iconscout.com/public/images/icon/premium/png-512/headphones-phones-music-player-3b0242ebbd8df45e-512x512.png"
  ["button3Link"]=>
  string(120) "https://cdn.iconscout.com/public/images/icon/premium/png-512/headphones-phones-music-player-3b0242ebbd8df45e-512x512.png"
  ["options"]=>
  array(7) {
    ["actions"]=>
    array(3) {
      [0]=>
      array(2) {
        ["action"]=>
        string(11) "button1Link"
        ["title"]=>
        string(5) "Order"
      }
      [1]=>
      array(2) {
        ["action"]=>
        string(11) "button2Link"
        ["title"]=>
        string(6) "Cancel"
      }
      [2]=>
      array(2) {
        ["action"]=>
        string(11) "button3Link"
        ["title"]=>
        string(17) "Order on facebook"
      }
    }
    ["body"]=>
    string(40) "Listen to your music without disturbance"
    ["image"]=>
    string(56) "campaignimg1.jpg"
    ["icon"]=>
    string(53) "image2.png"
    ["vibrate"]=>
    array(1) {
      [0]=>
      string(0) ""
    }
    ["silent"]=>
    bool(false)
    ["requireInteraction"]=>
    bool(false)
  }
}

Answer 1

所以我弄清楚我的服务人员出了什么问题......

首先重建了我的承诺：

notificationclick listener现在看起来像这样：

self.addEventListener('notificationclick',function(event){
const clickedNotification = event.notification;

  if(clickedNotification.data.url){

  let   openWindowEvent = null;

  clickedNotification.close();

  let payload = {
    campaign_id: clickedNotification.data.campaign_id,
    subscriber_id:clickedNotification.data.subscriber_id,
    action:'click'
  }

  if(event.action === 'button1Link')
  {
    openWindowEvent = clients.openWindow(clickedNotification.data.button1Link);
  }else if(event.action === 'button2Link')
  {
    openWindowEvent = clients.openWindow(clickedNotification.data.button2Link);
  }else if(event.action === 'button3Link')
  {
    openWindowEvent = clients.openWindow(clickedNotification.data.button3Link);
  }else if(event.action === 'closeButton')
  {
    payload.action = 'close';
  }else
  {
    openWindowEvent = clients.openWindow(clickedNotification.data.url);
  }

  payload = prepareData(payload);

  const sendStat = fetch(api_url+'touch', {
      method: 'POST', 
      body: payload,
      mode:'cors'
     });

  const promiseChain = Promise.all([
      openWindowEvent,
      sendStat
    ]);

  event.waitUntil(promiseChain);
}
})

Channing的承诺帮助维持了服务工作者的长期工作，直到完成所有任务。

我也重建了onclose事件监听器，所以现在它看起来像这样：

  self.addEventListener('notificationclose',function(event){

      const closedNotification = event.notification;

      console.log('Notification closed !');

      let payload = {
          campaign_id: closedNotification.data.campaign_id,
          subscriber_id: closedNotification.data.subscriber_id,
          action:'close'
        }

      payload = prepareData(payload);

      const promiseChain = fetch(api_url+'touch', {
          method: 'POST', 
          body: payload,
          mode:'cors'
         });

      event.waitUntil(promiseChain);

  })

一段时间后禁用我的通知的主要问题是访问数据。当'push'事件被触发时，我试图保存从服务器发送的数据时犯了一个错误...这是好的，直到浏览器决定杀死服务工作者。然后你丢失了存储在变量中的所有数据。

解决方案：

使用变量'event'从服务器发送的数据传入所有事件侦听器：

self::addEventListener('notificationclick',function(event){});

从那里，您可以访问通知时发送的所有数据，并根据需要使用它。这解决了无法使用已发送的URL打开新选项卡并注册close事件的问题。

浏览器推送通知一段时间后没有响应

1 个答案: