I have this ionic app where I put code to open the browser and go to app store or google play, depending on OS.
The call to App Store works. The string for app store is:
market = 'https://itunes.apple.com/us/app/my_app_name/id12345';
while for android is:
market = 'market://details?id=<package_name>';
The code to open the browser is:
cordova.InAppBrowser.open(market, '_blank', 'location=yes');
When I try to open in android, some kind of browser opens and displays the message:
"Web page not available. The webpage at market://details?id=my_app_id might be temporarly down ..."
Before this, the string for google play was the one you normally use in a browser, which is:
http://play.google.com/store/apps/details?id=<package_name>
In that case the message was about the broser not supporting the call to google play. It asked if I wanted to download google play app.
I guess the right way is to use the "market"-prefix? But still dont understand why its not showing the app.
Ok, so I looked into 'cordova-plugin-market' source code for ios. This is how the url to appstore is built:
NSString *url = [NSString stringWithFormat:#"itms-apps://itunes.apple.com/app/%#", appId];
And this is how url looks if you want to navigate from PC browser:
https://itunes.apple.com/app/id333903271 (twitter for example)
So if you use this plugin for Ios, consider adding 'id' prefix, and instead of using bundle Id (package name) use Apple ID of your app. For android of course com.example.package will be enough
let appId;
if (this.platform.is("android")) {
appId = "com.example.package"
} else {
appId = "id1234567"
}
this.market.open(appId).then(response => {
console.debug(response);
}).catch(error => {
console.warn(error);
});
}
I added
cordova plugin add https://github.com/xmartlabs/cordova-plugin-market
And then it worked.
import { InAppBrowserOptions, InAppBrowser } from '#ionic-native/in-app-browser';
import { Market } from "#ionic-native/market";
import { Platform } from "ionic-angular";
constructor(private market:Market, private inappBrowswer:InAppBrowser,
private platform:Platform)
{
this.onUpdateNow();//Call the update function
}
onUpdateNow() {
this.platform.ready().then(() => {
if (this.platform.is("ios")) {
//replace '310633997' with your iOS App ID
this.openInAppStore('itms-apps://itunes.apple.com/app/310633997'); //call the openInAppStore
} else if (this.platform.is("android")) {
//replace 'com.whatsapp.saint' with your Android App ID
this.market.open("com.whatsapp.saint").then(response => {
console.log(response);
}).catch(error => {
console.log(error);
});
}
});
}
openInAppStore(link) {
let options: InAppBrowserOptions = {
location: 'yes',//Or 'no'
};
let target = "_blank";
this.inappBrowswer.create(link, target, options);
}
I tried the plugin with capacitor and its working like a charm using the package name and the app id (for android and ios accordingly):
public goToStore() {
const appId = 1234512345;
const packageName = 'com.test.app';
Capacitor.getPlatform() === 'android' ? this.market.open(packageName) : this.market.open(appId);
}
The plugins:
"#ionic-native/market": "5.36.0",
"cordova-plugin-market": "1.2.0",
Related
I have a simple string "twist" being passed on from the backend which is not a urlimage of simulator
My code for linking is as follows
console.log(url);
let linkOpened = false;
Linking.canOpenURL(url).then((canOpen) => {
console.log("canOpen : ", canOpen);
if (canOpen) {
Linking.openURL(url);
linkOpened = true;
} else {
console.log("i am calling");
}
});
As we can see "twist" is a string and not a URL which cannot be opened.
The same code on android emulator returns false which is the correct result but true on IOS which is incorrect
IOS Watchman Output
None of the answers on github/stackoverflow/apple dev forums work for me
I have also added this in my info.plist
<key>LSApplicationQueriesSchemes</key>
<array>
<string>twist</string>
<string>nothing</string>
</array>
Running on
XCODE 14
Node 165.13.0
Kindly assist me. :)
Linking on backend using
https://developer.apple.com/documentation/uikit/uiapplication/1622952-canopenurl
It is directly linking ios nsurl TO javascript string which is causing error
for now use following code and wait for there update
const url = 'twist:';
console.log(url);
let linkOpened = false;
if (url.search(':') != -1) {
console.log('url', url.search(':'));
try {
linkOpened = await Linking.canOpenURL(url);
} catch (error) {}
}
console.log('linkOpened', linkOpened);
I am using firebase dynamic link in my react native mobile application, everything is working well as I want.
One thing I am not able to implement that is, I have created one HTML preview page to show preview on other social media. I have set fallback url for iOS, android. when I share that link it works well in android and iOS , when user not installed app then it redirect to my website page. But in computer when I hit that it not redirect me to my website page it open only preview page which I am passing in link parameter.
If I am use
otherPlatform:{
fallbackUrl:DEEPLINK_FALLBACK
}
Then it works but the preview not show the by default preview is showing of fallbackUrl url of OtherPlatform.
This is the complete code I am using to generate dynamic link in my react native app.
const buildVideoLink = async () => {
try {
const activityId = selectedPozzle?.activityId ? selectedPozzle?.activityId : ""
const pozzleId = selectedPozzle?.pozzleId ? selectedPozzle?.pozzleId : ""
const conentLink = FEED_PREVIEW_URL + pozzleId + "/preview/"
const link = await dynamicLinks().buildShortLink({
link: conentLink + "?activityId="+activityId+"&pozzleId=" + pozzleId,
domainUriPrefix: DEEPLINK_DOMAIN,
otherPlatform:{
fallbackUrl:DEEPLINK_FALLBACK
},
android: {
packageName: ANDROID_PACKAGE,
fallbackUrl:DEEPLINK_FALLBACK,
},
ios: {
appStoreId: '12345678',
bundleId: IOS_BUNDLE,
fallbackUrl:DEEPLINK_FALLBACK,
}
}
);
console.log("Pozzle_share_link........", link)
return link;
}
catch (error) {
}
}
I am currently working on a project on Android using the Expo client for react native. I am trying to open a webpage using WebBrowser, passing my app development URI to the website. The website basically just redirects to the given URI after 5 seconds. However it never seems to open anything. I've used almost the exact same code as here: https://github.com/expo/examples/tree/master/with-webbrowser-redirect. When I load this project into expo and run, it redirects fine. However, when I copy the code for the website and app into my own project, website opens and displays, but redirect does nothing. It just stays there. Here is the code for opening the browser.
_openBrowserAsync = async () => {
try {
this._addLinkingListener();
let result = await WebBrowser.openBrowserAsync(
'https://wexley-auth.firebaseapp.com/?linkingUri=exp://192.168.1.2:19000'
);
this._removeLinkingListener();
this.setState({ result });
} catch (error) {
alert(error);
console.log(error);
}
};
The linking listener never fires the callback which should dismiss the browser. My app URI should be exp://192.168.1.2:19000 as expo developer tools shows me this when I connect over LAN. Ive also tried using Linking.makeUrl() instead of sending URI in string manually. Neither method works for me. Relevant website code:
document.addEventListener("DOMContentLoaded", function(event) {
var links = document.querySelectorAll('a');
var baseUri='';
// Take the uri from the params
var qs = decodeURIComponent(document.location.search);
if (qs) {
baseUri = qs.split('?linkingUri=')[1];
}
var redirectInterval = setInterval(function() {
var countdown = document.querySelector('.countdown');
var t = parseInt(countdown.innerText, 10);
t -= 1;
if (t === 0) {
clearInterval(redirectInterval);
window.location.href = baseUri;
}
}, 1000);
});
Am I missing a step? Do I need to setup a scheme for opening my app or should this work out of the box? Am I using the wrong URI? I noticed that in the example code, the app.json has the following fields that my app.json doesn't have:
"scheme": "expo.examples.with-webbrowser-redirect",
"platforms": [
"android",
"ios"
]
I am trying to create a login module from the tutorial and will be using the login user id as target in my next step :sent_EventBased_Push_notification
https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/7.1/authentication-security/adapter-based-authentication/adapter-based-authentication-native-android-applications/
Done no changes just downloaded those sample project from github and run then in mfp and android studio as it is.And they did work wonderfully.
But in mobilefirst console though I saw the the device got registered there is no user id against it..What I mean is I am using a nexus4 to login and login id s 'my-phn-no'.So user Id should be 'my-phn-no'.
below I am pasting my AuthAdapter-impl.js [same as eg.]
function onAuthRequired(headers, errorMessage){
errorMessage = errorMessage ? errorMessage : null;
return {
authStatus: "credentialsRequired",
errorMessage: errorMessage
};
}
function submitAuthentication(username, password){
if (username==="8907870678" && password === "password"){
var userIdentity = {
userId: username,
displayName: username,
attributes: {
foo: "bar"
}
};
//WL.Server.sendMessage("Hello", "hi,gd mg")
WL.Server.setActiveUser("AuthRealm", userIdentity);
return {
authStatus: "complete"
};
}
return onAuthRequired(null, "Invalid login credentials");
}
function getSecretData(){
return {
secretData: "12345 changed for trial"
};
}
function onLogout(){
WL.Logger.debug("Logged out");
}
Can you please point out the part I am missing/how do I implement it. Thank you in advance.
I tried the same code in SIT environment where it have the actual product installed MFP 7.1 . It worked perfectly .
I guess there is some thing going wrong in my eclipse plugin.
I develop apps for Android/iOS using Cordova/Phonegap. I generally use a single code base for my web and mobile content. I use a SQLite database and/or other native plugins when it is a mobile app and have to avoid those LOCs when I'm on web.
But I'm facing a problem identifying whether my app is being run on a web browser on Desktop/Mac/Android/iOS or as a mobile app (Android/iOS).
I have tried userAgent sniffing, but this regex technique fails especially when running the code on mobile browsers. Following is the code I used to identify OS and version of the device:
getOSAndVersion: function() {
var that = this;
var userOS; // will either be iOS, Android or unknown
var userOSver; // this is a string, used to denote OS version
var ua = navigator.userAgent;
var uaindex;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua)) {
window.deviceType = "Mobile";
} else {
window.deviceType = "Web";
}
// determine OS
if (ua.match(/iPad/i) || ua.match(/iPhone/i)) {
userOS = 'iOS';
uaindex = ua.indexOf('OS ');
}
else if (ua.match(/Android/i)) {
userOS = 'Android';
uaindex = ua.indexOf('Android ');
}
else {
userOS = 'unknown';
}
// determine version
if (userOS === 'iOS' && uaindex > -1) {
userOSver = ua.substr(uaindex + 3, 3).replace('_', '.');
}
else if (userOS === 'Android' && uaindex > -1) {
userOSver = ua.substr(uaindex + 8, 3);
}
else {
userOSver = 'unknown';
}
return { osVersion: userOSver, os: userOS, deviceType: window.deviceType };
}
Is there any other technique I can use to reliably identify where my code is being run?
P.S. : I'm averse to using any other Cordova/JS plugin to identify it but still open for discussion.
In Cordova when app is runing into app the url is prefixed by file:// and when running in mobile browser the url is prefixed with http or https protocal.
Solution :
Get url of you current page (check this)
Identify its prefix if file:// the its app
If http or https then mobile browser
You could just check if cordova is defined?
if (cordova) {
// Running in your app
} else {
// Not running in your app, so website
}