Skip to content

Commit 0db8c45

Browse files
committed
progress on guide
1 parent 00b720f commit 0db8c45

File tree

1 file changed

+34
-13
lines changed

1 file changed

+34
-13
lines changed

docs/how-to/ipfs-in-web-apps.md

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ There are good reasons for this like security and resource management, but ultim
2424
As a developer, IPFS exposes three main operations for interacting with the network:
2525

2626
- **Addressing data with CIDs** (also known as merklizing): taking arbitrary data and encoding so its addressable by CID. For example, given a file and encoding it so it can be addressed by a CID.
27-
- **Providing data by CID**: making data addressed by a CID retrievable by other peers, either by running a node or with a pinning service.
2827
- **Retrieving data by CID**: given a CID, IPFS finds providers (peers who share the block), connects to them, fetches the blocks, and verifies.
28+
- **Providing data by CID**: making data addressed by a CID retrievable by other peers, either by running a node or with a pinning service.
2929

3030
## Addressing data by CID
3131

@@ -35,12 +35,16 @@ When addressing data by [CIDs](https://proto.school/anatomy-of-a-cid/03) you wil
3535

3636
- [hash function](../concepts/glossary.md#hash-function). For use in browsers, the default and recommended hash function is `sha2-256` which is also the default for [helia](https://github.com/ipfs/helia).
3737
- [multicodec](../concepts/glossary.md#multicodec), which is the format of the data you are addressing and is used to help decode data. CIDs support a wide range of multicodecs, but for most intents and purposes, you will likely either want use:
38-
- [unixfs](../concepts/file-systems.md#unix-file-system-unixfs) for files and directories.
38+
- [UnixFS](../concepts/file-systems.md#unix-file-system-unixfs) for files and directories.
3939
- [dag-cbor](../concepts/glossary.md#dag-cbor) for json-like structured data with binary encoding. DAG-CBOR is an extension of CBOR that adds a "link" type for CIDs, allowing for the creation of interlinked CBOR objects (which can be used to form larger linked data structures).
4040

4141
### CID Determinism
4242

43-
One important thing to note is that **the same data can result in different CIDs** depending on a number of factors, including the hash function, the multicodec you use, and the multicodec. **This is especially true for files**, where the same file, hash function and multicodec can still result in different CIDs depending on the different options that UnixFS supports. See the [forum discussion](https://discuss.ipfs.tech/t/should-we-profile-cids/18507) for more details.
43+
One important thing to note is that **the same data can result in different CIDs** depending on a number of factors, including the hash function, the multicodec you use, and the multicodec. **This is especially true for files**, where the same file, hash function and multicodec can still result in different CIDs depending on the different options that UnixFS supports.
44+
45+
See the [forum discussion on CID profiles](https://discuss.ipfs.tech/t/should-we-profile-cids/18507) and the [DASL](https://dasl.ing/) initiative for more for more information on the nature of this problem and how the community is addressing it.
46+
47+
[DAG Builder](https://dag.ipfs.tech/) is a web app that visualises UnixFS and demonstrates how the same file can result in different CIDs, depending on the different options that UnixFS supports.
4448

4549
### Example: Addressing an object by CID with dag-cbor
4650

@@ -58,29 +62,46 @@ For example, to address an object by CID with the `dag-cbor` multicodec and `sha
5862
Addressing an image by CID with Helia and UnixFS</a> by Daniel Norman (<a href="https://codepen.io/2color">@2color</a>)
5963
</iframe>
6064

65+
## Retrieval
66+
67+
From a high level, there are several ways to retrieve data with IPFS in web applications:
68+
69+
- Using the [`Verified Fetch`](https://www.npmjs.com/package/@helia/verified-fetch) library, which was modelled after the `fetch` API and returns `Response` objects, with the main difference being that it allows you to fetch data by CID, abstracting away the details of content routing, transports and retrieval. For more examples and background see the [release blog post](https://blog.ipfs.tech/verified-fetch/).
70+
- Using the [`helia`](https://github.com/ipfs/helia/) library, which is the foundation for the `verified-fetch` library, and provides a more comprehensive and modular API for interacting with the IPFS network, beyond just retrieval.
71+
- Using public recursive gateways, e.g. `ipfs.io` with HTTP. This is not recommended for most use cases, because it forgoes the verifiability and trustlessness enabled by content addressing. Granted, it might be the easiest way to retrieve data in a web application, but is also the most fraught with security and centralization concerns.
72+
73+
### Example: Image retrieval with Verified Fetch
74+
75+
<iframe height="500" style="width: 100%;" scrolling="no" title="Fetch an image on IPFS Mainnet @helia/verified-fetch" src="https://codepen.io/2color/embed/QWXKZGx?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
76+
See the Pen <a href="https://codepen.io/2color/pen/QWXKZGx">
77+
Fetch an image on IPFS Mainnet @helia/verified-fetch</a> by Daniel Norman
78+
</iframe>
79+
6180
## Providing data
6281

63-
In the examples above you saw how to address data by CID. But what you do with it depends on your use case.
82+
For data to be retrievable by other peers on [IPFS Mainnet](../concepts/glossary.md#ipfs-mainnet) it will need to be uploaded to a pinning service or an IPFS node.
6483

65-
If you want to data to be retrievable by other peers on [Mainnet](../concepts/glossary.md#ipfs-mainnet) you will want to upload it to a pinning service or an IPFS node you run.
84+
When possible, it's best to rely on client-side merklization to address data by CID and then upload it to a pinning service or a node. [CAR files](#car-files) are a great way to do this, though they are not supported by all pinning services.
6685

6786
### You probably don't want to provide data from a browser
6887

69-
Browsers make for lousy servers. It's difficult to make a Web page a server, i.e. allow network incoming connections from other computers. There's one exception, namely WebRTC, however, it has many caveats.
88+
Browsers make for lousy servers. It's difficult to make a Web page a server, i.e. allow network incoming connections from other computers. WebRTC is the only exception, however, it has many caveats, and doesn't work in all networks.
7089

71-
For this reason, you should almost never count on providing data from a browser to work.
90+
For this reason, you should never count on providing data from a browser to work.
7291

7392
Instead, you should provide data from a long-running server that runs reliably and has a public IP. That can be a Kubo node that you run, or a [pinning service](../concepts/persistence.md#pinning-services).
7493

7594
### CAR files
7695

77-
CAR files offer a serialized representation of content-addressed resources in one single concatenated stream, alongside a header that describes that content. This makes them a great way to store content-addressed data in a way that is easy to transport and store.
96+
The Content Archive format is a way of packaging up content addressed data into archive files that can be easily stored and transferred over the network. You can think of them like TAR files that are designed for storing collections of content addressed data.
7897

79-
## Retrieval
98+
So why would you want to use CAR files?
8099

81-
### With Verified-fetch
100+
One of the main reasons is related to [CID determinism](#cid-determinism). As mentioned above, the same data can result in different CIDs, which can make it difficult to verify data without its content addressed representation. By packaging up the data into a CAR file, you can upload the CAR to multiple pinning services and nodes knowing they are providing the same data, while also reducing the trust on third party pinning services.
82101

83-
<iframe height="500" style="width: 100%;" scrolling="no" title="Fetch an image on IPFS Mainnet @helia/verified-fetch" src="https://codepen.io/2color/embed/QWXKZGx?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
84-
See the Pen <a href="https://codepen.io/2color/pen/QWXKZGx">
85-
Fetch an image on IPFS Mainnet @helia/verified-fetch</a> by Daniel Norman
102+
Car files are a great way to store content-addressed data in a way that is easy to transport and store, and Helia (and other implementations) allow you to both export and import any data you've addressed by CID into a CAR file.
103+
104+
<iframe height="300" style="width: 100%;" scrolling="no" title="CAR export with Helia and dag-cbor" src="https://codepen.io/2color/embed/EaYoegX?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
105+
See the Pen <a href="https://codepen.io/2color/pen/EaYoegX">
106+
CAR export with Helia and dag-cbor</a> by Daniel Norman (<a href="https://codepen.io/2color">@2color</a>)
86107
</iframe>

0 commit comments

Comments
 (0)