a small guide for "getting started with web intents"

35 views
Skip to first unread message

Michiel (unhosted)

unread,
Dec 18, 2011, 1:00:45 AM12/18/11
to Web Intents
Hi!

I put together this little getting-started guide, for myself, but
maybe other people will find it helpful as well, which is why i'm
posting it here:

As a starting point, consider these minimal examples:

* minimalHandler.html:
--------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title-of-this-here-handler</title>
<script src="http://webintents.org/webintents.min.js"></script>
<intent action="http://webintents.org/pick" type="something/
other">
</head>
<body onload="if(window.intent)
{document.getElementById('1').style.display='block';}">
<h2>Handler</h2>
when you use me, i will give choices here:
<div id="1" style="display:none">
<input type="submit" value="pick me!"
onclick="window.intent.postResult('the-thing-you-
picked');setTimeout(function() { window.close(); }, 1000);">
</div>
</body>
</html>
---------------

* minimalRP.html:
---------------
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://webintents.org/webintents.min.js"></script>
<script>
function startIntent() {
var intent = new Intent("http://webintents.org/pick",
"something/other");
window.navigator.startActivity(intent, function(data) {
document.getElementById("1").innerHTML = data;
});
}
</script>
</head>
<body>
<h2>Relying Party</h2>
<input value="pick your thing" type="submit"
onclick="startIntent();">
and it will show up here:
<div id="1"></div>
</body>
</html>
---------------

To use:
* Put these files on your webserver.
* First (!) visit the handler
* Then visit the relying party, and follow instructions.
* Keep webintents.org open in a third tab to see what's happening (but
see also pitfall 2, below).

Pitfalls:

1) It currently doesn't work in (my version of) Firefox, seemingly (I
didn't confirm this though) because Content Security Policy headers
are incorrect (they don't seem to let the page execute inline
javascript). So use Chrome for testing.

2) There is a /list.html page on webintents.org but it seems to be
currently broken (at least for me). So to see what's going on, the
first thing you need to do is:
* open http://webintents.org in a separate tab,
* open inspector (Chrome's equivalent of Firebug, Apple-alt-i on a
Mac),
* go to the "console" part of Chrome inspector, and
* at the ">" type "localStorage", to see the contents of
localStorage.
* To see the registered handlers for the 'pick' action, type
"localStorage.getItem('http://webintents.org/pick');".
* To reset everything, type "localStorage.clear();" in the console
on the webintents.org tab. Then refresh the page on the handler tab to
see it reappear.
* This is your crucial tool for debugging what's going on. If you
use this, then the rest is easy.

3) Don't forget the 'title' tag in the handler page. If the page
doesn't have a title, then it won't be clickable in the selector. Also
adding a favicon looks better. You'll also see these details in
inspector "localStorage.getItem('http://webintents.org/pick');" by the
way.

So once I found out these few small things, it was all very easy to
use. That's why I thought I would share them.

Keep up the splendid work! We're all big fans of Web Intents.


Cheers,
Michiel

Paul Kinlan

unread,
Dec 18, 2011, 3:43:04 AM12/18/11
to web-i...@googlegroups.com

Hi Michel,

Thanks for writing this up.

Can you file 3 bugs on http://github.com/paulkinlan/webintents/issues and I will get them sorted.  Content security policy for inline scripts surprised me but it makes sense.

P

Michiel de Jong

unread,
Dec 18, 2011, 5:59:01 AM12/18/11
to web-i...@googlegroups.com
done. i also found out that https://github.com/PaulKinlan/WebIntents/blob/master/README.md has the info i was missing. My bad for not looking there.

thanks!
Michiel
Reply all
Reply to author
Forward
0 new messages