Question 52530 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search