[PWA] Service Worker in React Router v7 | Remix | Page 1

gusty glade Aug 2, 2025, 4:38 PM

#

Is there a way to compile/build/generate a service worker file (from a TypeScript file) that is deployed along side the app so that it can be registered on the client via navigator.serviceWorker.register("/sw.js")?

Ideally so that pnpm dev and pnpm build already take care of building that (so I'm assuming with a Vite plugin)?

narrow ruin Aug 2, 2025, 4:56 PM

#

It's a vite plugin, yeah. You still have full control of the vite config, so you can add whatever you need there to support building/bundling the service worker entrypoint.

gusty glade Aug 2, 2025, 4:59 PM

#

narrow ruin It's a `vite` plugin, yeah. You still have full control of the `vite` config, so...

I can't seem to find any plugin that allows me to build a separate sw.js file from a sw.ts file

#

I was wondering if anybody else in my situation were successful

narrow ruin Aug 2, 2025, 5:00 PM

#

https://vite-pwa-org.netlify.app/ seems to be pretty popular

Vite Plugin PWA

Zero-config PWA Framework-agnostic Plugin for Vite and Integrations

gusty glade Aug 2, 2025, 5:01 PM

#

@narrow ruin Doesn't seem to support React Router v7 for some reason: https://github.com/vite-pwa/vite-plugin-pwa/issues/809

GitHub

Feature Request: Vite PWA Support for React Router 7 · Issue #809 ...

Hi React Router has recently merged with Remix, introducing new features and improvements in version 7. However, it is unclear how to properly configure Vite PWA to work seamlessly with React Route...

narrow ruin Aug 2, 2025, 5:55 PM

#

Looks like you can get use the ?worker&url import suffix to get at the file as a URL:

import swUrl from './sw?worker&url';

navigator.serviceWorker.register(swUrl);

From the vite docs:

vitejs

Features

Next Generation Frontend Tooling

#

the section is oriented towards Web Workers but it seems to do what you want

#[PWA] Service Worker in React Router v7