Twitter: raymondcamden


Address: Lafayette, LA, USA

Example of Intents with PhoneGap

05-01-2012 27,838 views Mobile, Development, JavaScript, HTML5 50 Comments

This weekend I was reading an email on my phone when I noticed something odd. The link, to a Wikipedia article, prompted me to ask if I wanted to load it in my browser, or in the Wikipedia app. Knowing that the Wikipedia app was built with PhoneGap, I decided to dig into this and see how it was done.

I did some research and discovered that (as far as I could tell), the Wikipedia app was making use of an Android feature called Intents. From my understanding, Intents are a way for applications to...

  • Broadcast out a general request - ie, "I have an address and I'd love for someone to do something fancy with it!"
  • Listen for general requests - ie, "Dude, I can so do awesome things with maps. If you have an address, let me know, cuz I'll so do something awesome with it. Awesome."

Turns out there is already a plugin for this: WebIntent. To make use of this plugin, you have to modify the Java code a bit (I forgot to bookmark it, but someone else provided the help here) to support the latest version of PhoneGap. I've included a copy with my blog entry so feel free to just copy it from there. But once you have the plugin installed, you can do either (or both) of the actions above.

Creating an intent is as simple as using a bit of JavaScript:

But making your application listen for an intent involves a bit more work, specifically, modifying your AndroidManifest.xml file. You need to add a bit of XML in this to register the intent while also using JavaScript in your application to notice when your app was launched.

Via Stackoverflow, I found this entry on listening out for Youtube links, and then added it to my AndroidManifest.xml:

And then I used a bit of JavaScript to notice the intent.

Simple, right? After installing the application, I whipped up a quick HTML page with two links. One pointing to my blog, another to a random Youtube video.

When I click the Youtube link, I now get this:

and if I select my own application, the JavaScript I wrote notices and responds to the invocation:

Pretty simple! I really barely touched on the power and reach of Intents, and I have no idea if something similar exists for iOS (surely it must), but all in all this is incredibly easy to use with PhoneGap.

Download attached file

