example: Use js-ipfs to load the entire assets of a WebSite/WebApplication

[daviddias]

Build a js-ipfs example where a browser page gets loaded, loads an IPFS node and loads all of the page html through IPFS.

Bonus points:

• progress bars
• some kind of visualisation that makes it clear what is going on

[vijayee]

Going to give this a shot.

[vijayee]

Ok so concerns burning my neurons. Resolving dependency requests in a page. Initially I was thinking that the HTML5 LocalFileSystem API could be used to store a page and its dependencies. Turns out only one browser has or will implement it, Chrome. In other browsers its not available.

Then I thought this could be done using data urls that encompass all the resources. Strangely different browsers have idiosyncratic size limitations on these, so there may be a series of weird incompatibilities at the file level (but not my problem). So far as I am aware css/html/svg all can resolve paths that lead to network requests and can also take data urls. So we then can search the text/ast for relative and root-relative paths that match the resources in a page. This will create a text entry larger than the binary representation of the file everywhere it is required in the markup. This may be negligible considering we have already arrived at the browser. This also assumes we attempted to load a folder and are aware of its contents. A single html file with an uknown context for its dependencies may be invalidated by this approach.This approach seems like it would work across browsers.

Another approach is that all pages have to be sanitized by their creators to be loaded by the browser and use javascript to load its ipfs contained dependencies. This feels rigid and may be inconsistent with how the same resource might load from the gateway unless there is a uniform method or implementation of this.

So am I missing anything here? Where there any other ideas you guys had or have envisioned?

[dignifiedquire]

Actually there is another way you could handle this. As far as I understand service workers allow you to proxy requests from your page, so if we had an ipfs proxy inside a service worker we could transparently proxy all the requests and resolve them through that. Service workers are available in FF and Chrome so that's not too bad.

Ref: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API

[vijayee]

Ok this is a way more natural approach. I'm going to start implementing based on workers. Thanks @dignifiedquire.

[vijayee]

Ok, so progress.....I was able to get the repo into the browser as well as get router setup to respond to /ipfs/:hash with service workers. Caveat: service workers have to be used over ssl which makes it not completely serverless. But now I don't know how to get the data back out of the repo. I don't believe there is export functionality yet, is there? (I'm professionally certified in being wrong) The current work will be here as soon as I get to a more ssh friendly network environment: https://github.com/vijayee/js-ipfs-example-browser

[nginnever]

But now I don't know how to get the data back out of the repo. I don't believe there is export functionality yet, is there? (I'm professionally certified in being wrong)

Not this time! haha

I am working on an export function in this PR

Would like to work with you as well on this project so look forward to hearing from me this week!

[vijayee]

@nginnever how's the export coming?

[nginnever]

hey @vijayee

The export function has been merged in the new ipfs-unixfs-engine and is power the get and cat commands in the cli on this PR