带有 2 个按钮的渐进式 Web 应用程序的 Android 推送通知？

Posted 2023-02-24

【中文标题】带有 2 个按钮的渐进式 Web 应用程序的 Android 推送通知？

【英文标题】：Android push notifications with 2 buttons for Progressive Web Apps?

【发布时间】：2018-03-27 12:51:36

【问题描述】：

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

【问题讨论】：

@RajeshKushvaha 问题是针对使用 html/CSS/JS 构建的渐进式 Web 应用程序，而不是原生 Android。 PWA 基本上是一个可安装的网站。

【参考方案1】：

是的，这可以通过新的 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>"
        
    

请注意，您需要在 Service Worker 代码中为这些自定义操作注册回调，以处理用户单击自定义按钮时应该发生的任何事情：

服务工作者：

    // 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();
    );