OneSignal React Native Push iOS Universal Linking (avoid WebView) - react-native

Using onesignal, When one sets the push notification value "url" for a notificaiton to open in an app, aka universal linking, by default the app is opened and a webview screen emerges (not on android, only iOS - at least in React Native).
I want to ignore this webview. I don't want to open it. The url is supposed to open the app to the corresponding universal link/deep link, not my domain on a web broswer. If I click on a similar link from a non-notificaiton source, it takes me to the screen, why does the push notification not do this?
How do I override this? I can't seem to figure it out. Do I have to manually implement this? Why does it open a webview by default and not the corresponding screen in the app instead?

It seems you have to manually route it if one were to go this route, unfortunately. From what I'm gathering bits here and there.
this is a bad choice to go with if you're using iOS:
https://www.myapp.com/p/fdsafa
this is better:
myapp://p/fdsafa
unfortunately onesignal has it setup in some weird way with the https://www.myapp.com that it makes it useless on iOS, unless your actual intention is to open an actual web url in a webview. Where as myapp:// is compatible with both platforms (just don't put a host on Android, leave the host out, just do the myapp as the schema). Works.

Related

Share Url from browser to React Native app

I want to share URLs from the browser to my React Native app and open them in the app, how can I do that?
This is called deep-linking, that your app launches and even does some actions depending on the called URL of your app. Many apps use it that's how you probably know it.
You can read about this and implement it.
Here is some articles and documentation about it:
https://reactnavigation.org/docs/deep-linking/
https://medium.com/react-native-training/deep-linking-your-react-native-app-d87c39a1ad5e

Why dynamic links in React Native are opening the browser first?

I'm trying to communicate two React Native apps using Firebase Dynamic Links, only in Android.
When I execute openLink with the URL of the other, I see the browser for a second, and then it opens the other app well.
I don't want to see an intermediate browser before open the other app.
I'm having that issue from app A to B, and viceversa.
So, why is the browser opening first? And how can I configure the apps in order to not open the browser?
it's default behavior of android devices.
usually if any link supported by app and its set default to open link then it will open directly otherwise android system opens browser and based on Link URI scheme navigate to app.
there is one solution,
You can create module (intent activity) which will launch that app directly.
Steps to follow
pass data from js to native module and from that use Intent class, set data and start it.
this was for Android use case.

How do I open https URL from One Signal push-notification WITHIN my WebView react-native app?

I've created a React-native app (tested in android) using WebView with the initial URL of my company's website.
I want the user to be able to get redirected to a spesific website's product page (for example https://www.test.com/product/hoodie-with-zipper/) WHEN they clicked the OneSignal push notification with the intended launch URL included in the sent notification. The problem is, I want the user to open the URL with my WebView App, not the browsers.
The features I've implemented and tested so far:
Implemented and Tested WebView (no problems so far)
Implemented and Tested deeplink locally (with android scheme of 'myapp://', no problems so far)
Implemented OneSignal push notification SDK for react-native and its firebase requirements (no problems so far)
As I've mentioned in the point 2 before, I've tried and successfully implemented the deeplink with the android scheme of 'myapp://'. But, when I tried to implement the android scheme of 'https://', the launch URL from OneSignal push notification got opened with browser instead, not my WebView app.
I want the user to be able to get redirected to a spesific website's product page (for example https://www.test.com/product/hoodie-with-zipper/) WHEN they clicked the OneSignal push notification with the intended launch URL included in the sent notification, but it'll be opened with React-native WebView instead of browser.
^ So, what should I do to achieve that?
Thanks in advances.
You should handle this yourself by passing in the URL via additional data in the notification. Then, in your app you should open a webview to the specified url.The Launch URL feature on the dashboard or the url field on the REST API automatically opens the web browser on the mobile device when the notification is tapped on. If you would like to open the URL inside your app instead of the browser, you need to send your notification with custom data that can read by your app's SDK. If you're using our dashboard to send notifications, the sending notification options allows you to include additional data to be sent with your notification. If you're using our API to send notifications, you can set the 'data' field to a JSON object hash of extra custom data. For example, you could set targetUrl for the key and https://google.com as the value. Then in your app's code read the targetUrl value from additionalData in the NotificationOpened callback (name depends on the OneSignal SDK used).

How to get the URI scheme of any app for AppLinks/universal linking?

