推送通知即使在服务人员接收到推送事件，也不会显示

自过去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>

的manifest.json

{ 
"name": "WorkIndia", 
"short_name": "WorkIndia", 
"icons": [{ 
    "src": "icon-128x128.png", 
    "sizes": "128x128", 
    "type": "image/png" 
    }, { 
    "src": "icon-144x144.png", 
    "sizes": "144x144", 
    "type": "image/png" 
    }, { 
    "src": "icon-152x152.png", 
    "sizes": "152x152", 
    "type": "image/png" 
    }, { 
    "src": "icon-192x192.png", 
    "sizes": "192x192", 
    "type": "image/png" 
    }, { 
    "src": "icon-256x256.png", 
    "sizes": "256x256", 
    "type": "image/png" 
    }], 
"permissions": [ 
    "notifications" 
    ], 
"web_accessible_resources": [ 
    "icon-128x128.png" 
], 
"start_url": "index.html", 
"display": "standalone", 
"background_color": "#3E4EB8", 
"theme_color": "#2F3BA2", 
"gcm_sender_id": "234031710894"

}

服务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('/'); 
    } 
})); 
});

控制台

(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

来源

2016-10-02 Moiz Arsiwala

您有notifications的许可权，但不允许使用gcm。这可能是您遇到问题的原因。

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

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

此外，由于event功能已经是一个回调，我不认为有必要必须使用waitUntil到showNotification。只需在console.debug之后调用该函数，它也可以帮助解决问题。

来源

2016-10-03 08:15:01 adjuremods

我已经添加了gcm权限，并试图尝试删除waitunitl，但似乎没有任何工作。如果你有其他地方我可以找，请告诉我。 –

此外，有趣的部分是我看到通知时，出现一些其他桌面通知，然后我的网站通知也可见。我无能为力，我失踪了。我也尝试过各种在线演示，他们也有同样的问题。我认为这更像是一些配置问题，然后是一个技术问题 –

推送通知即使在服务人员接收到推送事件，也不会显示

回答

相关问题