处理传入通知：Web

Question

我是 Pusher 的新手。到目前为止我可以收到通知，但我想在通知到达用户时处理自定义操作。我应该在我的项目中将PusherPushNotifications.onNotificationReceived 放在哪里？我的控制台日志中没有“123”。我正在使用 Pusher 的 service worker (Pusher Service Worker)。

Pusher Documentation

<script src="https://js.pusher.com/beams/1.0/push-notifications-cdn.js"></script>
<script>
    PusherPushNotifications.onNotificationReceived = ({
        pushEvent,
        payload
    }) => {
        // NOTE: Overriding this method will disable the default notification
        // handling logic offered by Pusher Beams. You MUST display a notification
        // in this callback unless your site is currently in focus
        // https://developers.google.com/web/fundamentals/push-notifications/subscribing-a-user#uservisibleonly_options

        // Your custom notification handling logic here ????️
        console.log('123');
        // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification
        pushEvent.waitUntil(
            self.registration.showNotification(payload.notification.title, {
                body: payload.notification.body,
                icon: payload.notification.icon,
                data: payload.data,
            }),
        );
    };

    const tokenProvider = new PusherPushNotifications.TokenProvider({
        url: 'http://localhost/tutorial/auth.php',
    });

    const beamsClient = new PusherPushNotifications.Client({
        instanceId: 'instanceId',
    });

    beamsClient
        .start()
        .then(() => beamsClient.setUserId('userId', tokenProvider))
        .catch(console.error);

    // beamsClient.getUserId()
    //    .then(userId => {
    //        console.log(userId);
    //    })
    //    .catch(console.error);

    // beamsClient
    //     .stop()
    //     .catch(console.error);
</script>

Answer 1

PusherPushNotifications.onNotificationReceived 函数应位于 service-worker.js 文件中。然后，您应该会看到预期的控制台日志，并且可以自定义通知和接收行为。