From f9cf8fd1eeae381bfc1b7593b10b7e481397a663 Mon Sep 17 00:00:00 2001
From: Juan Pablo Garcia Ripa <sarabadu@gmail.com>
Date: Thu, 17 Aug 2023 19:05:28 +0200
Subject: [PATCH] feat(swLoader): add an optional registration cb

Co-authored-by: Luciano Fantone <luciano.alvarezfantone@sas.se>
Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>
---
 src/react/loader.ts | 66 ++++++++++++++++++++++++++-------------------
 1 file changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/react/loader.ts b/src/react/loader.ts
index 0854c68..a3841d2 100644
--- a/src/react/loader.ts
+++ b/src/react/loader.ts
@@ -11,9 +11,11 @@ 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.
  *
@@ -21,8 +23,9 @@ export type LoadServiceWorkerOptions = RegistrationOptions & {
  *
  * @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);
     }
   }
-}
\ No newline at end of file
+}