tap.js logo tap.js

A simple (proof-of-concept) script loader using x-domain localStorage: APT-repository-style.

Version 0.1.0: tap.js (4.9KB gzipped)   tap.min.js (2.1KB gzipped)

Introduction

tap.js is a small (crazy proof-of-concept) JavaScript library which loads/stores script into special universal cross-domain "repositories" thereby allowing us to mark "special" scripts and not just place them on a CDN, but store them in a special place, "closer to the metal", avoid HTTP requests for them altogether, and prevent them from being easily wiped out as they are in common caches.

How is this related to basket.js?

Great question, I'm glad you asked. Actually, it extends Addy Osmani's basket.js (which was in turn created as a response to a tweeted suggestion by Steve Souders). They have a cool and informative site - if the localStorage bit seems unusual, give it a read.

How does it work?

Your client loads tap.js - it's fairly small, do it however you like.

It loads up an iframe to a repository - just an html compiled with JavaScript inline (with decent cache advice, this should be less than the cost of a normal script include for any one library). It builds on a few layers, promises and a message client relay to allow simpler communication sugar through postmessage/message channel which is in turn build on promises (via RSVP) and all of this uses basket.js as a special localStorage based cache which is not subject to the same frequent expulsions and misses as standard browser cache.

Once populated, no website using that repo should have to ask for it again.

Repos can be populated as requested and can lazily prime common libraries to further decrease the likelihood a download will ever be made.

Compatibility

We support browsers which support basket.js. basket.js supports locally caching scripts in any browser with localStorage capabilities.


Client Usage

Declaratively let your page know that you are using a repo via a meta tag:

<meta name="tap-repository" content="http://bkardell.github.io/tap/repository.html">

...and which files should be loaded from said repository:

<!-- in the head, as per normal -->
<script data-tap-get="hitch-0.6.3-min.js"></script>
<script data-tap-get="jquery-1.10.2.min.js"></script>

Include tap.js ...

<!-- This has to go *after* your tags above... -->
<script type="application/javascript" src="http://bkardell.github.io/tap/dist/tap.js"></script>

Wanna know when scripts are ready?

<script>
    tap.ready(function(){
        document.getElementById("test").value =
            "All my files loaded... Anyone using this repo shouldnt have to fetch again..."
            "\nhitch: " + Hitch
            "\nJQuery: " + $;
    });
</script>

.... That's it.

To free space basket.js will only remove cached scripts that it placed in localStorage itself. The data stored by other code in same origin will not be touched.

Can I create a Repo?

Duh. Of course. Pull down http://bkardell.github.io/tap, place some files in the /libs folder. Then run one of the following..

// creates a repository which loads files from your /libs folder on demand...
node create

// make it lazily loads things that aren't already stored/requested (1 file every 15 seconds)...
node create lazy

// tweak the lazy timing in ms (1 file every minute).
node create lazy 60000

If you ever add files to your repo, just re-run the create script.

Upload repository.html and /libs somewhere.

.... That's it.


Team, License & Contribution Guide

tap.js is released under an MIT License and is currently maintained by Brian Kardell, Yoav Weiss, Clint Hill. We would also like to extend our thanks to Addy Osmani for creating bucket.js and encouraging us to share our extension of it.

Fork me on GitHub