プッシュ通知サービスワーカーでプッシュイベントが受信されても表示されません

私は過去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機能がすでにコールバックであることから、私はshowNotificationにwaitUntilを使用する必要がありますする必要は表示されません。 console.debugの後に関数を呼び出すだけで問題が解決するかもしれません。

出典

2016-10-03 08:15:01 adjuremods

私はgcmの許可を加えて、またwaitunitlを削除しようとしましたが、何も動作していないようです。私が探している他の場所があれば教えてください。 –

面白いことに、他のデスクトップ通知が表示されたときに通知が表示され、Webサイトの通知も表示されます。私は何が欠けているのかわからない。また、オンラインでさまざまなデモを試してみましたが、同じ問題があります。私はこれがいくつかの構成上の問題よりも実際には技術的な問題のように思っています –

プッシュ通知サービスワーカーでプッシュイベントが受信されても​​表示されません

答えて

関連する問題

プッシュ通知サービスワーカーでプッシュイベントが受信されても表示されません