Important

This project is no longer maintained.

The code still works, but it pins an old @helia/verified-fetch and will not be updated.

If you are moving an application off public gateways, calling @helia/verified-fetch directly is usually the better starting point. Replace public gateways with self-hosted IPFS covers that path and the backend options alongside it.

The repository can be unarchived, but only for a named maintainer who commits to keeping it up. If that is you, reach out to the IPFS Foundation.

IPFS Drop-in Service Worker Example

Replace centralized IPFS gateways with resilient and verified retrieval gateways or providers with @helia/verified-fetch in a drop-in Service Worker.

This example shows how to use a Service Worker to intercept requests to centralized IPFS gateways and retrieve content directly from providers (or self-hosted gateways) with @helia/verified-fetch.

For more information, check out the deep dive video on YouTube.

Running

npm install
npm run dev

Building

To build the static site, run:

npm run build

This will also build the Service Worker, which is output to public/sw.js.

The output directory for the static site is out.

Architecture

Service Worker

The Service Worker is defined in sw/sw.ts, and is built in a separate process using esbuild, because it's tricky getting an additional bundle without polluting Next.js config with custom Webpack config.

Registration

The Service Worker is registered in the useServiceWorker hook, and will be installed and activated when the page loads.

To ensure that all IPFS Gateway requests are intercepted, rendering is blocked until the Service Worker is active.