1. Journal Stack Home

LiveReload

This component is a reimplementation of Remix LiveReload component but with support for Remix PWA. It performs the same function as the original component, but it also updates the service worker when the browser detects a new version of the service worker (e.g when a change is made to a route with the worker thread present in it).

root.tsx
import { LiveReload } from "@remix-pwa/sw";

export default function Root() {
  return (
    <html>
      <head />
      <body>
        <LiveReload />
      </body>
    </html>
  );
}

You should know!

This component is for Remix v2 and above! If you are using Remix v1.x.x, keep reading.

If you are using Remix v1.x.x, you can use the LiveReloadV1 component instead.

root.tsx
import { LiveReloadV1 } from "@remix-pwa/sw";

export default function Root() {
  return (
    <html>
      <head />
      <body>
        <LiveReloadV1 />
      </body>
    </html>
  );
}