Installation Guide

⚡ 2 min read

Step-by-step guide for installing and setting up the Web App Kit (PWA)

Current requirement: PWA installability (manifest, service worker, webworker.js) is wired through HTML / CDN—add the tags below to your document (or equivalent early load, e.g. Next.js beforeInteractive). The npm SDK alone does not enable this PWA path. For Authentication-only integration without PWA, see Quick Integration.

Web App Toolkit Cluster (PWA) Setup

For installable PWA with home screen icon and splash screen:

1. Add to your HTML


<link rel="manifest" href="https://cdn.transcodes.link/YOUR_PROJECT_ID/manifest.json" />
<script
  type="module"
  src="https://cdn.transcodes.link/YOUR_PROJECT_ID/webworker.js"
></script>

2. Add Service Worker (sw.js)

sw.js is the Service Worker file required for PWA installability (home screen icon, standalone window). The browser registers it to enable “Add to Home Screen”.

You can either download the file or create a one-liner script. Place it so it is served at the root: https://yourdomain.com/sw.js (e.g., in the public/ directory for Vite or Next.js).

Option A: One-liner script (Recommended) Create public/sw.js and add this single line:

public/sw.js


importScripts('https://cdn.transcodes.link/{YOUR_PROJECT_ID}/sw.js');

Option B: Download the file

Download sw.js from the Transcodes Dashboard
Place it in your public/ directory so it is served at /sw.js

Next Steps

Configuration - Configure your app settings
Quick Integration - Framework-specific integration guides