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/browser';

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:

No snippet found for javascript

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:

No snippet found for javascript