Merge branch 'main' of https://github.com/remix-pwa/sw

src/react/loader.ts

@@ -11,18 +11,21 @@ declare global {
 
 export type LoadServiceWorkerOptions = RegistrationOptions & {
  serviceWorkerUrl?: string;
+ serviceWorkerregistraionCallback?: (
+ registration: ServiceWorkerRegistration
+ ) => Promise<void> | void;
 };
 
-
 /**
  * Load service worker in `entry.client` when the client gets hydrated.
  *
  * All parameters are optional.
  *
  * @param options - Options for loading the service worker.
  * @param options.serviceWorkerUrl='/entry.worker.js' - URL of the service worker.
+ * @param options.serviceWorkerregistraionCallback - Callback function when the service worker gets registered.
  * @param ...options.registrationOptions - Options for the service worker registration.
- * @returns 
+ * @returns
  * ```ts
  * loadServiceWorker({
  * scope: "/",
@@ -31,38 +34,47 @@ export type LoadServiceWorkerOptions = RegistrationOptions & {
  * ```
  */
 export function loadServiceWorker(
- {serviceWorkerUrl, ...options}: LoadServiceWorkerOptions = {
+ {
+ serviceWorkerUrl,
+ serviceWorkerregistraionCallback,
+ ...options
+ }: LoadServiceWorkerOptions = {
  scope: '/',
- serviceWorkerUrl: '/entry.worker.js'
+ serviceWorkerUrl: '/entry.worker.js',
+ serviceWorkerregistraionCallback: () => {}
  }
 ) {
  if ('serviceWorker' in navigator) {
  async function register() {
+ const syncRemixManifest = (
+ serviceWorker: ServiceWorkerContainer = navigator.serviceWorker
+ ) => {
+ serviceWorker.controller?.postMessage({
+ type: 'SYNC_REMIX_MANIFEST',
+ manifest: window.__remixManifest
+ });
+ };
+
  try {
- await navigator.serviceWorker
- //@ts-ignore
- .register(serviceWorkerUrl, options)
- .then(() => navigator.serviceWorker.ready)
- .then(() => {
+ const registration = await navigator.serviceWorker.register(
+ serviceWorkerUrl!,
+ options
+ );
+
+ await serviceWorkerregistraionCallback?.(registration);
+
+ await navigator.serviceWorker.ready;
+
+ logger.debug('Syncing manifest...');
+
+ if (navigator.serviceWorker.controller) {
+ syncRemixManifest();
+ } else {
+ navigator.serviceWorker.addEventListener('controllerchange', () => {
  logger.debug('Syncing manifest...');
- if (navigator.serviceWorker.controller) {
- navigator.serviceWorker.controller.postMessage({
- type: 'SYNC_REMIX_MANIFEST',
- manifest: window.__remixManifest
- });
- } else {
- navigator.serviceWorker.addEventListener(
- 'controllerchange',
- () => {
- logger.debug('Syncing manifest...');
- navigator.serviceWorker.controller?.postMessage({
- type: 'SYNC_REMIX_MANIFEST',
- manifest: window.__remixManifest
- });
- }
- );
- }
+ syncRemixManifest();
  });
+ }
  } catch (error) {
  // console.error('Service worker registration failed', error);
  }
@@ -77,4 +89,4 @@ export function loadServiceWorker(
  window.addEventListener('load', register);
  }
  }
-}
+}