A secondary window unexpectedly pops up on clicking notification (via OneSignal) in iOS - 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:
"react-native-onesignal": "4.4.1"
"onesignal-expo-plugin": "1.1.1"
"expo": "46.0.7"
iOS 16
"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}
/>
}
}