服务工作者的推送事件没有被调用

Question

我正在尝试从GCM接收推送消息。我只是按照以下方式注册了服务工作者，遵循了教程：

      function urlB64ToUint8Array(base64String) {
      const padding = '='.repeat((4 - base64String.length % 4) % 4);
      const base64 = (base64String + padding)
        .replace(/\-/g, '+')
        .replace(/_/g, '/');

      const rawData = window.atob(base64);
      const outputArray = new Uint8Array(rawData.length);

      for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
      }
      return outputArray;
    }
    var subscribeForPush = function() {
        navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
            serviceWorkerRegistration.pushManager.subscribe({
                    userVisibleOnly: true,
                    applicationServerKey : urlB64ToUint8Array('<API-KEY>')
                })
                .then(function(subscription) {
                    console.log("Subscription for Push successful: ", subscription);
                })
                .catch(function(error) {
                    console.log("Subscription for Push failed", error);
                });
        });
    };
    if ('serviceWorker' in navigator) {
          window.addEventListener('load', function() {
            navigator.serviceWorker.register('/sw.js').then(function(registration) {
              // Registration was successful
              console.log('ServiceWorker registration successful with scope: ', registration.scope);
              subscribeForPush();
            }).catch(function(err) {
              // registration failed :(
              console.log('ServiceWorker registration failed: ', err);
            });
        });
    }

现在，我获取了设备ID ("cw4jK8NhJgY:APA91bHr64E_kSdh7kN_VjcZRKulPf8KPLJLBjtnHI2qkYzx3-I9aUhunjzVcJjLtkHl9zvN8ys80gADK8tV8SueLX1R2jS0xgrf1Ur6cDw3jNjloUJp8PtWaIN-cEKXj69TZ9-D2Hiw")

从网址：- "https://android.googleapis.com/gcm/send/cw4jK8NhJgY:APA91bHr64E_kSdh7kN_VjcZRKulPf8KPLJLBjtnHI2qkYzx3-I9aUhunjzVcJjLtkHl9zvN8ys80gADK8tV8SueLX1R2jS0xgrf1Ur6cDw3jNjloUJp8PtWaIN-cEKXj69TZ9-D2Hiw"

在我的服务工作者文件中，我只需监听推送消息即可：

     self.addEventListener('push', function(event) {  
          console.log(event)
      });

我可以使用终端向GCM发送消息并获取消息：

   {"multicast_id":4983340130324592129,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1483043226210433%cc9b4facf9fd7ecd"}]}

但我不知道为什么在推送监听器中看不到日志？我已经被卡在这个问题上超过两天了。有人可以帮我吗？我是在本地主机上进行的。

- user746458

---

您可以查看相关的 SO 帖子，并尝试给出的解决方法是否有帮助。有时候，推送到达需要一些时间，因此请检查您发送的推送的 time_to_live。 - abielita

Answer 1

您没有返回pushManager订阅

navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    return serviceWorkerRegistration.pushManager.subscribe({
        'userVisibleOnly': true
}).then(function(subscription) {
        if (!subscription) {
            // Set appropriate app states.
            return;
        }
        console.log(subscription.endpoint);

    }).catch(function (err) {
        console.log('error in subcription .. '+ err);
    });

})

请查看我的Github项目： https://github.com/bvakiti/bvakiti.github.io/blob/master/app.js

如果您需要更多详细信息，请告诉我。

- bvakiti

Answer 2

我想通过声明来补充 bvakiti 的解决方案。

applicationServerKey: convertedVapidKey

在pushManager订阅中。我在互联网上找到的大多数教程都使用了bvakiti的方法，而且许多开发者在按照该教程操作时遇到了接收推送通知的问题。

- oninross

Answer 3

如果您确定服务工作者已在浏览器中注册，但“推送”事件未被触发，您可以通过执行以下操作来调试所有传入的推送通知到Google Chrome：

1. 打开chrome://gcm-internals
2. 开始记录
3. 向浏览器发送测试推送通知
4. 观察日志

服务器对推送请求返回201，并且浏览器的控制台日志中没有错误。然而，我遇到了解密问题。浏览器收到了推送通知，但无法解密它：AES-GCM解密失败。

有用的来源：https://developers.google.com/web/fundamentals/push-notifications/common-issues-and-reporting-bugs

- Khalid Ibrahim

Answer 4

我曾经遇到过同样的问题。我更新了我的Google Chrome版本，问题得到了解决。

- Vik