我可以在哪里更改 FCM 网络通知点击操作网址？

问题描述

我试图定义当用户点击通知时打开的 url，但它继续转到 url('/') 只要 。我发送了带有 payload.data 的新 url，但我不知道我可以在客户端的何处定义此路由，以便在用户单击通知时打开它。

我使用 laravel-notification-channels/fcm

/**
 * @param Model $notifiable
 * @return FcmMessage
 */
final public function toFcm(Model $notifiable): FcmMessage
{
    return FcmMessage::create()
        ->setData(array_merge(['type' => $this->fcmNotification->type],$this->fcmNotification->data)
        )->setNotification(\NotificationChannels\Fcm\Resources\Notification::create()
            ->setTitle($this->fcmNotification->title)
            ->setBody($this->fcmNotification->body)
            ->setimage($this->fcmNotification->image)

        ) ->setAndroid(
            AndroidConfig::create()
                ->setFcmOptions(AndroidFcmOptions::create()->setAnalyticslabel('analytics'))
                ->setNotification(AndroidNotification::create()->setColor('#0A0A0A'))
        )->setApns(
            ApnsConfig::create()->setFcmOptions(ApnsFcmOptions::create()->setAnalyticslabel('analytics_ios')));
}

#################### firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/7.23.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/7.23.0/firebase-messaging.js');

/*

firebase.initializeApp({
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",projectId: "xxxxxxxxxxxxxxxx",storageBucket: "xxxxxxxxxxxxxxxxxx",messagingSenderId: "xxxxxxxxxxxxxxxxxxxxx",appId: "x",xxxxxxxxxxxxxxxxxxxxxxxxx
    measurementId: "xxxxxxxxxxxxxxxx"
});

 
const messaging = firebase.messaging();



messaging.setBackgroundMessageHandler(function(payload) {
    console.log(
        "[firebase-messaging-sw.js] Received background message ",payload,);
    /* Customize notification here */
    const notificationTitle = "Background Message Title";
    const notificationoptions = {
        body: "Background Message body.",icon: "/itwonders-web-logo.png",};

    return self.registration.showNotification(
        notificationTitle,notificationoptions,);
});

#################### 主布局

 $(document).ready(function () {
        const firebaseConfig = {
            apiKey: "xxxxxxxxxxxxx",authDomain: "x",xxxxxxxxxxxxxxxxxxxx
            projectId: "xxxxxxxxxxxxxxxxxxxx",storageBucket: "xxxxxxxxxxxxxxxxxxxx",messagingSenderId: "xxxxxxxxxxxxxxxxxxxx",appId: "xxxxxxxxxxxxxxxxxxxx",measurementId: "xxxxxxxxxxxxxxxxxxxx"
        };
        firebase.initializeApp(firebaseConfig);

        const messaging = firebase.messaging();

        function initFirebaseMessagingRegistration() {
            messaging
                .requestPermission()
                .then(function () {
                    return messaging.getToken()
                })
                .then(function (token) {
                    // console.log(token);

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('Meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        url: '{{ theme_route('save.fcm.token')}}',type: 'POST',data: {
                            token: token
                        },dataType: 'JSON',success: function (response) {
                            console.log('Token saved successfully.');
                        },error: function (err) {
                            console.log('User Token Error' + err);
                        },});

                }).catch(function (err) {
                console.log('User Chat Token Error' + err);
            });
        } initFirebaseMessagingRegistration();

        messaging.onMessage(function (payload) {
            const noteTitle = payload.notification.title;

            console.log(payload.data);

             const noteOptions = {
                body: payload.notification.body,icon:"{{website()->logo}}",image: payload.notification.image,};
            new Notification(noteTitle,noteOptions);

            self.addEventListener('notificationclick',function(event) {
                event.notification.close();
                console.log('test click event');
                event.waitUntil(self.clients.openWindow('#'));
            });
        });
    });```

解决方法

我想我应该寻找“ PushEvent ”：我使用这两个侦听器来处理用户对 FCM 网络推送通知的点击，在您的服务工作者 firebase-messaging-sw.js 中放置以下内容 两个侦听器（当然根据您的数据更改它们）：

self.addEventListener("push",(event) => {
    console.log(event);
    let response = event.data && event.data.text();
    let title = JSON.parse(response).notification.title;
    let body = JSON.parse(response).notification.body;
    let icon = JSON.parse(response).notification.image;
    let image = JSON.parse(response).notification.image;

    event.waitUntil(
        self.registration.showNotification(title,{ body,icon,image,data: { url: JSON.parse(response).data.url } })
    )
});

self.addEventListener('notificationclick',function(event) {
    event.notification.close();
    event.waitUntil(
        clients.openWindow(event.notification.data.url)
    );
});