用于Progressive Web Apps的2个按钮的Android推送通知?

问题描述 投票:0回答:1

我正在使用Firebase云消息传递(FCM)后端构建一个可离线/可安装的渐进式Web应用程序(PWA)。是否可以为已安装的PWA生成带有2个按钮的Android推送通知?这是一个例子:enter image description here

android firebase push-notification firebase-cloud-messaging progressive-web-apps
1个回答
2
投票

是的,这可以通过新的FCM REST API实现:

https://firebase.googleblog.com/2018/05/web-notifications-api-support-now.html

有效负载示例:

    {
        "message": {
            "webpush": {
                "notification": {
                    "title": "Fish Photos 🐟",
                    "body":
                        "Thanks for signing up for Fish Photos! You now will receive fun daily photos of fish!",
                    "icon": "firebase-logo.png",
                    "image": "guppies.jpg",
                    "data": {
                        "notificationType": "fishPhoto",
                        "photoId": "123456"
                    },
                    "click_action": "https://example.com/fish_photos",
                    "actions": [
                        {
                            "title": "Like",
                            "action": "like",
                            "icon": "icons/heart.png"
                        },
                        {
                            "title": "Unsubscribe",
                            "action": "unsubscribe",
                            "icon": "icons/cross.png"
                        }
                    ]
                }
            },
            "token": "<APP_INSTANCE_REGISTRATION_TOKEN>"
        }
    }

请注意,您需要在服务工作者代码中注册这些自定义操作的回调,以处理用户单击自定义按钮时应发生的任何事情:

服务人员:

    // Retrieve an instance of Firebase Messaging so that it can handle background messages.
    const messaging = firebase.messaging();

    // Add an event listener to handle notification clicks
    self.addEventListener('notificationclick', function(event) {
         if (event.action === 'like') {
                 // Like button was clicked

                 const photoId = event.notification.data.photoId;
                 like(photoId);
         }
         else if (event.action === 'unsubscribe') {
                 // Unsubscribe button was clicked

                 const notificationType = event.notification.data.notificationType;
                 unsubscribe(notificationType);
         }

         event.notification.close();
    });
© www.soinside.com 2019 - 2024. All rights reserved.