Images not showing on iOS Notifications

[dochonglo]

Description:

Hey everyone!! :)

I'm experiencing an issue where images stored in Firestore cloud storage are not being shown on push notifications. I correctly installed the OneSignalNotificationServiceExtension for my ejected Expo project. I'm not using the onesignal-expo-plugin because it was not available about a year and a half ago when we ejected from Expo to integrate OneSignal.

I can successfully send push notifications to test phones using Firebase Cloud Functions and from the OneSignal dashboard.

Currently, I'm running "react-native-onesignal": "^4.3.8" and the iOS deployment target for my Podfile, Xcode project, and OneSignalNotificationExtension are each iOS 13.

Whether it's an image stored in Firebase or a URL that ends in .jpg or .png like the following: https://cdn.pixabay.com/photo/2018/01/21/01/46/architecture-3095716_960_720.jpg, we're having no luck.

I searched through previous issues, both open and closed, and none have helped to resolve the issue.

Here's how I'm sending the notifications in my Cloud Function. (I'm following the example from OneSignal's documentation: https://documentation.onesignal.com/docs/firebase)

// ==========================================================================
//
// Cloud Functions File
//
// ==========================================================================

exports.sendNotificationFromOS = functions.https.onCall(
  async (data, context) => {
    const sendNotification = (data) => {
      const headers = {
        "Content-Type": "application/json",
        Authorization: "Basic [Redacted]",
      };

      const options = {
        host: "onesignal.com",
        port: 443,
        path: "/api/v1/notifications",
        method: "POST",
        headers: headers,
      };

      const https = require("https");
      const req = https.request(options, (res) => {
        console.log("(Cloud Function) StatusCode = ", res.statusCode);
        console.log("(Cloud Function) Headers = ", res.headers);
        res.on("data", (data) => {
          console.log("(Cloud Function) Response = " + JSON.stringify(data));
        });
      });

      req.on("error", (error) => {
        console.log("(Cloud Function) Error = " + error);
      });

      req.write(JSON.stringify(data));
      req.end();
    };

    const message = {
      app_id: [Redacted],
      contents: { en: data.contents },
      data: {
        postImageUrl: data.postImageUrl,
        imageUrl:
          "https://cdn.pixabay.com/photo/2018/01/21/01/46/architecture-3095716_960_720.jpg ",
      },

      channel_for_external_user_ids: "push",
      include_external_user_ids: [.....],
      ios_attachments: {
        id1: "https://cdn.pixabay.com/photo/2018/01/21/01/46/architecture-3095716_960_720.jpg",
      },
      big_picture:
        "https://cdn.pixabay.com/photo/2018/01/21/01/46/architecture-3095716_960_720.jpg ",
      ios_badgeType: "Increase",
      ios_badgeCount: 1,
    };

    return sendNotification(message);
  }
);

// ==========================================================================
//
// Calling the Cloud Function on the client side
//
// ==========================================================================

        let data = {
          contents: "Just enjoying the outdoors.",
          postImageUrl:
         "https://firebasestorage.googleapis.com/v0/b/xxxxx.com/o/groups%2FSJFkDkyjyB2FS0XHFOxL%2Factivities%2F0.c3hz8dblovc?alt=media&token=xxxxxxx",
        };

        cloudFunctions()
          .httpsCallable("sendNotificationFromOS")(data)
          .then((response) => {
            console.log(
              "Successfully sent push notification."
            );
          })
          .catch((error) => {
            console.log(
              "Error sending push notification."
            );
          });

These are the current versions of OneSignal in my package.json:

"onesignal-expo-plugin": "^1.0.2", "react-native-onesignal": "^4.3.8",

Here's the Podfile where the extension is outside the main target (but at the same level as the main target):

target 'OneSignalNotificationServiceExtension' do
  pod 'OneSignalXCFramework', '>= 3.0', '< 4.0'
end

Here's the OneSignalNotificationServiceExtension installed in Xcode:

Steps to Reproduce Issue:

1. Install the OneSignal SDK using yarn into your project
2. Follow the installation guide for the React Native & Expo SDK Setup: https://documentation.onesignal.com/docs/react-native-sdk-setup
3. Attempt to receive a push notification with an image

I can successfully receive text notifications that are being sent to my physical device using the Firebase Cloud Functions (when in both development and production mode). I can also use the OneSignal dashboard to send notifications. However, when I attempt to send a photo either through the dashboard (url or uploading one) or through Firebase Cloud Functions (using a URL), only the text notifications are sent.

I'm sure this could be a common issue for people using Firebase and OneSignal.

What could be the issue here and I'd appreciate any help and thanks in advance!

[jkasten2]

This thread is a continuation of the conversions from https://github.com/OneSignal/react-native-onesignal/issues/979#issuecomment-1115605827.

@ismaelbarry From what was found from above it seems the NSE is not running or is possibly crashing. Need to know what was found after following the troubleshooting guide to get more details: https://documentation.onesignal.com/docs/service-extensions#troubleshooting-the-ios-notification-service-extension

[kesheshyan]

Is this still a problem?

[dochonglo]

Is this still a problem?

It is not. It's been resolved! in https://github.com/OneSignal/react-native-onesignal/issues/979#issuecomment-1115605827