[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

[osintalex]

Some more information on this in case anyone stumbles across it...

1. You don't actually need to register the service worker in your react app, the replay web page component does this for you. So what I wrote above was incorrect. All you need is the <script> tag to load in the ui.js file and the sw.js file in your app somewhere.
2. Replay web page component plays very badly with react router. It needs to access wherever you put the /replay/sw.js or /replay/ui.js files (presumably they are in public for react) but it mustn't intercept any other requests to /replay/ since the service worker intercepts all of these to playback the embedded content.

You probably need to do something like this https://stackoverflow.com/questions/38062265/prevent-react-router-from-routing-a-server-api-path to get it working - i.e. allow requests to /replay/sw.js and /replay/ui.js but don't render the app with react router for other requests that would match a \/replay\/* regex.