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

【问题标题】：Push event of service worker is not being called服务工作者的推送事件没有被调用
【发布时间】：2017-05-14 04:41:14
【问题描述】：

我正在尝试接收来自 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 EM>”） P>

来自网址：-“https://android.googleapis.com/gcm/send/cw4jK8NhJgY:APA91bHr64E_kSdh7kN_VjcZRKulPf8KPLJLBjtnHI2qkYzx3-I9aUhunjzVcJjLtkHl9zvN8ys80gADK8tV8SueLX1R2jS0xgrf1Ur6cDw3jNjloUJp8PtWaIN-cEKXj69TZ9-D2Hiw”

在我的 service worker 文件中，我只是收听推送消息，例如：-

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"}]}

但我不知道为什么我在推送监听器中看不到日志？我在这个问题上停留了超过 2 天。任何人都可以在这里帮助我吗？我在 localhost 中执行此操作。

【问题讨论】：

您可以查看此related SO post，如果有帮助，请尝试给出的解决方法。有时，推送需要一些时间才能到达，因此请检查您发送的推送的 time_to_live 是什么。

标签： javascript push-notification google-cloud-messaging service-worker progressive-web-apps

【解决方案1】：

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

打开chrome://gcm-internals
开始录制
向浏览器发送测试推送通知
观察日志

服务器在推送请求中收到 201，并且浏览器在控制台日志中没有抛出任何错误。但是，我遇到了解密问题。浏览器收到推送通知但解密失败：AES-GCM decryption failed。

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

【讨论】：

【解决方案2】：

我遇到了同样的问题。我更新了我的 Google Chrome 版本并解决了这个问题。

【讨论】：

【解决方案3】：

我想通过声明添加到 bvakiti 的解决方案中

applicationServerKey: convertedVapidKey

在 pushManager 中订阅。我在互联网上找到的大多数教程都只是使用 bvakiti 的方法，并且大多数遵循该教程的开发人员在接收推送通知时遇到了问题。

【讨论】：

【解决方案4】：

您没有返回 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

如果您需要任何详细信息，请告诉我

【讨论】：