.. and press ENTER to ask a question on web5, how to write code and more.

Skip to main content

Access Data with DRLs

A Decentralized Web App (DWA) is a Progressive Web App (PWA) that incorporates Web5 functionalities, providing offline capabilities and offline synchronization of Decentralized Web Nodes (DWNs).

This guide will walk you through how to read from DWNs within your DWA via Decentralized Resource Locators (DRLs). For a practical implementation, refer to the DWA starter app.

Import package​

Import the following package to handle interactions with DWNs and manage offline data:

import { activatePolyfills } from '@web5/api';

Set up a service worker​

Service workers enable offline functionality and background processing.

The following snippet configures a service worker to activate polyfills, manage caching, and handle data synchronization tasks in the background:

// Activate Web5 Service Worker Polyfills
activatePolyfills({
onCacheCheck() {
return {
ttl: 30000,
};
},
});

Fetch data via DRLs​

Decentralized Resource Locators (DRLs) enable direct read access to permissioned data stored in DWNs. To read records from a DWN, you can use DRLs (prefixed with https://dweb) to fetch the data.

Here's how to fetch an image record from a DWN using a DRL:

Display fetched data in app​

DRLs return data that can be used throughout your web app, from populating UI elements to setting attributes on HTML tags.

This example demonstrates directly setting a fetched image URL as the source attribute in an HTML img tag:

Connect with us on Discord

Submit feedback: Open a GitHub issue

Edit this page: GitHub Repo

Contribute: Contributing Guide