@scrabble-solver/scrabble-solver 2.16.7 → 2.18.0

package/src/pages/index.tsx

@@ -1,31 +1,53 @@
-/* eslint-disable max-statements */
+/* eslint-disable max-lines, max-statements */
 
+import { games } from '@scrabble-solver/configs';
 import { isObject } from '@scrabble-solver/types';
 import { execSync } from 'child_process';
 import fs from 'fs';
+import dynamic from 'next/dynamic';
 import path from 'path';
-import { type FunctionComponent, useCallback, useState } from 'react';
-import ReactModal from 'react-modal';
+import { type FunctionComponent, useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Logo, NavButtons, Solver } from '@/components';
-import { useDirection, useEffectOnce, useLanguage, useLocalStorage } from '@/hooks';
-import { LOCALE_FEATURES } from '@/i18n';
-import {
-  DictionaryModal,
-  KeyMapModal,
-  MenuModal,
-  RemainingTilesModal,
-  ResultsModal,
-  SettingsModal,
-  WordsModal,
-} from '@/modals';
+import { Logo } from '@/components/Logo';
+import { NavButtons } from '@/components/NavButtons';
+import { Solver } from '@/components/Solver';
+import { useDirection } from '@/hooks/useDirection';
+import { useEffectOnce } from '@/hooks/useEffectOnce';
+import { useLanguage } from '@/hooks/useLanguage';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { schedulePreloadModals } from '@/modals/preload';
+import { CONFIG_PENDING_CLASS } from '@/parameters';
 import { registerServiceWorker } from '@/serviceWorkerManager';
-import { initialize, reset, selectConfig, selectLocale, useTypedSelector } from '@/state';
+import { initialize, reset, selectConfig, selectIsHydrated, selectLocale, useTypedSelector } from '@/state';
 
 import styles from './index.module.scss';
 
