A secondary window unexpectedly pops up on clicking notification (via OneSignal) in iOS

Question

Does anyone here have experience integrating push notifications on iOS on OneSignal with mobile apps built using Expo?

I have an app which opens a WebView and this WebView handles all the navigation (i.e. no app routes, instead web routes). The issue is that upon clicking a notification from OneSignal containing a launchURL (a web URL which is supposed to open in the WebView inside the app which I have handled programmatically), a bottom sheet (with a button "Done" on top-right) opens up instead. You can view the video of the issue here.

My app.json:

{
  "expo": {
    "name": "Engage | Dev",
    "scheme": "fudrengage",
    "slug": "fudr-engage-app",
    "version": "1.0.14",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "https://assets.fudr.in/assets/images/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#EB9658"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "in.fudr.devengage",
      "associatedDomains": ["applinks:devengage.fudr.in"]
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "in.fudr.devengage",
      "intentFilters": [
        {
          "action": "VIEW",
          "autoVerify": true,
          "data": [
            {
              "scheme": "https",
              "host": "devengage.fudr.in",
              "pathPrefix": "/*"
            }
          ],
          "category": [
            "BROWSABLE",
            "DEFAULT"
          ]
        }
      ]
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      [
        "onesignal-expo-plugin",
        {
          "mode": "development",
          "devTeam": "XXXXXX"
        }
      ],
      ["./plugins/withAndroidVerifiedLinksWorkaround"]
    ],
    "notification": {
      "icon": "./assets/notification-icon.png",
      "color": "#EB9658",
      "androidMode": "default",
      "androidCollapsedTitle": "Updates from Fudr",
      "iosDisplayInForeground": true
    },
    "extra": {
      "eas": {
        "build": {
          "experimental": {
            "ios": {
              "appExtensions": [
                {
                  "targetName": "OneSignalNotificationServiceExtension",
                  "bundleIdentifier": "in.fudr.devengage.OneSignalNotificationServiceExtension",
                  "entitlements": {
                    "com.apple.security.application-groups": [
                      "group.in.fudr.devengage.onesignal"
                    ]
                  }
                }
              ]
            }
          }
        },
        "projectId": "xxxxxx"
      }
    }
  }
}

Testing environment:

1. "react-native-onesignal": "4.4.1"
2. "onesignal-expo-plugin": "1.1.1"
3. "expo": "46.0.7"
4. iOS 16
5. "react-native": "0.69.5"

Answer 1

As per the OneSignal docs here, the launchURLs that trigger the browser in iOS as well as Android, can be suppressed by adding "OneSignal_suppress_launch_urls": true in the infoPlist key the ios section config in app.json

"ios": {
  "supportsTablet": true,
  "bundleIdentifier": "com.example.sub",
  "associatedDomains": ["applinks:sub.example.com"],
  "infoPlist": {
    "OneSignal_suppress_launch_urls": true
  }
},

My App.js was already handling launchURLs inside the WebView as shown below:

export default App = () => {
  OneSignal.setAppId("xxxxxx");

  const webviewRef = useRef(null);
  const [webviewSourceURL, setWebviewSourceURL] = useState("");

  useEffect(() => {
        // Method for handling notifications opened
    OneSignal.setNotificationOpenedHandler((notification) => {
      const notificationId = notification?.notification?.notificationId ?? "";
      const notificationLaunchUrl = notification?.notification?.launchURL;

      const launchURL =
        notificationId && notificationLaunchUrl
          ? `${notificationLaunchUrl}?notificationId=${notificationId}` // Append notificationId as a query parameter to generate a unique URL everytime a new notification is opened; this helps WebView know that it's a new visit
          : "";

      if (notificationId && launchURL) {
        setWebviewSourceURL(launchURL);
      }
    });
  }, []);

  return() {
    <WebView
        ref={webviewRef}
        originWhitelist={["*"]}
        source={{
          uri: webviewSourceURL || FALLBACK_URL,
        }}
        style={{ marginTop: 20, marginBottom: 5 }}
        startInLoadingState={true}
        renderLoading={LoadingIndicatorView}
        onMessage={onMessage}
      />
  }
}