50 Comments

  • Commented on 05-02-2012 at 9:34 AM
    Intents are an important part of the Android application framework, so the fact that PhoneGap can utilize Intents is pretty cool.
  • Commented on 05-02-2012 at 12:01 PM
    Yeah, if you did into the PhoneGap source code you will see that Intents are used for core API calls like Camera.takePicture(), Capture.captureAudio(), Capture.captureImage() and Capture.captureVideo(). As well a number for plugins like the SpeechRecognizer and VideoPlayer also use intents to complete actions on Android.
  • Commented on 05-02-2012 at 1:00 PM
    Simon, does iOS have something similar?
  • Commented on 05-02-2012 at 1:16 PM
    Um, yes and no.

    WIth Android you can start an intent which is like when iOS starts another app to handle data. For instance when Dropbox fires off iBooks to handle the ePub file I just downloaded.

    But you can also start an intent and wait for a result on Android. This way you can cobble together applications using already existing intents. Much in the same way you can pipe together a number of UNIX commands to make something really powerful.

    I can't think of an analogy for that type of behaviour on iOS. As best I know as soon as you start a new app on iOS there is no way to pass the data back to the original app.
  • Commented on 05-02-2012 at 1:27 PM
    Interesting. Thanks. Can iOS also register to be the receiver of an event? Your example just mentioned broadcasting out an intent. (If I read it right.)
  • james #
    Commented on 08-08-2012 at 8:07 AM
    I dont think this works with the new phongap version. Nothing is happening and I copied everything. The download you provided looks just like my file structure.
  • Commented on 08-09-2012 at 1:44 PM
    It could be that the plugin has not been updated for recent PG versions. Are you using PG 2.0?
  • Mikey Reppy #
    Commented on 09-18-2012 at 9:09 PM
    I too cannot get it working yet with PG 2.0.0. The example as downloaded using PG 1.6.1 works as supplied, but at least my first attempt with PG 2 is not working. I'm also trying to work it in with gwt-phonegap, but since the 1.6 example works, I'm going to work through it stepwise to see what I can find out.

    I see that the intent filter is registered, the youtube link/URL gets intercepted on load and passed into my app, but the url response callback does not fire with the URL the way it does in the 1.6 example.
  • Commented on 09-18-2012 at 9:25 PM
    I'd get the latest WebIntent from here (https://github.com/phonegap/phonegap-plugins/tree/...) and see if that helps. Be sure to read his readme.md in case the API changed.
  • AliBhai #
    Commented on 10-10-2012 at 11:47 AM
    does webintent can be used to open local pdf file packaged with android app.
  • Mikey Reppy #
    Commented on 10-10-2012 at 1:58 PM
    Getting back to this, it does work with PhoneGap 2.0. I can post a complete solution but the last most maddening thing is that there needs to be a plugin reference in config.xml (res/xml/config.xml) for the WebIntent class, and without that you get very inscrutable class not found errors.

    this stackoverflow page was the clearest answer:
    http://stackoverflow.com/questions/9992433/phonega...

    This one is also helpful:
    http://stackoverflow.com/questions/11857958/phoneg...

    I am now going to move on and see if I can integrate this with gwt-phonegap! :-)
  • Commented on 10-10-2012 at 2:04 PM
    @Mikey: I'm actually doing a blog post related to this in about 20 minutes. :)

    @AliBhai: You don't use an Intent to open a file, rather, you broadcast the desire to open a file and apps that have said they respond to such intents ("I can open PDFs!") will respond.
  • ArneO #
    Commented on 12-27-2012 at 6:50 AM
    What about the send event? Is phonegap able to show the URL from a browser if your app is invoked via the "share"-list (send activity)?
  • Luca #
    Commented on 01-23-2013 at 3:25 AM
    Hi, im using this page to catch the text passed throught an application that call my one.
    For example: i open an application that has got the "share" button, i press button and there is my app in the list.
    When i click my app, it opens and tell me the EXTRATEXT, used to call my app.

    I did something like this, but it doesnt work :(

    document.addEventListener("deviceready", onDeviceReady, false);
    // Cordova is ready
    function onDeviceReady() {
       console.log("Device Ready");

       window.plugins.webintent.getExtra(WebIntent.EXTRA
    TEXT,
    function(url) {
    // url is the value of EXTRA_TEXT
    alert(url);
    }, function() {
    // There was no extra supplied.
    }
    );
  • Commented on 01-23-2013 at 9:58 AM
    How did it fail?
  • Luca #
    Commented on 01-23-2013 at 10:25 AM
    i putted
    alert("nothing"); in the
    function() {
    // There was no extra supplied.
    }
    and it everytime execute that alert, instead of alert(url).

    This is in the Manifest:
    <intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:host="www.youtube.com"; android:mimeType="text/*" />
    </intent-filter>
  • Commented on 01-23-2013 at 10:51 AM
    Not sure. I'd try the hasExtra API to see if it has something at all. Maybe try some of the other EXTRAs defined in the code - https://github.com/phonegap/phonegap-plugins/blob/....
  • Luca #
    Commented on 01-23-2013 at 3:02 PM
    im sorry but im rly noob with this things!!!
    First of all thank you for your help!!!!
    I tried this way:

    window.plugins.webintent.hasExtra(WebIntent.EXTRASTREAM,
    function(url) {
    // url is the value of EXTRA
    TEXT
    alert("parametri");
    }, function() {
    // There was no extra supplied.
    alert("niente");
    }

    with all EXTRA_stuff, but it still print "niente".
    Thank you!
  • Commented on 01-23-2013 at 3:38 PM
    I bet I know what it is. Check this blog entry:

    http://www.raymondcamden.com/index.cfm/2012/10/10/...

    and note how I had to 'recognize' the data from Parse's push stuff. Specifically:

    window.plugins.webintent.hasExtra("com.parse.Data"
  • Luca #
    Commented on 01-24-2013 at 12:52 PM
    Thank you another time.
    Based on your suggestion i tried a bit of debug:
    private static final String TAG = "ProvaIntent";
    Bundle extras = getIntent().getExtras();
    if (extras == null) {
       Log.d(TAG, "error");
    }else{
       String value1 = extras.getString(Intent.EXTRATEXT);
       Log.d(TAG, value1);
    }

    It works: when i call my program from Youtube Share link, it print the youtube link, when i call it from my computer (Run on Eclipse), it prints "error"!!
    But i don't know which is the right string to catch the EXTRA
    TEXT.
    I tried with "android.intent.extra.TEXT" as seen on the Android Developers Guide, but it doesnt work!
    So I have only to understand wich is the right string! :)

    Thank you!!!!
  • Commented on 01-24-2013 at 3:05 PM
    So.... you're good?
  • Luca #
    Commented on 01-24-2013 at 5:16 PM
    Not rally because I catched the link in my MainActivity with Java, but i can't catch it in javascript and webintent!

    Luca
  • Commented on 01-25-2013 at 6:55 AM
    Not sure what to suggest then. If you want, you could send me the code and I could try here, but that crosses the line into paid support. ;)
  • Luca #
    Commented on 01-25-2013 at 6:14 PM
    Thank you for your help, but i'm doing it only a diversion!!!!
    Thank you, my friend ;)
  • Yves #
    Commented on 01-27-2013 at 2:39 PM
    Unfortunately I can't get it run.
    I added the <intent-filter> with an <action> "android.intent.category", <category> "android.intent.category.DEFAULT" and "android.intent.category.BROWSABLE", added the plugin as described but nothing happens if I click on the link or android is just asking for other apps to open with and not my own.

    Could it be that the plug-in isn't working with cordova/phonegap 2.2.0?

    Or do you know another proper way to handle this?
  • Yves #
    Commented on 01-27-2013 at 2:42 PM
    Sorry the <action> is "android.intent.action.VIEW" not "android.intent.category" as written.
  • Commented on 01-28-2013 at 5:39 AM
    As far as I know this should work just fine with the latest, but I'll give it another try with 2.3.0 just to be sure.
  • Yves #
    Commented on 01-29-2013 at 2:55 PM
    Now I get it run but just with an fictive intent-scheme like "android-intent" and a link pointing to "href='android-intent://'" with an url like youtube or wikipedia it's bizarrely still not asking for my app.
    In general it's good because now I can change from an url to my app but unfortunately the webIntent plug-ins method "getUri(function(url)){}" is not getting fired and the url passed is always "null".
    You have any idea?

    thanks, regards
    yves
  • Commented on 01-29-2013 at 9:51 PM
    No. As I said, I'm going to set up a new test w/ 2.3.0. I just haven't had time yet.
  • Commented on 02-07-2013 at 2:33 PM
    So, I can confirm me that URL filtering is no longer working. Not sure why, but looking more.
  • Commented on 02-21-2013 at 4:00 PM
    I just tried with a virgin 2.4.0 PhoneGap project and it did work ok for me. When I visited a YouTube link (like in my demo above), it asked me if I wanted to use my new app.

    Want me to send you a zip of my code?
  • Yves #
    Commented on 02-24-2013 at 6:27 PM
    Thanks Raymond.
    It would be nice if you could send me your code. But could you grab the url as well?
    Because I could trigger my app by using the intent Filter too.

             <intent-filter>
                <data android:scheme="http" android:host="www.domain.com"; android:pathPattern=".*" />
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.BROWSABLE" />
                <category android:name="android.intent.category.DEFAULT" />
             </intent-filter>

    The important point is to add the `android:pathPattern` attribute to open your app by using the host attribute together with the scheme attribute.
    That means, you could just use the scheme attribute alone or you have to use all three:
    - scheme
    - host
    - path or pathPattern
    Just for somebody who has the same issue.

    Now I've the problem that I just get `null` returned as URI. Have you had the same issue?
    There are some deprecation warnings in the WebIntent Java class, maybe it could be a problem related to this warnings.
  • Commented on 02-24-2013 at 7:40 PM
    Shoot, I'm sorry, I didn't test getting the url, just the intent working. Will test in the morning.
  • Yves #
    Commented on 02-25-2013 at 5:00 AM
    Nice, you changed your design. Looks good.
    I figured out what the problem was in my case.
    It's not because of the cordova version or the webintent plug-in,
    but in some kind the "nfc-plugin.js"
    (https://github.com/chariotsolutions/phonegap-nfc) is somehow interfering with the webintent.js. Unfortunately I need both js files, so I have to figure out what the problem exactly is.

    Thanks for your time and help.
  • Yves #
    Commented on 02-25-2013 at 5:00 AM
    Nice, you changed your design. Looks good.
    I figured out what the problem was in my case.
    It's not because of the cordova version or the webintent plug-in,
    but in some kind the "nfc-plugin.js"
    (https://github.com/chariotsolutions/phonegap-nfc) is somehow interfering with the webintent.js. Unfortunately I need both js files, so I have to figure out what the problem exactly is.

    Thanks for your time and help.
  • Yves #
    Commented on 02-25-2013 at 5:36 AM
    Ok, I got it.
    Both plugins are using the "cordova.addConstructor()" method.
  • Yves #
    Commented on 02-25-2013 at 5:58 AM
    Sorry, for my comment spamming. That will be the last one.
    "In Cordova 2.0 the addConstructor has been removed and checking for Cordova is not necessary.." - Source: http://stackoverflow.com/questions/10587398/cordov...

    Cheers, yves
  • Commented on 02-25-2013 at 7:03 AM
    Dude, this is not spamming at all. Thank you so much for sharing this. I'd recommend filing a bug report on both plugins.
  • Yves #
    Commented on 02-28-2013 at 3:39 AM
    You're right. I will do that.
  • Commented on 11-09-2013 at 12:34 PM
    That old plugin is deprecated. But here is a link to a new repo that is updated to phonegap 3.x: https://github.com/InQBarna/WebIntent
  • Commented on 11-09-2013 at 2:56 PM
    Thanks for sharing that, Adam.
  • metamagicson #
    Commented on 04-08-2014 at 12:15 PM
    Hi Raymond.

    Thank you for this explantation. But i wonder how i can catch the Intent if a running application is brought back to front on resume. I use the following listener: document.addEventListener("resume", refreshIntentReq, false); But when i try to catch the intent from within refreshIntentReq, the shared intent is empty.
  • Vitaly #
    Commented on 06-25-2014 at 9:39 PM
    Hello all.
    I am Vitaly.

    I want to get the file absolute path from email attached file.
    I made the phonegap app .
    when tap attached file on mail, my app run successfully.
    but now, I need to read the file content with my phonegap app.

    so I need your help to get file path or how to read the file content?

    Thanks so much
    Look forward to your hearing.
  • Commented on 06-26-2014 at 9:39 AM
    Is it passed in the intent? If so - just use the File API.
  • Vitaly #
    Commented on 06-26-2014 at 9:50 AM
    thanks for your reply.
    I used this plugin
    https://github.com/Initsogar/cordova-webintent

    manifest to assign our app to the file extension, we have in mind:
    https://www.dropbox.com/s/4c8h0y3v0jfhw1i/AndroidM...
    .skt
    to our app.

    I wrote the basic "ondeviceready" function to see, what is in the intent parameter:

    onDeviceReady: function() {
    window.plugins.webintent.getUri(function(url) {
    if(url !== "" && url.length > 5) {
    // url is the url the intent was launched with
    window.plugins.contentproviderplugin.query({
    contentUri: url,
    }, function (data) {
    alert(JSON.stringify(data));
    }, function (err) {
    alert("error query");
    });
    }
    });

    the cordova plugins added were (only the first 2 are important for that):

    ralfs-air:enableJS puzzler$ cordova plugin ls

    com.borismus.webintent 1.0.0 "WebIntent"
    com.phearme.cordovaplugin.ContentProviderPlugin 0.2.6 "ContentProviderPlugin"
    de.appplant.cordova.plugin.email-composer 0.8.1 "EmailComposer"
    org.apache.cordova.console 0.2.8 "Console"
    org.apache.cordova.device 0.2.9 "Device"
    org.apache.cordova.dialogs 0.2.7 "Notification"
    org.apache.cordova.inappbrowser 0.4.0 "InAppBrowser"
    org.apache.cordova.splashscreen 0.3.0 "Splashscreen"
    org.apache.cordova.statusbar 0.1.3 "StatusBar"

    But we get the "content://blabla..." url which I can not work with... lack of brain ;-)

    Regards,
  • Commented on 06-26-2014 at 1:20 PM
    Ah, well then I think you may be out of luck.
  • Vitaly #
    Commented on 06-26-2014 at 1:40 PM
    Hi.
    I can get "content://com.android.email.attachmentprovider/1/32/RAW"
    instead of:
    /sdcard/Download/Attachments/1.skt

    so I don't have any idea to read this.

    I need your help for this.

    Look forward to your hearing.
    Regards
  • Vitaly #
    Commented on 06-26-2014 at 1:42 PM
    and I get some article from there.
    http://stackoverflow.com/questions/15351591/openin...

    unfortunately, this is not phonegap, so I also stopped to work.

    Thanks
  • Commented on 06-26-2014 at 1:44 PM
    I don't know - I'd recommend asking on the Google group for PhoneGap. I'm pretty busy at the moment so I can't help you with this.
  • Vitaly #
    Commented on 06-26-2014 at 1:49 PM
    I mean I need your help if you have time.

    yeah, sure I will ask on the google group.
    Thanks

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty