[Feature]: Document how to embed in a react app

[osintalex]

Context

I just got this working in a react app. It was not that difficult but it took me a long time since much of the react documentation on how to do this for progressive web apps. i.e. if you google how to add a service worker to a react app you get a lot of information on PWA create-react-app magic which is irrelevant. This obfuscates how you actually add a custom service worker to a react app since you get buried in different webpack/vite/rollup magic etc.

Given how popular react is, I think it might be useful to have a specific section in the docs on how to do this for a static react site. Perhaps the docs could be added to over time with information for different stacks - something similar to https://elilambnz.github.io/react-py/docs/introduction/vite-usage.

What change would you like to see?

Small docs section that includes this information on configuration in a SPA react app with vite:

• Add <script src="https://cdn.jsdelivr.net/npm/[email protected]/ui.js"></script> to index.html
• Create a replay/sw.js file in public/ that contains only this:

importScripts("https://cdn.jsdelivr.net/npm/[email protected]/sw.js");

• Add these lines to your application entrypoint, e.g. main.tsx/main.jsx:

navigator.serviceWorker
.register("/replay/sw.js")
.then((registration) =>
  console.log(
    "Service Worker registration successful with scope: ",
    registration.scope
  )
)
.catch((err) => console.log("Service Worker registration failed: ", err));

• Add type declarations to vite-env.d.ts

/// <reference types="vite/client" />
import * as React from 'react'

interface ReplayWebPageProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
  source: string,
  url: string,
  // more stuff here
}
declare global {
    namespace JSX {
        interface IntrinsicElements {
            'replay-web-page': ReplayWebPageProps;
        }
    }
}

• Use component as you like

Requirements

No response

Todo

No response