Laravel如何向React应用推送通知 解决service worker self全局变量报错问题

1. 修复test函数语法错误 #

你提供的test函数末尾多了多余的闭合括号，先修正语法问题：

function test(){
    console.log('test');
    workerApi.makePushNotification({ URL, token})
          .then(response => {
              if (response.hasOwnProperty('message') && response.hasOwnProperty('type')) {
                // 补充你的处理逻辑
              }
              else {
                console.log(JSON.stringify(response.data));
              }
          });
  }

2. 修复service worker的ESLint报错 #

unexpected use of 'self' no restricted-globals报错是ESLint规则不识别service worker环境下的合法全局对象self导致的，两种解决方式：

• 临时在service-worker.js文件顶部加注释忽略规则：

/* eslint-disable no-restricted-globals */
self.addEventListener('push', function (e) {
  // 原有代码保持不变
});

• 或者在项目ESLint配置文件（比如.eslintrc.json）中添加service worker环境声明：

{
  "env": {
    "serviceworker": true
  }
}

3. 确认service worker已正确注册 #

必须在React应用入口（比如index.js）主动注册service worker才会生效，注册代码参考：

if ('serviceWorker' in navigator && 'PushManager' in window) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/service-worker.js');
      console.log('ServiceWorker 注册成功', registration);
      // 请确认这里已经完成了通知权限申请、订阅信息上传到Laravel store接口的逻辑
      // 可以去数据库核对push_subscriptions表中存储的endpoint、p256dh、auth字段是否完整
    } catch (error) {
      console.log('ServiceWorker 注册失败', error);
    }
  });
}

4. 核对Laravel端Web推送配置 #

• 确认已经安装了laravel-notification-channels/webpush扩展，并且运行了迁移生成了push_subscriptions表
• 确认.env文件中配置了正确的VAPID密钥对，生成密钥的命令为：

php artisan webpush:vapid

生成后将公钥、私钥对应填入.env的VAPID_PUBLIC_KEY和VAPID_PRIVATE_KEY字段

• 确认PushDemo通知类正确实现了toWebPush方法，示例代码：

// app/Notifications/PushDemo.php
use NotificationChannels\WebPush\WebPushMessage;
use NotificationChannels\WebPush\WebPushChannel;

public function via($notifiable)
{
    return [WebPushChannel::class];
}

public function toWebPush($notifiable, $notification)
{
    return (new WebPushMessage)
        ->title('测试通知')
        ->body('这是推送的测试内容')
        ->icon('/notification-icon.png');
}

5. 核对运行环境与流程逻辑 #

• Web推送只能在localhost本地环境或者HTTPS域名下运行，HTTP域名下会被浏览器直接禁用
• 确认浏览器已经给你的站点开放了通知权限，可以在浏览器地址栏的权限设置面板中查看
• 可以在PushDemo的toWebPush方法中添加日志，确认Laravel端执行推送逻辑时该方法被正常调用

内容的提问来源于stack exchange，提问作者starterforprogrammernew