Convert Vanilla.js PWA (Progressive Web App) to a DWA (Decentralized Web App)

[blackgirlbytes]

Convert Vanilla PWA to a Decentralized Web App (DWA)

🔗 Dependencies

This issue is dependent on the completion of #85. Please ensure that issue is resolved before starting work on this task.

🚀 Goal

Begin the process of transforming our Vanilla.js Progressive Web App (PWA) into a Decentralized Web App (DWA) by setting up the necessary Web5 infrastructure.

🤔 Background

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 task will initiate the conversion of our existing Vanilla PWA to a DWA by setting up the basic Web5 components.

This is part of our larger project to create a Vanilla.js DWA starter. See our main issue here for the full context and list of all related tasks.

Important: For reference, please see the DWA React Vite starter app. While the implementation details will differ for Vanilla, this example provides a good overview of the structure and functionalities of a DWA.

🔑 Tasks and Acceptance Criteria

❗You must only assign yourself one task at a time to give everyone a chance to participate.❗

You may assign yourself your next task after your current task is reviewed & accepted.

• Install the @web5/api package https://www.npmjs.com/package/@web5/api
• Import and implement activatePolyfills from @web5/api in the main application file
• Update the service worker to include Web5 polyfills:
  • Import activatePolyfills in the service worker
  • Implement activatePolyfills with appropriate cache TTL settings
• Verify that the app still functions as a PWA after these changes

🌟 Resources

• Web5 DWA documentation
• DWA Starter App Example
• Vanilla JS Documentation
• Progressive Web Apps (PWAs) | MDN

💻 Code Snippets

Importing and Activating Polyfills

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

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

Service Worker Configuration (example)

/// <reference lib="webworker" />
import {
  cleanupOutdatedCaches,
  createHandlerBoundToURL,
  precacheAndRoute,
} from "workbox-precaching";
import { NavigationRoute, registerRoute } from "workbox-routing";
import { activatePolyfills } from "@web5/api";

declare let self: ServiceWorkerGlobalScope;

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
});

precacheAndRoute(self.__WB_MANIFEST);
cleanupOutdatedCaches();

let allowlist;
if (import.meta.env.DEV) allowlist = [/^\/$/];

registerRoute(
  new NavigationRoute(createHandlerBoundToURL("index.html"), { allowlist })
);

activatePolyfills({
  onCacheCheck() {
    return {
      ttl: 30000,
    };
  },
});

Getting Started

1. Comment ".take" on this issue to get assigned
2. Fork the repository and create a new branch for this task
3. Follow the tasks outlined above
4. Submit a pull request with your changes
5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