I already created a web-view android app from my website.
I added Web Share API code to my website to load share button on android browser (It works fine) but when I visit my website through the android app, share button doesn't work (Nothing happens when I press the button).
Any idea to solve the problem? Is it possible?
Web Share API Code
<button id="btn-share">Share</button>
<script>
window.addEventListener('load', function() {
if(!navigator.share) {
document.querySelector('.share-container').innerHTML = 'Web Share API not supported in this browser';
return;
}
document.getElementById('btn-share').addEventListener('click', function() {
navigator.share({
title: 'Check out this web share API demo',
text: 'Its really cool',
url: 'https://mobiforge.github.io/web-share-api.html',
});
});
});
</script>
Navigator.share API not supports in WebView. You can use it only in mobile browsers except Firefox.
Web share is not yet support for browser but you can use fall back method.
if (navigator.share) {
navigator.share({
title: 'harish tech',
text: 'Check out harishtech.com.',
url: 'https://harishtech.com', })
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
}else{
// Your fall back code here
}
For more info check out the link share like native app
Related
I want to create a dynamic link which will redirect to different places base on mobile's OS is Android or iOS, here is my code:
const link = await firebase.dynamicLinks().buildShortLink({
link: `https://play.google.com/store/apps/details?id=me.finan.app`,
domainUriPrefix: 'https://finandev.page.link/',
android: {
fallbackUrl: 'https://play.google.com/store/apps/details?id=me.finan.app',
packageName: 'me.finan.app',
},
ios: {
fallbackUrl: 'https://apps.apple.com/vn/app/s%E1%BB%95-b%C3%A1n-h%C3%A0ng/id1560099589',
bundleId: 'me.finan.app',
},
})
It always goes to CH Play, how can I make it go to Play Store if the current mobile opening the link is iPhone?
I am building an app using react-native. I am using react native's Linking API to open my website link in the metamask app installed on my phone. The Linking.opneURl(url) works fine if metamask app is installed on the device. The problem is that if Metamask is not installed on the device it opens the link in the browser.
What I want to do is to apply a check that if the Metamsk app is not installed on the device the user will be asked to install the app otherwise it should open normally in the metamask app. So far I have used the linking API and the react-native-check-app but I didn't get the result I wanted.
Please refer to this section in the official documentation. Extracted from the documentation:
Determine whether or not an installed app can handle a given URL. The method returns a Promise object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.
You then could go on to practical usage like this:
const isInstalled = await Linking.canOpenURL("yourUrl");
You need to open your link from mobile application through metamask mobile application browser. The way we know for now you can linking url to metamask with Linking which is built-in feature react native. After click button then choice of metamask will open metamask-auth.ilamanov.repl.co as http://metamask-auth.ilamanov.repl.co at metamask browser. After click connect wallet you can choose metamask mobile application and after browsing it self your dApp link it can auth with metamask.
import React, { useCallback } from "react";
import { Alert, Button, Linking, StyleSheet, View } from "react-native";
const yourDappLink = "metamask-auth.ilamanov.repl.co" // change or create yourself
const supportedURL = "https://metamask.app.link/dapp/"+yourDappLink;
const OpenURLButton = ({ url, children }) => {
const handlePress = useCallback(async () => {
// Checking if the link is supported for links with custom URL scheme.
const supported = await Linking.canOpenURL(url);
if (supported) {
// Opening the link with some app, if the URL scheme is "http" the web link should be opened
// by some browser in the mobile
await Linking.openURL(url);
} else {
Alert.alert(`Don't know how to open this URL: ${url}`);
}
}, [url]);
return <Button title={children} onPress={handlePress} />;
};
const App = () => {
return (
<View style={styles.container}>
<OpenURLButton url={supportedURL}>Connect Wallet</OpenURLButton>
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: "center", alignItems: "center" },
});
export default App;
I'm creating a simple webview app using nativescript-vue where there is nothing else in the app except the webview that loads a website fullscreen.
On iOS it works great, I can log in to the website turn the app off and on and I'm still logged in.
On Android, the cookies are not saved and you have to log in again every time you turn the app off.
Any way I can enable cookies in the webview for Android?
I couldn't make it work with cookies, so I had to switch and use localstorage as a backup for saving tokens instead of cookies.
Here is how my final version looks:
<template>
<Page>
<WebView #loadStarted="onLoadStarted"
#loaded="onWebViewLoaded"
src="https://yoururl.com/"
/>
</Page>
</template>
<script>
import { isAndroid } from "tns-core-modules/platform"
export default {
methods: {
onLoadStarted (webargs) {
if (isAndroid) {
const webView = webargs.object;
webView.android.getSettings().setDomStorageEnabled(true) // This will enable local storage
}
},
onWebViewLoaded(webargs) { // I use this only to disable the default zoom buttons
if (isAndroid) {
const webView = webargs.object;
webView.android.getSettings().setDisplayZoomControls(false)
webView.android.getSettings().setBuiltInZoomControls(false)
}
},
}
};
</script>
Apparently, you should be able to enable cookies doing this (at least for newer SDK users):
webView.on(WebView.loadStartedEvent, (args) => {
webView.android.getSettings().setAcceptThirdPartyCookies(webView, true)
});
But that didn't work as expected as it seemed like sometimes it would save cookies and sometimes it won't or sometimes it would remove cookies (when you log out) and sometimes not.
I hope this info helps someone as it sure seems there is little to none info about this especially if you aren't much familiar with pure Java Android development.
This code should work
const webView = webargs.object;
if (android.os.Build.VERSION.SDK_INT >= 21) {
android.webkit.CookieManager.getInstance().setAcceptThirdPartyCookies(webView.android, true);
}
I'd like for users to be able to share a link (e.g. app.com/SKFLA - this is primarily because deep links on their own aren't clickable) via Facebook etc. When clicked, this redirects to a deep link app://SKFLA. If the app is installed, this opens the app - this is all working fine so far. But if the app isn't installed, I'd like to open the app store on the relevant page. Is this achievable? Thanks!
You need UNIVERSAL LINKS
Please check
IOS https://developer.apple.com/library/archive/documentation/General/Conceptual/AppSearch/UniversalLinks.html
Android
https://developer.android.com/training/app-links/
It might also require some extra server-side setup.
Not sure about native behavior.
We used third-party service like https://branch.io/deepviews/.
There is a bunch of similar services.
If someone is still stuck in this issue and needs easiest solution, you will love node-deeplink
1.) If app is installed: Calling an app through deep linking will always call componentDidMount of root component. So you can attach a listener there. Like:
Linking.getInitialURL()
.then(url => {
if (url) {
this.handleOpenURL({ url });
}
})
.catch(console.error);
Linking.addEventListener('url', this.handleOpenURL);
handleOpenURL(event) {
if (event) {
console.log('event = ', event);
const url = event.url;
const route = url.replace(/.*?:\/\//g, '');
console.log('route = ', route);
if(route.match(/\/([^\/]+)\/?$/)) {
const id = route.match(/\/([^\/]+)\/?$/)[1];
const routeName = route.split('/')[0];
if (routeName === 'privatealbum') {
Actions.privateAlbum({ albumId: id });
}
}
}
}
2.) If app is not installed: Just set up a route in your server and node-deeplink package will handle the bridging between web browser to app store when a app is not installed in your mobile.
By this, both the cases will be handled without any struggle
I have a button and I want to open a facebook page in the facebook app. I can use this solution to open the link in a browser but I'm looking for a better solution that opens faecbook app and my desire page. Is this generally possible? How?
This may not be possible on Android but to do so you follow essentially the same instructions for linking, you just need to swap out http with fb (or the appropriate app id). This SO answer has a bit more information on what may or may not be possible.
Assuming it is possible, to open the facebook app to a profile it would look something like this
const pageId = 'abc123'
Linking.openURL(`fb://profile/${pageId}`)
.catch(err => console.error('An error occurred', err));
Notice that rather than using http I'm using fb
Same as solution of #Spencer answered, but using page instead profile to open fanpage.
<Button
title="Go to Facebook page"
onPress={() => {
const FANPAGE_ID = 'xxxxxxxxxxxxxxxxx'
const FANPAGE_URL_FOR_APP = `fb://page/${FANPAGE_ID}`
const FANPAGE_URL_FOR_BROWSER = `https://fb.com/${FANPAGE_ID}`
Linking.canOpenURL(FANPAGE_URL_FOR_APP)
.then((supported) => {
if (!supported) {
Linking.openURL(FANPAGE_URL_FOR_BROWSER)
} else {
Linking.openURL(FANPAGE_URL_FOR_APP)
})
.catch(err => console.error('An error occurred', err))
}}
/>
Note: You MUST use fanpage ID, not fanpage slug name. If you don't know how to get id, just open your fanpage in browser, view source and find page_id param.
A mix of answers from #Spencer and #Thành worked for me on iOS.
So I settled for just attempting to open the Facebook app link, and then if that fails I fall back to the web browser link, like so:
import { Linking } from "react-native";
const openFacebookLink = facebookId => {
const FANPAGE_URL_FOR_APP = `fb://profile/${facebookId}`;
const FANPAGE_URL_FOR_BROWSER = `https://fb.com/${facebookId}`;
Linking.canOpenURL(FANPAGE_URL_FOR_APP)
.then(appSupported => {
if (appSupported) {
console.log(`Can handle native url: ${FANPAGE_URL_FOR_APP}`);
return Linking.openURL(FANPAGE_URL_FOR_APP);
} else {
console.log(
`Can't handle native url ${FANPAGE_URL_FOR_APP} defaulting to web URL ${FANPAGE_URL_FOR_BROWSER}`
);
return Linking.canOpenURL(FANPAGE_URL_FOR_BROWSER).then(
webSupported => {
if (webSupported) {
console.log(`Can handle web url: ${FANPAGE_URL_FOR_BROWSER}`);
return Linking.openURL(FANPAGE_URL_FOR_BROWSER);
}
return null;
}
);
}
})
.catch(err => console.error("An error occurred", err));
};
Note: the appSupported variable here will always return false until you've edited/added the LSApplicationQueriesSchemes value in your info.plist file. You'll find this file in the ios/yourappname sub-folder of your project. Here are the lines that I added to mine:
<key>LSApplicationQueriesSchemes</key>
<array>
<string>fb</string>
<string>fbapi</string>
<string>fb-messenger-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>
NB: if you're using Create React Native App and/or Expo then you won't be able to edit this file. I abandoned Expo for this reason.
That works on iOS for me, but Android opens it in the browser every time. I've read that Android handles this stuff completely differently to iOS, so I'm not sure if there's any easy solution there.