helia ipfs ipfs-gateway ipfs-helia service-worker typescript

helia-service-worker-gateway

This example shows how to use Helia in a Service Worker to handle fetching and verifying CIDs in the browser.

Getting Started

Prerequisites

Make sure you have installed all of the following prerequisites on your development machine:

Git - Download & Install Git. OSX and Linux machines typically have this already installed.
Node.js - Download & Install Node.js and the npm package manager.

Installation and Running example

> npm install
> npm start

Now open your browser at http://localhost:3000

Usage

In this example, you will find an example of using helia inside a service worker, that will intercept ipfs path requests (e.g. /ipfs/* and /ipns/*) and return a Response object. This can be used to obtain verified IPFS content instead of using a public IPFS gateway, using helia.

There are two methods of loading content with this demo, each method with its own buttons:

Load in-page - This calls heliaFetch directly. NOTE: If you're loading an HTML page (a static website) the service worker must run in order to handle redirecting the loading of content through heliaFetch.
Load directly / download - This method is processed directly by the service worker, and is essentially an IPFS gateway in the browser via helia in a service worker.

The first thing you will see will look like the below image:

As you type in an ip(f|n)s or dnslink path, you will be shown appropriate error messaging:

etc... When your path is valid, you will be shown buttons that will let you load the content:

NOTE: There is no way to confirm the validity of an /ipns/ path without actually querying for it, which is not currently done until you attempt to load the content.

Demo links

Pre-reqs

You have to visit the hosted site first, and make sure the SW is loaded. Once it is, the below links should work for you.

Notes:

Attempting a few refreshes, clearing site data (cache/cookies/sw/indexDb/etc..), etc, may resolve your problem (though may be indicative of issues you can fix with a PR!)
Some content-types are not previewable with certain browsers. If you receive a download prompt you didn't expect: double check the returned content-type and make sure your browser supports previewing that content-type.