Javascript PHP成功webpush未触发SW中的推送事件侦听器

我想实现对网站的推送通知，但我无法触发推送事件 使用PHP和，即使消息似乎已成功发送

我曾尝试从控制台（chrome）触发该事件，但效果良好

服务人员：

self.addEventListener('install', async event => {
    // works fine
    console.log('install event')
});

self.addEventListener("push", function(event) {
   // console logs work only when I press push button in the console
   console.log( 'push event' );
   console.log( event );
   var data = event.data.json();

   event.waitUntil(self.registration.showNotification(data.title, {

      body: data.body,

      icon: data.icon,

      tag: data.tag

    }));

});

Php端点（push.Php）：

---

问题是“钥匙”我传递给Subscription:：create的关联数组的值具有错误的硬编码值。

可能存在的问题之一是，您需要允许在服务器上放置和删除请求类型。

是否可以导航到

chrome://gcm-internals/

，查看发送推送通知后是否可以看到一些日志消息

 <?php

 require_once __DIR__ . '/vendor/autoload.php';
 use Minishlink\WebPush\WebPush;
 use Minishlink\WebPush\Subscription;

 $auth = [
     'VAPID' => [
         'subject' => 'mailto:me@website.com', // can be a mailto: or your website address
         'publicKey' => 'BL9qxdhqL_CM1ROLo6AUfeBvEyUuD7EHT3lAz8ksBZSYPsdE6q__uU2FoX9lr5FtmWtlHs-HRMHen3Ki8WWSVA4', // (recommended) uncompressed public key P-256 encoded in Base64-URL
          'privateKey' => '7ldG3QYcY9KStB07ytTnd0CRCVSxbHfHYLyWEmgBKo0', // (recommended) in fact the secret multiplier of the private key encoded in Base64-URL
     ],
 ];

 $subscription = Subscription::create([
       // I'm using post just for test, in production I will fetch endpoints from database
       'endpoint' => $_POST['endpoint'], // I get the value from subscription object
        "keys" => [
            'p256dh' => 'BL9qxdhqL_CM1ROLo6AUfeBvEyUuD7EHT3lAz8ksBZSYPsdE6q__uU2FoX9lr5FtmWtlHs-HRMHen3Ki8WWSVA4',
            'auth' => '7ldG3QYcY9KStB07ytTnd0CRCVSxbHfHYLyWEmgBKo0'
         ],
       'contentEncoding' => 'aesgcm',
   ]);

  $webPush = new WebPush($auth);
  $sent = $webPush->sendNotification($subscription, 'Hi');

  foreach ($webPush->flush() as $report) {
       $endpoint = $report->getRequest()->getUri()->__toString();
       if ($report->isSuccess()) {
            // I get this in the response
            echo "[v] Message sent successfully for subscription {$endpoint}.";
       } else {
            echo "[x] Message failed to sent for subscription {$endpoint}: {$report->getReason()}";
       }
  }

 async function registerSw () {
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./sw.js').then(function(registration) {
            subscribeToPush();
        }).catch(error => console.log(error));
    } else {
        alert('Service workers not supported');
    } 
}

 async function subscribeToPush () {
    navigator.serviceWorker.ready.then(function(registration) {

       registration.pushManager.subscribe({

           userVisibleOnly: true,

            applicationServerKey: 
         urlB64ToUint8Array('BL9qxdhqL_CM1ROLo6AUfeBvEyUuD7EHT3lAz8ksBZSYPsdE6q__uU2FoX9lr5FtmWtlHs-HRMHen3Ki8WWSVA4')

  })

  .then(function(subscription) {

    // The subscription was successful
    ajax(subscription);

  })

  .catch(function(e) {

    console.log( e );

  });

});
  }

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;
    }

  function ajax (subscription) {
      console.log( 'in ajax' );
     console.log( subscription );
      $.ajax({
          url: 'push.php',
          type: 'POST',
          data: {
             'endpoint': subscription.endpoint,
          },
          success: function( response ) {
            // response = JSON.parse( response );
             console.log(typeof response);
            console.log(response);
            // I get message was sent successfuly here
          },
         error: function (xhr, status, error) {
            console.log( xhr.responseText );
        }
     });
   }