CDN

Full Title or Meme

The Content Delivery Network (CDN) is designed to deliver static data to web sites quickly regardless of location or network load.

Alternative Meanings

The Computer Data Network could be the same thing, or just a network of computers, like a cloud server provider and so is much less specific.

Context

The CDN can be just deliver traditionally addressed content, like URL's very quickly, or it can be a full distributed Content Addressable Storage

• In the centralized world using a CDN to serve your commonly used javascript and css files (say like jQuery or Bootstrap) is advised for a variety of reasons. Most of them still hold true, but only if applied to a centralized world.
• Using a CDN in a decentralized world all of a sudden gives your super awesome cool shiny website a single point of failure! I personally found this out a couple times now when once of my IPFS play sites was acting suspiciously slow. I am using Bootstrap and the CDN to serve it was acting really slowly (in this case it was this file on bootstrapcdn).
• So, why use a CDN at all? Sure, in the old paradigm of centralized sites the before mentioned reasons in favor of it still hold. But in a distributed world this can be painful.
• To change sites to be content that is served from IPFS. But how to even do this in such a way that it’s most efficient for IPFS and the browser?
• Lets take just the css bootstrap as an example. Before i changed anything (thus when using the CDN) i had:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Now we can use a relative path (and drop the rest) which makes it look like:

 <link rel="stylesheet" href="bootstrap.min.css">

Or we can use a specific IPFS path (only works if ipfs is in the protocol list and set with companion)

<link rel="stylesheet" href="ipfs://QmNrgEMcUygbKzZeZgYFosdd27VE9KnWbyUD73bKZJ3bGi">

(sidenote here, how do i get bafy... by default when doing ipfs add?)

Another alternative is to use a gateway (at the cost of adding a single point of failure again):

<link rel="stylesheet" href="https://ipfs.sc2.nl/ipfs/QmNrgEMcUygbKzZeZgYFosdd27VE9KnWbyUD73bKZJ3bGi">

What am i supposed to provide in the href section to make full use of IPFS? By that i mean that the browser requests the data from IPFS and uses that as cache. I’m asking because the browser (chrome in this case) and based on this information likely has no clue that the file came from IPFS. Therefore it likely doesn’t know that bootstrap.min.css is shared over multiple sites and thus downloads it for every site.

That results in the very same file living in the cache multiple times.

I suppose i’m asking if IPFS companion integrates into the browser cache as well? So that the cache knows that bootstrap.min.css is content address QmNrgEMcUygbKzZeZgYFosdd27VE9KnWbyUD73bKZJ3bGi and fetches it from IPFS. And does not cache it locally at all besides perhaps a name -> content hash lookup? This would be the ideal solution if the browser cache “knows” about IPFS!

Note that the browser can actually know this if it, behind the scenes, lists the files of that site in IPFS commands (say ipfs ls) which would tell the browser that bootstrap.min.css is QmNrgEMcUygbKzZeZgYFosdd27VE9KnWbyUD73bKZJ3bGi.

Before one suggest to go for the third option (this ipfs://QmNrgEMcUygbKzZeZgYFosdd27VE9KnWbyUD73bKZJ3bGi), that’s not really an option as the site then doesn’t work on a browser that knows nothing about IPFS.

References

Other Material

• What is a CDN? from Cloudflare.