Ionic 3中OneSignal推送通知大图不显示问题咨询

云原生阿岚

2026-5-27

嘿，我来帮你梳理下OneSignal在Ionic里推送大图不显示的问题，大概率是几个配置或者推送参数的细节没做好，咱们一步步来排查：

一、先确认推送负载里的大图参数是否正确

OneSignal的大图推送，不同平台需要对应不同的字段，别搞混了：

Android平台：要在推送的「Additional Data」里添加big_picture字段，值填你上传的图片URL（必须是公开可访问的HTTPS链接，OneSignal媒体库的图片复制过来就行）。比如：
```
{"big_picture": "https://your-public-image-url.jpg"}
```
iOS平台：iOS需要用ios_attachments字段，格式是键值对，键可以随便命名（比如main_image），值是图片URL：
```
{"ios_attachments": {"main_image": "https://your-public-image-url.jpg"}}
```
顺带提一句，iOS对图片要求更严：必须是HTTPS，尺寸建议1024x512像素，格式用JPG/PNG。

二、检查Ionic的OneSignal插件配置

首先确保你用的是最新版插件，旧版本可能不支持大图功能，更新命令走一波：

ionic cordova plugin update onesignal-cordova-plugin
npm update @ionic-native/onesignal

另外Android端要注意：如果你们自定义了通知样式，得保证通知通道的重要性至少是IMPORTANCE_HIGH，不然可能没法触发展开式通知显示大图（不过OneSignal插件一般会自动配置，这点可以先排查）。

三、验证图片的可访问性

别忽略这个基础点！你上传的图片必须能直接在浏览器打开，要是需要权限或者是本地路径，肯定加载不出来。复制图片URL到浏览器里试试，确认能正常显示再继续。

四、iOS端必做：配置Notification Service Extension

这是iOS大图显示的关键！没开这个扩展，iOS绝对不会显示大图，步骤如下：

用Xcode打开Ionic项目的iOS工程（路径是platforms/ios/你的项目名.xcworkspace）。
顶部菜单栏点「File」→「New」→「Target」，选「Notification Service Extension」，点「Next」。
填个扩展名称（比如NotificationService），选好开发团队，点「Finish」，弹出是否激活方案的提示选「Cancel」就行。

打开扩展的NotificationService.swift文件，确保代码是OneSignal推荐的处理逻辑（插件一般会自动注入，要是手动改了就核对下）：

import UserNotifications
import OneSignal

class NotificationService: UNNotificationServiceExtension {

    var contentHandler: ((UNNotificationContent) -> Void)?
    var bestAttemptContent: UNMutableNotificationContent?

    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.contentHandler = contentHandler
        bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
        
        if let bestAttemptContent = bestAttemptContent {
            OneSignal.didReceiveNotificationExtensionRequest(request, with: bestAttemptContent, withContentHandler: contentHandler)
        }
    }
    
    override func serviceExtensionTimeWillExpire() {
        if let contentHandler = contentHandler, let bestAttemptContent =  bestAttemptContent {
            OneSignal.serviceExtensionTimeWillExpireRequest(bestAttemptContent, withContentHandler: contentHandler)
        }
    }
}

确认扩展的部署目标和主App一致，避免版本不兼容的问题。

五、分场景测试验证

先测Android端，配置简单，确认大图能显示后再排查iOS。
分别测试前台和后台接收通知：有些设备前台收通知时不会自动展开大图，需要手动下拉通知才能看到。

要是做完这些还是不行，可以去OneSignal控制台看推送记录，核对payload是否正确发送；或者在Ionic app里监听通知接收事件，打印出收到的payload，确认大图字段有没有被正确传递。

内容的提问来源于stack exchange，提问作者Theodorus Agum Gumilang