-ReactModal.setAppElement('#__next');
+const DictionaryModal = dynamic(() => import('@/modals/DictionaryModal').then((module) => module.DictionaryModal), {
+  ssr: false,
+});
+const KeyMapModal = dynamic(() => import('@/modals/KeyMapModal').then((module) => module.KeyMapModal), {
+  ssr: false,
+});
+const MenuModal = dynamic(() => import('@/modals/MenuModal').then((module) => module.MenuModal), {
+  ssr: false,
+});
+const RemainingTilesModal = dynamic(
+  () => import('@/modals/RemainingTilesModal').then((module) => module.RemainingTilesModal),
+  {
+    ssr: false,
+  },
+);
+const ResultsModal = dynamic(() => import('@/modals/ResultsModal').then((module) => module.ResultsModal), {
+  ssr: false,
+});
+const SettingsModal = dynamic(() => import('@/modals/SettingsModal').then((module) => module.SettingsModal), {
+  ssr: false,
+});
+const WordsModal = dynamic(() => import('@/modals/WordsModal').then((module) => module.WordsModal), {
+  ssr: false,
+});
 
 interface Props {
   version: string;
@@ -37,7 +59,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const dispatch = useDispatch();
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
-  const [isClient, setIsClient] = useState(false);
+  const isHydrated = useTypedSelector(selectIsHydrated);
   const [modals, setModals] = useState<Record<Modal, boolean>>({
     dictionary: false,
     keyMap: false,
@@ -47,9 +69,26 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     settings: false,
     words: false,
   });
+  const [mountedModals, setMountedModals] = useState<Partial<Record<Modal, boolean>>>({});
 
   const patchModals = useCallback((patch: Partial<Record<Modal, boolean>>) => {
     setModals((current) => ({ ...current, ...patch }));
+    setMountedModals((current) => {
+      const newModals = Object.keys(patch) as Modal[];
+      const newOpenedModals = newModals.filter((modal) => patch[modal] && !current[modal]);
+
+      if (newOpenedModals.length === 0) {
+        return current;
+      }
+
+      const mounted = { ...current };
+
+      for (const modal of newOpenedModals) {
+        mounted[modal] = true;
+      }
+
+      return mounted;
+    });
   }, []);
 
   const handleClear = useCallback(() => dispatch(reset()), [dispatch]);
@@ -73,20 +112,39 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   useLanguage(locale);
   useLocalStorage();
 
+  useEffect(() => {
+    const root = document.documentElement;
+    const variables = [
+      { name: '--board-cols', value: config.boardWidth, defaultValue: games.scrabble.boardWidth },
+      { name: '--board-rows', value: config.boardHeight, defaultValue: games.scrabble.boardHeight },
+      { name: '--rack-size', value: config.rackSize, defaultValue: games.scrabble.rackSize },
+    ];
+
+    for (const { name, value, defaultValue } of variables) {
+      const current = root.style.getPropertyValue(name) || String(defaultValue);
+
+      if (current !== String(value)) {
+        root.style.setProperty(name, String(value));
+      }
+    }
+  }, [config.boardHeight, config.boardWidth, config.rackSize]);
+
+  useEffect(() => {
+    if (isHydrated) {
+      document.documentElement.classList.remove(CONFIG_PENDING_CLASS);
+    }
+  }, [isHydrated]);
+
   useEffectOnce(() => {
     if (process.env.NODE_ENV === 'production') {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       registerServiceWorker();
     }
 
-    setIsClient(true);
-    dispatch(initialize());
+    dispatch(initialize({ version }));
+    schedulePreloadModals();
   });
 
-  if (!isClient) {
-    return null;
-  }
-
   return (
     <>
       <nav className={styles.nav}>
@@ -112,28 +170,30 @@ const Index: FunctionComponent<Props> = ({ version }) => {
         <Solver className={styles.solver} onShowResults={handleShowResults} />
       </main>
 
-      <MenuModal
-        isOpen={modals.menu}
-        onClose={handleCloseMenu}
-        onShowDictionary={handleShowDictionary}
-        onShowRemainingTiles={handleShowRemainingTiles}
-        onShowSettings={handleShowSettings}
-        onShowWords={handleShowWords}
-      />
+      {mountedModals.menu && (
+        <MenuModal
+          isOpen={modals.menu}
+          onClose={handleCloseMenu}
+          onShowDictionary={handleShowDictionary}
+          onShowRemainingTiles={handleShowRemainingTiles}
+          onShowSettings={handleShowSettings}
+          onShowWords={handleShowWords}
+        />
+      )}
 
-      <SettingsModal isOpen={modals.settings} onClose={handleCloseSettings} />
+      {mountedModals.settings && <SettingsModal isOpen={modals.settings} onClose={handleCloseSettings} />}
 
-      <KeyMapModal isOpen={modals.keyMap} onClose={handleCloseKeyMap} />
+      {mountedModals.keyMap && <KeyMapModal isOpen={modals.keyMap} onClose={handleCloseKeyMap} />}
 
-      <WordsModal isOpen={modals.words} onClose={handleCloseWords} />
+      {mountedModals.words && <WordsModal isOpen={modals.words} onClose={handleCloseWords} />}
 
-      {config.supportsRemainingTiles && (
+      {config.supportsRemainingTiles && mountedModals.remainingTiles && (
         <RemainingTilesModal isOpen={modals.remainingTiles} onClose={handleCloseRemainingTiles} />
       )}
 
-      <ResultsModal isOpen={modals.results} onClose={handleCloseResults} />
+      {mountedModals.results && <ResultsModal isOpen={modals.results} onClose={handleCloseResults} />}
 
-      <DictionaryModal isOpen={modals.dictionary} onClose={handleCloseDictionary} />
+      {mountedModals.dictionary && <DictionaryModal isOpen={modals.dictionary} onClose={handleCloseDictionary} />}
     </>
   );
 };

package/src/pages/not-found.tsx

@@ -1,5 +1,5 @@
 'use-client';
 
-import { NotFound } from '@/components';
+import { NotFound } from '@/components/NotFound';
 
 export default NotFound;

package/src/parameters/index.ts

@@ -1,5 +1,4 @@
 import variables from '@/styles/variables.module.scss';
-import { ResultColumnId } from '@/types';
 
 export const BREAKPOINTS = {
   xs: Number(variables.breakpointXs),
@@ -9,97 +8,52 @@ export const BREAKPOINTS = {
   xl: Number(variables.breakpointXl),
 };
 
-export const TRANSITION = 'var(--transition)';
-
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
-export const TRANSITION_DURATION = Number(variables.transitionDuration);
+// Must match the class name in global.scss
+export const CONFIG_PENDING_CLASS = 'config-pending';
+
 export const TRANSITION_DURATION_LONG = Number(variables.transitionDurationLong);
 
-export const COLOR_BLUE = variables.colorBlue;
-export const COLOR_GREEN = variables.colorGreen;
-export const COLOR_RED = variables.colorRed;
-export const COLOR_YELLOW = variables.colorYellow;
-
-export const COLOR_BONUS_CHARACTER_1 = variables.colorYellowLight;
-export const COLOR_BONUS_CHARACTER_2 = variables.colorGreenLight;
-export const COLOR_BONUS_CHARACTER_3 = variables.colorBlueLight;
-export const COLOR_BONUS_CHARACTER_5 = variables.colorRedLight;
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_2 = variables.colorBonusCharacterMultiplier2;
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_3 = variables.colorBonusCharacterMultiplier3;
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_4 = variables.colorBonusCharacterMultiplier4;
-export const COLOR_BONUS_START = variables.colorVioletLight;
-export const COLOR_BONUS_WORD_MULTIPLIER_2 = variables.colorBonusWordMultiplier2;
-export const COLOR_BONUS_WORD_MULTIPLIER_3 = variables.colorBonusWordMultiplier3;
-export const COLOR_BONUS_WORD_MULTIPLIER_4 = variables.colorBonusWordMultiplier4;
-export const COLOR_FILTERED = variables.colorForegroundSecondary;
+export const COLOR_BLUE = 'var(--color--blue)';
+export const COLOR_GREEN = 'var(--color--green)';
+export const COLOR_RED = 'var(--color--red)';
+export const COLOR_YELLOW = 'var(--color--yellow)';
+
 export const COLOR_BACKGROUND = variables.colorBackground;
+export const COLOR_BONUS_START = variables.colorVioletLight;
 
 export const COLOR_BONUS_CHARACTER: Record<number, string> = {
-  1: COLOR_BONUS_CHARACTER_1,
-  2: COLOR_BONUS_CHARACTER_2,
-  3: COLOR_BONUS_CHARACTER_3,
-  5: COLOR_BONUS_CHARACTER_5,
+  1: variables.colorYellowLight,
+  2: variables.colorGreenLight,
+  3: variables.colorBlueLight,
+  5: variables.colorRedLight,
 };
 
 export const COLOR_BONUS_CHARACTER_MULTIPLIER: Record<number, string> = {
-  2: COLOR_BONUS_CHARACTER_MULTIPLIER_2,
-  3: COLOR_BONUS_CHARACTER_MULTIPLIER_3,
-  4: COLOR_BONUS_CHARACTER_MULTIPLIER_4,
+  2: variables.colorBonusCharacterMultiplier2,
+  3: variables.colorBonusCharacterMultiplier3,
+  4: variables.colorBonusCharacterMultiplier4,
 };
 
 export const COLOR_BONUS_WORD: Record<number, string> = {
-  2: COLOR_BONUS_WORD_MULTIPLIER_2,
-  3: COLOR_BONUS_WORD_MULTIPLIER_3,
-  4: COLOR_BONUS_WORD_MULTIPLIER_4,
+  2: variables.colorBonusWordMultiplier2,
+  3: variables.colorBonusWordMultiplier3,
+  4: variables.colorBonusWordMultiplier4,
 };
 
-export const SPACING_XS = Number(variables.spacingXs);
-export const SPACING_S = Number(variables.spacingS);
-export const SPACING_M = Number(variables.spacingM);
-export const SPACING_L = Number(variables.spacingL);
-export const SPACING_XL = Number(variables.spacingXl);
-
-export const COMPONENTS_SPACING = SPACING_XL;
-export const COMPONENTS_SPACING_SMALL = SPACING_L;
-
-export const RACK_TILE_SIZE_MAX = 80;
-
 export const BOARD_CELL_ACTIONS_OFFSET = 3;
-export const BOARD_CELL_BORDER_WIDTH = 1;
-export const BOARD_TILE_FONT_SIZE_MIN = 14;
-export const BOARD_TILE_FONT_SIZE_POINTS_MIN = 10;
-export const BOARD_TILE_SIZE_MAX = RACK_TILE_SIZE_MAX;
 
-export const BORDER_COLOR = variables.borderColor;
 export const BORDER_COLOR_LIGHT = variables.borderColorLight;
-export const BORDER_RADIUS = Number(variables.borderRadius);
 export const BORDER_WIDTH = Number(variables.borderWidth);
 
-export const BUTTON_ICON_SIZE = Number(variables.buttonIconSize);
-export const BUTTON_PADDING_VERTICAL = SPACING_M;
-export const BUTTON_HEIGHT = BUTTON_ICON_SIZE + 2 * BUTTON_PADDING_VERTICAL + 2 * BORDER_WIDTH;
-
-export const DICTIONARY_HEIGHT = Number(variables.dictionaryHeight);
-export const DICTIONARY_HEIGHT_MOBILE = Number(variables.dictionaryHeightMobile);
-
-export const LOGO_ASPECT_RATIO = 682 / 166;
-export const LOGO_HEIGHT = Number(variables.logoHeight);
-export const LOGO_HEIGHT_SMALL = Number(variables.logoHeightSmall);
+export const LOGO_HEIGHT = 166;
 export const LOGO_SRC = '/logo.svg';
+export const LOGO_WIDTH = 682;
 
-export const MODAL_WIDTH = Number(variables.modalWidth);
-export const MODAL_HEADER_HEIGHT = 45;
-
-export const NAV_PADDING = SPACING_L;
-
-export const TILE_SIZE = 80;
-
-export const TOOLTIP_DURATION = TRANSITION_DURATION;
+export const TOOLTIP_DURATION = Number(variables.transitionDuration);
 
 export const PLAIN_TILES_COLOR_DEFAULT = COLOR_GREEN;
-export const PLAIN_TILES_PADDING_HORIZONTAL = 0;
-export const PLAIN_TILES_PADDING_VERTICAL = 0;
 export const PLAIN_TILES_POINTS_COLORS: Record<number, string> = {
   1: COLOR_YELLOW,
   2: COLOR_GREEN,
@@ -113,31 +67,8 @@ export const PLAIN_TILES_POINTS_COLORS: Record<number, string> = {
   10: COLOR_RED,
 };
 export const PLAIN_TILES_TILE_MARGIN = 6;
-export const PLAIN_TILES_TILE_MAX_ROTATE = 0;
-export const PLAIN_TILES_TILE_MAX_SCATTER = 0;
 export const PLAIN_TILES_TILE_SIZE = 80;
-export const PLAIN_TILES_VERSION_TILE_COLOR = COLOR_GREEN;
-export const PLAIN_TILES_VERSION_TILE_SIZE = TILE_SIZE;
-
-export const PROGRESS_COLOR_VALUE = 'var(--color--violet--light)';
-export const PROGRESS_COLOR_BACKGROUND = 'var(--color--inactive)';
-
-export const REMAINING_TILES_TILE_SIZE = 50;
-
-export const RESULTS_COLUMN_WIDTH: Record<ResultColumnId, number | undefined> = {
-  [ResultColumnId.BlanksCount]: 55,
-  [ResultColumnId.ConsonantsCount]: 55,
-  [ResultColumnId.Coordinates]: 55,
-  [ResultColumnId.Points]: 80,
-  [ResultColumnId.TilesCount]: 55,
-  [ResultColumnId.VowelsCount]: 55,
-  [ResultColumnId.Word]: undefined,
-  [ResultColumnId.WordsCount]: 55,
-};
-export const RESULTS_ITEM_HEIGHT = Number(variables.resultsItemHeight);
 
-export const RESULTS_HEADER_HEIGHT = RESULTS_ITEM_HEIGHT;
-
-export const SOLVER_COLUMN_WIDTH = Number(variables.solverColumnWidth);
+export const RESULTS_ITEM_HEIGHT = Number(variables.resultsItemHeight);
 
-export const TEXT_INPUT_HEIGHT = Number(variables.textInputHeight);
+export const RESULTS_OVERSCAN_COUNT = 10;

package/src/sdk/solve.ts

@@ -1,19 +1,25 @@
-import { type BoardJson, type Locale, Result, type ResultJson } from '@scrabble-solver/types';
+import { Board, type BoardJson, type Game, type Locale, Result, type ResultJson } from '@scrabble-solver/types';
+
+import { solveLocally } from '@/solver-worker';
 
 import { fetchJson } from './fetchJson';
 
 interface Payload {
   board: BoardJson;
   characters: string[];
-  game: string;
+  game: Game;
   locale: Locale;
 }
 
 export const solve = async ({ board, characters, game, locale }: Payload): Promise<Result[]> => {
-  const json = await fetchJson<ResultJson[]>('/api/solve', {
-    method: 'POST',
-    body: JSON.stringify({ board, characters, game, locale }),
-  });
+  const payload = { board, characters, game, locale };
+  const json =
+    (await solveLocally(payload)) ??
+    (await fetchJson<ResultJson[]>('/api/solve', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    }));
 
-  return json.map(Result.fromJson);
+  const decodedBoard = Board.fromJson(board);
+  return json.map((result) => Result.fromJson(result, decodedBoard));
 };

package/src/sdk/verify.ts

@@ -1,10 +1,12 @@
-import { type BoardJson, type Locale } from '@scrabble-solver/types';
+import { type BoardJson, type Game, type Locale } from '@scrabble-solver/types';
+
+import { verifyLocally } from '@/solver-worker';
 
 import { fetchJson } from './fetchJson';
 
 interface Payload {
   board: BoardJson;
-  game: string;
+  game: Game;
   locale: Locale;
 }
 
@@ -14,8 +16,12 @@ interface Response {
 }
 
 export const verify = async ({ board, game, locale }: Payload): Promise<Response> => {
-  return fetchJson<Response>('/api/verify', {
-    method: 'POST',
-    body: JSON.stringify({ board, game, locale }),
-  });
+  const payload = { board, game, locale };
+  return (
+    (await verifyLocally(payload)) ??
+    fetchJson<Response>('/api/verify', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    })
+  );
 };

package/src/service-worker/appShell.test.ts

@@ -0,0 +1,86 @@
+import { afterAll, beforeEach, describe, expect, it } from 'bun:test';
+
+import { cacheAppShell, respondToNavigation } from './appShell';
+
+const entries = new Map<string, Response>();
+
+let respond: () => Promise<Response> = () => Promise.resolve(html('shell'));
+
+const globals = { caches: globalThis.caches, fetch: globalThis.fetch };
+
+Object.assign(globalThis, {
+  caches: createCacheStorage(entries),
+  fetch: () => respond(),
+});
+
+afterAll(() => {
+  Object.assign(globalThis, globals);
+});
+
+describe('respondToNavigation', () => {
+  beforeEach(() => {
+    entries.clear();
+    respond = () => Promise.resolve(html('shell'));
+  });
+
+  it('serves the network response while online', async () => {
+    await cacheAppShell();
+    respond = () => Promise.resolve(html('deployed shell'));
+    const response = await respondToNavigation({ request: navigation('/') });
+    expect(await response.text()).toEqual('deployed shell');
+  });
+
+  it('serves the shell cached on install when the network is gone', async () => {
+    await cacheAppShell();
+    respond = () => Promise.reject(new Error('offline'));
+    const response = await respondToNavigation({ request: navigation('/') });
+    expect(await response.text()).toEqual('shell');
+  });
+
+  it('serves the shell for any navigated path', async () => {
+    await cacheAppShell();
+    respond = () => Promise.reject(new Error('offline'));
+    const response = await respondToNavigation({ request: navigation('/not-found') });
+    expect(await response.text()).toEqual('shell');
+  });
+
+  /**
+   * The cached shell links to the chunks precached next to it, so a navigation
+   * must not replace it with HTML from a build this worker did not precache.
+   */
+  it('keeps the installed shell when a newer one is served from the network', async () => {
+    await cacheAppShell();
+    respond = () => Promise.resolve(html('deployed shell'));
+    await respondToNavigation({ request: navigation('/') });
+
+    respond = () => Promise.reject(new Error('offline'));
+    const response = await respondToNavigation({ request: navigation('/') });
+    expect(await response.text()).toEqual('shell');
+  });
+
+  it('rethrows when there is nothing to fall back on', async () => {
+    respond = () => Promise.reject(new Error('offline'));
+    const error = await respondToNavigation({ request: navigation('/') }).catch((reason: Error) => reason);
+    expect(error).toEqual(new Error('offline'));
+  });
+});
+
+function navigation(url: string): Request {
+  return new Request(new URL(url, 'https://scrabble-solver.org'));
+}
+
+function html(body: string): Response {
+  return new Response(body, { headers: { 'Content-Type': 'text/html; charset=utf-8' } });
+}
+
+function createCacheStorage(cacheEntries: Map<string, Response>): CacheStorage {
+  return {
+    open: (name: string) =>
+      Promise.resolve({
+        add: async (url: string) => {
+          cacheEntries.set(`${name} ${url}`, await globalThis.fetch(url));
+        },
+        match: (url: string) => Promise.resolve(cacheEntries.get(`${name} ${url}`)?.clone()),
+      }),
+  } as unknown as CacheStorage;
+}

package/src/service-worker/appShell.ts

@@ -0,0 +1,39 @@
+import { NavigationRoute, registerRoute } from 'workbox-routing';
+
+const APP_SHELL_CACHE = 'app-shell';
+const APP_SHELL_URL = '/';
+
+/**
+ * Caching the shell on install instead of on navigation pins it to the same build
+ * as the chunks precached alongside it, and covers the first visit, whose
+ * navigation happens before this worker controls the page.
+ */
+export async function cacheAppShell(): Promise<void> {
+  const cache = await caches.open(APP_SHELL_CACHE);
+  await cache.add(APP_SHELL_URL);
+}
+
+export function routeNavigations(): void {
+  registerRoute(new NavigationRoute(respondToNavigation, { denylist: [/^\/api\//] }));
+}
+
+/**
+ * A deploy has to reach online users on their next navigation (see the revalidation
+ * headers in next.config.js), so the shell only stands in when the network is gone.
+ * Solving keeps working from there, off the dictionary the solver worker holds in
+ * the Cache API.
+ */
+export async function respondToNavigation({ request }: { request: Request }): Promise<Response> {
+  try {
+    return await fetch(request);
+  } catch (error) {
+    const cache = await caches.open(APP_SHELL_CACHE);
+    const appShell = await cache.match(APP_SHELL_URL);
+
+    if (!appShell) {
+      throw error;
+    }
+
+    return appShell;
+  }
+}

package/src/service-worker/index.ts

@@ -2,12 +2,12 @@
 
 import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';
 
-import { routeSolveRequests } from './routeSolveRequests';
-import { routeVerifyRequests } from './routeVerifyRequests';
+import { cacheAppShell, routeNavigations } from './appShell';
 
 declare const self: ServiceWorkerGlobalScope;
 
-self.addEventListener('install', () => {
+self.addEventListener('install', (event) => {
+  event.waitUntil(cacheAppShell());
   // eslint-disable-next-line @typescript-eslint/no-floating-promises
   self.skipWaiting();
 });
@@ -19,5 +19,4 @@ self.addEventListener('activate', () => {
 
 cleanupOutdatedCaches();
 precacheAndRoute(self.__WB_MANIFEST);
-routeSolveRequests();
-routeVerifyRequests();
+routeNavigations();

package/src/serviceWorkerManager.ts

@@ -1,26 +1,12 @@
-import { Workbox } from 'workbox-window';
-
-let serviceWorker: Workbox | null = null;
+import { waitForIdle } from '@/lib/waitForIdleOrFirstIntent';
 
 export const registerServiceWorker = async () => {
   if (!globalThis.navigator || !('serviceWorker' in globalThis.navigator)) {
     return;
   }
 
-  serviceWorker = new Workbox('/service-worker.js');
-  await serviceWorker.register({ immediate: true });
-};
-
-export const getServiceWorker = async (): Promise<Workbox | null> => {
-  if (process.env.NODE_ENV !== 'production') {
-    return null;
-  }
-
-  if (serviceWorker) {
-    return serviceWorker;
-  }
-
-  await registerServiceWorker();
-
-  return serviceWorker;
+  // Registration waits for load+idle so the install's precache downloads never compete with page resources
+  await waitForIdle();
+  const { Workbox } = await import('workbox-window');
+  await new Workbox('/service-worker.js').register();
 };