Does anyone have further details on how this would be done to handle multiple devices. I would like to target iPhone, Android, and Windows devices. According to this article, you can use different links. Any thoughts on how 3 different links should be used around on single element?
http://habaneroconsulting.com/insights/opening-native-map-apps-from-the-mobile-browser#.VYg3-flVikp
I usually do this:
var isiOS = (navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone') || navigator.userAgent.match('iPod'));
var isAndroid = navigator.userAgent.match('Android');
var isWP = navigator.userAgent.match('Windows Phone') || navigator.userAgent.match('IEMobile');
if (isiOS){
setTimeout(function () { window.location = siteURL; }, 25); //fall back url
$('body').append('<iframe style="visibility: hidden;" src="'+ appURI +'" />');
} else if ((isAndroid) || (isWP)){
setTimeout(function () { window.location = siteURL; }, 25); //fall back url
window.location = appURI;
} else { // if (isOtherPlatform)
window.location = siteURL;
}
Note that on iOS, you can not determine if user has the map app installed or not. If you navigate to an app which the user has not installed would result in an ugly message complaining the absent of the target app. The workaround is to open that deep link in the iframe.
Also note that you should always redirect users to the web version of maps after some seconds to provide a smooth flow.
Related
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"
]
If a user visits my websites example, from Safari Mobile how could I place there a blank page that says "Add To Homescreen."? Once added it would show different content.
You'll want to check two things. First, is it running on an iOS device? Second, is window.navigator.standalone == true?
window.navigator.standalone is primarily used by Webkit browsers to indicate the app is in fullscreen (or standalone) mode. Plenty of devices (like phones running Android), support this property, but don't have the option to 'Add to Homescreen' like iOS devices do, so you need to check both.
Demo:
Javascript:
function isIOS() {
var userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
};
function isStandalone() {
return ( isIOS() && window.navigator.standalone );
};
window.onload = function () {
if( isStandalone() || !isIOS() ) { //either ios+standalone or not ios
//start app
} else {
//display add to homescreen page
};
};
Check window.navigator.standalone.
Slight slight different code, based on #ThinkingStiff solution, and this other question on this Post, to support IOS7 detection to provide CSS interface to add more padding-top in case of transparent app title.
isIOS7 = function() {
return navigator.userAgent.match(/(iPad|iPhone|iPod touch);.*CPU.*OS 7_\d/i);
};
isStandaloneAndIOS7 = function() {
return isIOS7() && window.navigator.standalone;
};
if (isStandaloneAndIOS7()) {
body = document.getElementsByTagName("body")[0];
body.className = body.className + " standalone";
}
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
}
Good day folks.
I am stuck with a strange problem and after lots of googling I couldn't find the solution/answer
I am creating and Sencha +cordova app for android.
It simply display 10 images in loop.
my code works fine on Chrome browser in desktop.
It fails On android 4.4.2 device when I install as APK.
Please help to fix the code for android.
init: function () {
this.callParent(arguments);
//console.log('init');
if(Ext.os.name == 'Android')
baseurl = baseAndroidUrl;
else
baseurl = baseDesktopUrl;
//alert('baseurl ' + baseurl);
}
var baseurl;
var baseAndroidUrl = 'file:///android_asset/www/resources/resources/images/';
var baseDesktopUrl = '/resources/resources/images/';
var imageArray =
['page00.jpg',
'page01.jpg',
'page02.jpg',
'page03.jpg',
'page04.jpg',
'page05.jpg',
'page06.jpg',
'page07.jpg',
'page08.jpg',
'page09.jpg',
'page10.jpg'];
var counter = 0;
-----------------------------------------------
onPrePageCommand: function () {
console.log('onPrePageCommand');
if( counter === 0 )
return ;
counter--;
// Folloing dynamic updation doesn't work in android , works perfectly on desktop
Ext.getCmp('pageID').setSrc(baseurl+imageArray[counter]);
//Ext.getCmp('pageID ').doLayout();
},
onNextPageCommand: function () {
console.log('onNextPageCommand');
if( counter === imageArray.length-1 )
return ;
counter++;
Ext.getCmp('pageID').setSrc(baseurl+imageArray[counter]);
},
------------------------------------------
//initial view : work perfect for both Desktop browser and APK
{
xtype: 'image',
src:'resources/images/Page00.jpg',
id:'pageID',
mode:'image'
height:'100%',
width:'100%'
}
--------------------------------------------
Try to use a Framework for that like http://wowslider.com/ this worked great for me the last time. You can also scroll the images with your fingers (swipe them).