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).
This made me think, why would i 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.
Now i want to change this on my sites to be content that is served from IPFS. But when changing it i began to wonder 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 i can use a relative path (and drop the rest) which makes it look like:
<link rel="stylesheet" href="bootstrap.min.css">
Or i 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
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
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.
I’m curious about your opinions