Fatal编程技术网
  • push-notification/
  • Push notification 即使在service worker中接收到推送事件，也未显示推送通知

Push notification 即使在service worker中接收到推送事件，也未显示推送通知

push-notification

Push notification 即使在service worker中接收到推送事件，也未显示推送通知,push-notification,google-cloud-messaging,service-worker,Push Notification,Google Cloud Messaging,Service Worker,从过去的15天起，我一直在为服务人员工作。这是相当快的学习，但从那时起，我就被困在我的网站上的通知支持 我面临的问题是，即使在向服务工作者注册的推送事件中收到通知，通知也不会显示 但当通过pushcrew.com等服务接收到其他一些桌面通知时，它就会显示出来，然后单击“查看它的实际操作”，我的通知就会显示出来 <!DOCTYPE html> <html> <head> <title></title>

从过去的15天起，我一直在为服务人员工作。这是相当快的学习，但从那时起，我就被困在我的网站上的通知支持

我面临的问题是，即使在向服务工作者注册的推送事件中收到通知，通知也不会显示

但当通过pushcrew.com等服务接收到其他一些桌面通知时，它就会显示出来，然后单击“查看它的实际操作”，我的通知就会显示出来

   <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <link rel="manifest" href="./manifest.json">
   </head>
   <body>

<script type="text/javascript">
    window.onload = function(){
//    console.debug("Onload");

        navigator.serviceWorker
            .register('./service-worker.js')
            .then(function(registration){
                console.log("registration");

                registration.onupdatefound = function() {
                    var installingWorker = registration.installing;

                    installingWorker.onstatechange = function() {
                        switch (installingWorker.state) {
                            case 'installed':
                                if (navigator.serviceWorker.controller) {
                                    // At this point, the old content will have been purged and the fresh content will
                                    // have been added to the cache.
                                    // It's the perfect time to display a "New content is available; please refresh."
                                    // message in the page's interface.
                                    location.reload(true);
                                }
                                else {
                                    // At this point, everything has been precached.
                                    // It's the perfect time to display a "Content is cached for offline use." message.
                                }

                                break;
                            case 'redundant':
                                console.error('The installing service worker became redundant.');
                                break;
                            case 'activating':
                                console.log("activating");
                                break;
                            case 'activated':
                                registration.pushManager.subscribe({
                                    userVisibleOnly: true
                                }).then(function(sub) {
                                    console.log('endpoint:', sub.endpoint);
                                    document.write(sub.endpoint);

                                });
                                console.log("activated");
                                break;
                            default:
                                console.log("Default Condition" + installingWorker.state);
                                break;
                        }
                    }
                };

            })
            .catch(function(err){
//              alert("Service worker registration failed ");

            });


    }
</script>
</body>
</html>
}

service-worker.js

  'use strict';

  self.addEventListener('push', function(event) {
  //  if (self.skipWaiting) { self.skipWaiting(); }

  var notificationTitle = 'Hello';
  var notificationOptions = {
      body: 'Thanks for sending this push msg.',
      tag: 'simple-push-demo-notification',
      data: {
        url: 'https://developers.google.com/web/fundamentals/getting-started/push-notifications/'
      }
  };
  if (event.data) {
      const dataText = event.data.text();
      notificationTitle = 'Received Payload';
      notificationOptions.body = "Push data: " + dataText;
  }

  console.debug('Received a push message', event);

 event.waitUntil(
     self.registration.showNotification(notificationTitle, notificationOptions)
 );
});

self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
// Android doesn’t close the notification when you click on it
// See: http://crbug.com/463146
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('/');
  }
}));
});
您有权使用
通知
，但无权使用
gcm
。这可能是您遇到问题的原因

您必须在权限列表中添加
gcm
（如中所示）

另外，由于
事件
函数已经是一个回调函数，我认为不必使用
waitUntil
来
showNotification
。只需在
控制台后调用该函数。debug
，它也可能有助于解决此问题。

我已添加了gcm权限，并尝试删除waitunitl，但似乎没有任何效果。如果你有其他地方可以找，一定要让我知道。有趣的是，当其他桌面通知出现时，我会看到通知，然后我的网站通知也会显示出来。我不知道我错过了什么。我也尝试过各种在线演示，他们也有同样的问题。我假设这更像是一个配置问题，而实际上是一个技术问题 
  'use strict';

  self.addEventListener('push', function(event) {
  //  if (self.skipWaiting) { self.skipWaiting(); }

  var notificationTitle = 'Hello';
  var notificationOptions = {
      body: 'Thanks for sending this push msg.',
      tag: 'simple-push-demo-notification',
      data: {
        url: 'https://developers.google.com/web/fundamentals/getting-started/push-notifications/'
      }
  };
  if (event.data) {
      const dataText = event.data.text();
      notificationTitle = 'Received Payload';
      notificationOptions.body = "Push data: " + dataText;
  }

  console.debug('Received a push message', event);

 event.waitUntil(
     self.registration.showNotification(notificationTitle, notificationOptions)
 );
});

self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
// Android doesn’t close the notification when you click on it
// See: http://crbug.com/463146
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('/');
  }
}));
});

(index):16 registration
(index):41 activating
(index):51 activated
(index):47 endpoint: https://android.googleapis.com/gcm/send/coiKeSkPta0:APA91bGUTJD6TciT1HANKGd…HqUEz5iQY7y9I_BVbDbPWIv0r7zfHyhlwFl91odzSIhr71IPXDK4ie6ok3yWTN-pflj16Vezq5
service-worker.js:20 Received a push message PushEvent {data: null, type: "push", target: ServiceWorkerGlobalScope, currentTarget: ServiceWorkerGlobalScope, eventPhase: 2…}bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: ServiceWorkerGlobalScopedata: nulldefaultPrevented: falseeventPhase: 0path: Array[0]returnValue: truesrcElement: ServiceWorkerGlobalScopetarget: ServiceWorkerGlobalScopetimeStamp: 0type: "push"__proto__: PushEvent

"permissions": [
    "gcm", ... // Other permissions, like "storage"
]