{"id":18584443,"url":"https://github.com/ipfs-examples/js-ipfs-browser-service-worker","last_synced_at":"2025-08-21T03:17:46.078Z","repository":{"id":104999474,"uuid":"376793740","full_name":"ipfs-examples/js-ipfs-browser-service-worker","owner":"ipfs-examples","description":"Example of JS-IPFS using service workers","archived":false,"fork":false,"pushed_at":"2025-05-01T08:39:20.000Z","size":266,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-16T05:37:51.648Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ipfs-examples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-06-14T11:05:09.000Z","updated_at":"2025-05-01T07:36:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"b2135947-22aa-4747-a28b-33d857404035","html_url":"https://github.com/ipfs-examples/js-ipfs-browser-service-worker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"ipfs-examples/example-fork-go-template","purl":"pkg:github/ipfs-examples/js-ipfs-browser-service-worker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipfs-examples%2Fjs-ipfs-browser-service-worker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipfs-examples%2Fjs-ipfs-browser-service-worker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipfs-examples%2Fjs-ipfs-browser-service-worker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipfs-examples%2Fjs-ipfs-browser-service-worker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ipfs-examples","download_url":"https://codeload.github.com/ipfs-examples/js-ipfs-browser-service-worker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipfs-examples%2Fjs-ipfs-browser-service-worker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271420164,"owners_count":24756491,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T00:27:31.922Z","updated_at":"2025-08-21T03:17:46.062Z","avatar_url":"https://github.com/ipfs-examples.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://js.ipfs.io\" title=\"JS IPFS\"\u003e\n    \u003cimg src=\"https://ipfs.io/ipfs/Qme6KJdKcp85TYbLxuLV7oQzMiLremD7HMoXLZEmgo6Rnh/js-ipfs-sticker.png\" alt=\"IPFS in JavaScript logo\" width=\"244\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003e\u003cb\u003ejs-ipfs node using web workers\u003c/b\u003e\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003e\u003ci\u003eUsing js-ipfs node in [SharedWorker][] from [ServiceWorker][]\u003c/i\u003e\u003c/b\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jlord/forkngo/gh-pages/badges/cobalt.png\" width=\"200\"\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/ipfs/js-ipfs/tree/master/docs\"\u003eExplore the docs\u003c/a\u003e\n  ·\n  \u003ca href=\"https://codesandbox.io/\"\u003eView Demo\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/ipfs-examples/js-ipfs-examples/issues\"\u003eReport Bug\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/ipfs-examples/js-ipfs-examples/issues\"\u003eRequest Feature/Example\u003c/a\u003e\n\u003c/p\u003e\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [About The Project](#about-the-project)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation and Running example](#installation-and-running-example)\n- [Usage](#usage)\n  - [General Overview](#general-overview)\n    - [`src/main.js`](#srcmainjs)\n    - [`src/worker.js`](#srcworkerjs)\n    - [`src/service.js`](#srcservicejs)\n  - [Running example](#running-example)\n- [References](#references)\n- [Documentation](#documentation)\n- [Contributing](#contributing)\n- [Want to hack on IPFS?](#want-to-hack-on-ipfs)\n\n## About The Project\n\n- Read the [docs](https://github.com/ipfs/js-ipfs/tree/master/docs)\n- Look into other [examples](https://github.com/ipfs-examples/js-ipfs-examples) to learn how to spawn an IPFS node in Node.js and in the Browser\n- Consult the [Core API docs](https://github.com/ipfs/js-ipfs/tree/master/docs/core-api) to see what you can do with an IPFS node\n- Visit https://dweb-primer.ipfs.io to learn about IPFS and the concepts that underpin it\n- Head over to https://proto.school to take interactive tutorials that cover core IPFS APIs\n- Check out https://docs.ipfs.io for tips, how-tos and more\n- See https://blog.ipfs.io for news and more\n- Need help? Please ask 'How do I?' questions on https://discuss.ipfs.io\n\n## Getting Started\n\n### Prerequisites\n\nMake sure you have installed all of the following prerequisites on your development machine:\n\n- Git - [Download \u0026 Install Git](https://git-scm.com/downloads). OSX and Linux machines typically have this already installed.\n- Node.js - [Download \u0026 Install Node.js](https://nodejs.org/en/download/) and the npm package manager.\n\n### Installation and Running example\n\n```console\n\u003e npm install\n\u003e npm start\n```\n\nNow open your browser at `http://localhost:3000`\n\n## Usage\n\n\u003e In this example, you will find boilerplate code you can use to set up an IPFS\n\u003e node in a [SharedWorker][] and use it from a [ServiceWorker][].\n\n### General Overview\n\n#### `src/main.js`\n\nModule is loaded in the main thread (DOM window) and is responsible for wiring\nall the pieces together:\n\n1. Activates a [SharedWorker][] that runs an IPFS node.\n2. Registers a [ServiceWorker][] to serve IPFS content from.\n3. Listens to [MessagePort][] requests from the [ServiceWorker][] and responds\n   back with a [MessagePort][] of the [SharedWorker][], enabling\n   it to interact with shaerd IPFS node.\n\n#### `src/worker.js`\n\nModule is loaded in the [SharedWorker][]. It demonstrates how to setup the IPFS\nnode such that it can be used in other browsing contexts.\n\n#### `src/service.js`\n\nModule is loaded in the [ServiceWorker][] and responds to all the requests from\nthe page. It recognizes four different request routes:\n\n1. Routes `/ipfs/...`, `/ipns/...` are served html pages that:\n\n  - Contain a full page iframe that has an `src` derived from request path e.g.:\n\n   ```\n   /ipfs/Qm...hash/file/name -\u003e /view/Qm...hash/file/name\n   ```\n  - `src/main.js` script loaded in it.\n\n  This way when request from `/view/Qm..hash/file/name` arrives [ServiceWorker][]\n  can obtain a [MessagePort][] for the [SharedWorker][] by requesting it from\n  the iframe container.\n\n2. Routes `/view/ipfs/...` and  are served corresponding content from IPFS. On\n   such request message is send to an iframe container (That is why `/ipfs/...`\n   and `/ipns/...` routes served `iframe` and `src/main.js`), through which\n   [MessagePort][] for the [SharedWorker][] is obtained and used to retrieve\n   content from the shared IPFS node and served back.\n\n   \u003e There is a stub for `/view/ipns/...` route, which is left as an exercise\n   \u003e for the reader to fill.\n\n3. All other routes are served by fetching it from the network.\n\n### Running example\n\nYou should see the following:\n\n![Screen Shot](./img/index-view.png)\n\nIf you navigate to the following address `http://localhost:3000/ipfs/bafybeicqzoixu6ivztffjy4bktwxy6lxaxkvnavkya7kfgwyhx4bund2ga/` it should load a\npage from ipfs and appear as:\n\n![Screen Shot](./img/page-view.png)\n\n\n[SharedWorker]:https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker\n[ServiceWorker]:https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\n[MessagePort]:https://developer.mozilla.org/en-US/docs/Web/API/MessagePort\n\n_For more examples, please refer to the [Documentation](#documentation)_\n\n## References\n\n- Documentation:\n  - [IPFS CONFIG](https://github.com/ipfs/js-ipfs/blob/master/docs/CONFIG.md)\n  - [MISCELLANEOUS](https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/MISCELLANEOUS.md)\n  - [IPFS-MESSAGE-PORT-CLIENT](https://github.com/ipfs/js-ipfs/tree/master/packages/ipfs-message-port-client)\n  - [IPFS-MESSAGE-PORT-PROTOCOL](https://github.com/ipfs/js-ipfs/tree/master/packages/ipfs-message-port-protocol)\n  - [IPFS-MESSAGE-PORT-SERVER](https://github.com/ipfs/js-ipfs/tree/master/packages/ipfs-message-port-server)\n- Tutorials:\n  - [Anatomy of a CID](https://proto.school/anatomy-of-a-cid)\n\n## Documentation\n\n- [Config](https://docs.ipfs.io/)\n- [Core API](https://github.com/ipfs/js-ipfs/tree/master/docs/core-api)\n- [Examples](https://github.com/ipfs-examples/js-ipfs-examples)\n- [Development](https://github.com/ipfs/js-ipfs/blob/master/docs/DEVELOPMENT.md)\n- [Tutorials](https://proto.school)\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n1. Fork the IPFS Project\n2. Create your Feature Branch (`git checkout -b feature/amazing-feature`)\n3. Commit your Changes (`git commit -a -m 'feat: add some amazing feature'`)\n4. Push to the Branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## Want to hack on IPFS?\n\n[![](https://cdn.rawgit.com/jbenet/contribute-ipfs-gif/master/img/contribute.gif)](https://github.com/ipfs/community/blob/master/CONTRIBUTING.md)\n\nThe IPFS implementation in JavaScript needs your help! There are a few things you can do right now to help out:\n\nRead the [Code of Conduct](https://github.com/ipfs/community/blob/master/code-of-conduct.md) and [JavaScript Contributing Guidelines](https://github.com/ipfs/community/blob/master/CONTRIBUTING_JS.md).\n\n- **Check out existing issues** The [issue list](https://github.com/ipfs/js-ipfs/issues) has many that are marked as ['help wanted'](https://github.com/ipfs/js-ipfs/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22help+wanted%22) or ['difficulty:easy'](https://github.com/ipfs/js-ipfs/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Adifficulty%3Aeasy) which make great starting points for development, many of which can be tackled with no prior IPFS knowledge\n- **Look at the [IPFS Roadmap](https://github.com/ipfs/roadmap)** This are the high priority items being worked on right now\n- **Perform code reviews** More eyes will help\n  a. speed the project along\n  b. ensure quality, and\n  c. reduce possible future bugs.\n- **Add tests**. There can never be enough tests.\n- **Join the [Weekly Core Implementations Call](https://github.com/ipfs/team-mgmt/issues/992)** it's where everyone discusses what's going on with IPFS and what's next\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipfs-examples%2Fjs-ipfs-browser-service-worker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fipfs-examples%2Fjs-ipfs-browser-service-worker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipfs-examples%2Fjs-ipfs-browser-service-worker/lists"}