I need to open a third-party app from my react native mobile app. I understand that this is called universal linking on iOS and AppLink on Android.
I have done a lot of research for this, and I have been able to set up a link to the third party app on the app store. Now I just need to get my app to open up the app if the user has it installed. That requires the URI scheme of the other app, though.
My question is, how do I get the URI scheme to this third party app? Rather, how do I get the URI scheme of any app? I know the URI scheme of the twitter app is 'twitter://app', but the app I am trying to link to is way more niche than twitter or other popular apps, so there is no help for this sort of thing online.
Any tips?
Finding the URL scheme of an iOS app
Due to Apple's tendency for secrecy, it's not easy to find the URL scheme of an iOS app. But it can be done. Here's how I do it, using a Mac app called iMazing.
Launch iMazing, select a connected iOS device, click Apps:
In the footer of the window, click Manage Apps:
Select the app you're interested in , then select Export .IPA menu item. Note: You may need to download the app first.
The saved file will have the .ipa extension. Change the extension to .zip, and unzip the file. You now have a directory with the name matching the app's name.
Assuming "asana" is the app name, open the file "asana/Payload/asana.app/Info.plist" in a text editor, and search for a section that contains "CFBundleURLSchemes". Assuming the app contains CFBundleURLSchemes (they are optional), it should look something like this:
The URL scheme is in the <string>asana</string>, so the complete url scheme in this case is "asana://". Test that the URL launches the app by typing it into iOS Safari browser window. If it works, Safari should display an alert like this:
What About Apps Without CFBundleURLSchemes?
I haven't found a way to launch apps without CFBundleURLSchemes directly, but you can link to the app's page in the App Store, where the user can open the app with the Open button (or Get button if the app is not installed).
You will need to obtain the app page's URL from the App Store:
Open App Store, go to the app's page, click the share icon:
Click Copy Link:
The URL will look like this:
https://apps.apple.com/us/app/asana-organize-tasks-work/id489969512
Clicking on that link in Safari will bring up the app page in the App Store.
Maybe it is worth to start with some background:
There are various ways to deep link into an app, and it depends on the platform (iOS\Android\WindowsPhone...) and its version.
On iOS, up until version 9, the way to open an app was by using URI schemes, e.g. the one you added above: twitter://app. Each app declares the scheme that should be used. Therefore in order to deep link into the app you wish to open, you'll need to use the scheme that it declared. This is the same for Android until version 6.
Starting iOS9+, Apple introduced Universal Links as the method for deep linking. Here's some information: https://developer.apple.com/ios/universal-links/
In these versions, URI schemes won't longer work when using Safari browser (which is the iOS default browser) if the app is not installed. If the app is installed, however, URI schemes should allow opening the app, if everything is configured successfully. In Android there's a similar method called "AppLinks".
Having said this, the above information is for setting deep link for your app. I do not think that it is a common use case to open a third party app from your app - deep links are configured and used by the app owner (e.g. for publishing his\her app to engage users).

IBM Worklight - How can I display the content a URL refers to, without losing app context?

When writing a Worklight app it is verboten to change the URL of the DOM in which the application is running. This makes sense as a hypertext move to another URL will obliterate the state of the app.
On occasion however, in my app I receive a URL for a news article and the user wishes to read it. Displaying the new content in an iFrame would start to address the requirement, but then I need navigation controls, etc. and it starts to feel like I am reinventing a wheel.
Does Worklight, or one of the mobile JS frameworks provide a "browser in browser" experience that I need here?
Worklight utilizes Cordova. Cordova makes it possible to display just what you wanted, a "browser in a browser" - InAppBrowser.
The InAppBrowser is a web browser view that displays when calling
window.open(), or when opening a link formed as <a target="_blank">.
Try that.
No setup is required as the InAppBrowser plug-in is already part of the Worklight project (this may differ depending on your Worklight version; If you are using 6.x you're OK).
All you need to do is to call up the URL. For example, in yourProject\apps\yourApp\common\main.js:
function wlCommonInit() {
window.open('http://apache.org', '_blank', 'location=yes');
}
Once the app initializes it will open the InAppBrowser:
And once tapping the Done button, you're back in the app.
You can of course not specify the location attribute so the navigation bar won't display. In that case, in order to go back to the app the user will need to tap the Back button: