How to fire an Android app's intent in using a link in the device's browser?

Question

I wanted to import a virtual contact file (.vcf) (with a single person's details on it) directly using Android's native contact import activity without downloading it first using the browser. This all had to be done when a user clicked on a link in their device's browser (e.g., Google Chrome).

Usually when a user clicks on the link, it downloads a virtual contact file (.vcf) on their system (for e.g., Android). I wanted to bypass this behaviour and open the intent directly, which the user would have fired manually by navigating to the file (.vcf) and clicking on it.

I tried looking at several questions asked here, such as:

1. Android how is a Chrome intent-based URI opened
2. What is the intent to launch any website link in Google Chrome
3. Launching Intent through Chrome with data
4. Adding Contacts to phone via JS

I also checked out Google's guide on Android Intents with Chrome in Chrome for Android subsection. Available here, last updated on February 28, 2014.

Answer 1

So I'm trying to share my findings on this issue. I know this can be achieved easily using React Native, but I wanted to give it a try using React.js. I found out that:

1. there must be a scheme defined in the AndroidManifest.xml file.
2. the intent that I'm trying to call it not callable because the activity it is linked to must have been defined as BROWSABLE inside the AndroidManifest.xml file.

Without both of the above prerequisites, it's not possible to fire an app's intent from a link in the web browser in Android.

Answer 2

You can do this with react.js easily

1. Import the navigator object at the top of your component file:

     import { useEffect } from 'react';
   
        const MyComponent = () => {
        useEffect(() => {
       const importContactLink = document.getElementById('import- 
         contact- 
     link');
   
      if (importContactLink) {
     importContactLink.addEventListener('click', handleClick);
     }
   
      return () => {
      if (importContactLink) {
      importContactLink.removeEventListener('click', handleClick);
    }
     };
     }, []);
   
    const handleClick = (event) => {
     e   vent.preventDefault();
   
      // Check if the Web Share API is available
      if (navigator.share) {
       navigator.share({
      title: 'Import Contact',
        url: 'http://example.com/contact.vcf'
        })
       .catch(console.error);
      }
      };
   
   return (
      <a href="http://example.com/contact.vcf" id="import-contact- 
       link">Import 
      Contact</a>
      );
       };
   
       export default MyComponent;
   

2. Create a link in your component's render method that points to the virtual contact file (.vcf), and give it an ID so you can access it later in your useEffect hook:

     return (
       <a href="http://example.com/contact.vcf" id="import-contact- 
        link">Import Contact</a> );
   

3. In the useEffect hook, add an event listener to the link that will trigger the Web Share API when clicked. You'll also want to remove the event listener when the component unmounts to prevent memory leaks.

4. When the user clicks the link, the event listener will prevent the default behavior (downloading the file) and trigger the Web Share API. If the Web Share API is available on the user's device, it will launch the native contact import activity with the virtual contact file. If the Web Share API is not available, nothing will happen.