record some info on my attempt to test a service worker

src/registerServiceWorker.ts

@@ -2,33 +2,32 @@
 
 import { register } from "register-service-worker";
 
-if (import.meta.env.NODE_ENV === "production") {
-  register("/sw_scripts-combined.js", {
-    ready() {
-      console.log(
-        "App is being served from cache by a service worker.\n" +
-          "For more details, visit https://goo.gl/AFskqB",
-      );
-    },
-    registered() {
-      console.log("Service worker has been registered.");
-    },
-    cached() {
-      console.log("Content has been cached for offline use.");
-    },
-    updatefound() {
-      console.log("New content is downloading.");
-    },
-    updated() {
-      console.log("New content is available; please refresh.");
-    },
-    offline() {
-      console.log(
-        "No internet connection found. App is running in offline mode.",
-      );
-    },
-    error(error) {
-      console.error("Error during service worker registration:", error);
-    },
-  });
-}
+// This used to be only done when: import.meta.env.NODE_ENV === "production"
+register("/sw_scripts-combined.js", {
+  ready() {
+    console.log(
+      "App is being served from cache by a service worker.\n" +
+        "For more details, visit https://goo.gl/AFskqB",
+    );
+  },
+  registered() {
+    console.log("Service worker has been registered.");
+  },
+  cached() {
+    console.log("Content has been cached for offline use.");
+  },
+  updatefound() {
+    console.log("New content is downloading.");
+  },
+  updated() {
+    console.log("New content is available; please refresh.");
+  },
+  offline() {
+    console.log(
+      "No internet connection found. App is running in offline mode.",
+    );
+  },
+  error(error) {
+    console.error("Error during service worker registration:", error);
+  },
+});

src/router/index.ts

@@ -189,6 +189,9 @@ const routes: Array<RouteRecordRaw> = [
     name: "shared-photo",
     component: () => import("@/views/SharedPhotoView.vue"),
   },
+
+  // /share-target is also an endpoint in the service worker
+
   {
     path: "/start",
     name: "start",

test-playwright/35-record-gift-from-image-share.spec.ts

@@ -1,5 +1,6 @@
 import path from 'path';
 import { test, expect } from '@playwright/test';
+import { importUser } from './testUtils';
 
 test('Record item given from image-share', async ({ page }) => {
 
@@ -8,11 +9,7 @@ test('Record item given from image-share', async ({ page }) => {
   // Combine title prefix with the random string
   const finalTitle = `Gift ${randomString} from image-share`;
 
-  // Create new ID using seed phrase "rigid shrug mobile…"
-  await page.goto('./start');
-  await page.getByText('You have a seed').click();
-  await page.getByPlaceholder('Seed Phrase').fill('rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage');
-  await page.getByRole('button', { name: 'Import' }).click();
+  await importUser(page, '00');
 
   // Record something given
   await page.goto('./test');
@@ -37,4 +34,36 @@ test('Record item given from image-share', async ({ page }) => {
   await page.goto('./');
   const item1 = page.locator('li').filter({ hasText: finalTitle });
   await expect(item1.getByRole('img')).toBeVisible();
-});
+});
+
+// // I believe there's a way to test this service worker feature.
+// // The following is what I got from ChatGPT. I wonder if it doesn't work because it's not registering the service worker correctly.
+//
+// test('Trigger a photo-sharing fetch event in service worker with POST to /share-target', async ({ page }) => {
+//   await importUser(page, '00');
+//
+//   // Create a FormData object with a photo
+//   const photoPath = path.join(__dirname, '..', 'public', 'img', 'icons', 'android-chrome-192x192.png');
+//   const photoContent = await fs.readFileSync(photoPath);
+//   const [response] = await Promise.all([
+//     page.waitForResponse(response => response.url().includes('/share-target')), // also check for response.status() === 303 ?
+//     page.evaluate(async (photoContent) => {
+//       const formData = new FormData();
+//       formData.append('photo', new Blob([photoContent], { type: 'image/png' }), 'test-photo.jpg');
+//
+//       const response = await fetch('/share-target', {
+//         method: 'POST',
+//         body: formData,
+//       });
+//
+//       return response;
+//     }, photoContent)
+//   ]);
+//
+//   // Verify the response redirected to /shared-photo
+//   //expect(response.status).toBe(303);
+//   console.log('response headers', response.headers());
+//   console.log('response status', response.status());
+//   console.log('response url', response.url());
+//   expect(response.url()).toContain('/shared-photo');
+// });