refactor: fcm, msw 서비스 워커 통합 (#513)

* refactor: 서비스 워커 리팩토링

* fix: 빌드 오류 수정

public/firebase-messaging-sw.js

@@ -1,16 +1,13 @@
-import { precacheAndRoute } from 'workbox-precaching';
-
-precacheAndRoute(self.__WB_MANIFEST);
+if (new URL(location.href).searchParams.get('msw') === 'true') {
+  self.importScripts('/mockServiceWorker.js');
+}
 
 self.addEventListener('install', function (e) {
-  console.log('[FCM] Service Worker Installed.');
   self.skipWaiting();
 });
 
 self.addEventListener('activate', function (e) {
-  console.log('[FCM] Service Worker Activated.');
-  // eslint-disable-next-line no-undef
-  e.waitUntil(clients.claim());
+  e.waitUntil(self.clients.claim());
 });
 
 self.addEventListener('push', function (e) {
@@ -45,18 +42,21 @@ self.addEventListener('notificationclick', function (e) {
 
   e.notification.close();
 
-  /* eslint-disable */
   e.waitUntil(
-    clients.matchAll({ includeUncontrolled: true }).then((windowClients) => {
-      if (windowClients.length > 0) {
-        const client = windowClients[0];
-
-        client.focus();
-        client.postMessage(url);
-      } else {
-        clients.openWindow(url);
-      }
-    })
+    self.clients
+      .matchAll({ includeUncontrolled: true })
+      .then((windowClients) => {
+        if (windowClients.length > 0) {
+          const client = windowClients[0];
+
+          client.focus();
+          client.postMessage({
+            type: 'notification-click',
+            url
+          });
+        } else {
+          self.clients.openWindow(url);
+        }
+      })
   );
-  /* eslint-enable */
 });

src/main.tsx

@@ -14,12 +14,19 @@ import { PWAInstallBannerProvider } from '@/domain/PWAInstallBanner/hooks/usePWA
 import { setupMockServiceWorker, setupFCMServiceWorker } from './setupWorker';
 import './main.css';
 
-// 조건에 따라서 원하는 서비스 워커를 등록
+// 앱에서 사용되는 FCM 서비스 워커, MSW 서비스 워커를 등록
 const setupSW = async () => {
+  if (!('serviceWorker' in navigator)) {
+    return;
+  }
+
+  const workerUrl = new URL('/firebase-messaging-sw.js', location.origin);
+  workerUrl.searchParams.set('msw', import.meta.env.VITE_MSW);
+
+  await setupFCMServiceWorker(workerUrl);
+
   if (import.meta.env.VITE_MSW === 'true') {
-    await setupMockServiceWorker();
-  } else {
-    await setupFCMServiceWorker();
+    await setupMockServiceWorker(workerUrl);
   }
 };
 

src/setupWorker.ts

@@ -1,8 +1,11 @@
 // MSW 서비스 워커를 등록하는 함수
-export const setupMockServiceWorker = async () => {
+export const setupMockServiceWorker = async (workerUrl: URL) => {
   const { worker } = await import('@/core/api/mocks/browser');
 
   return worker.start({
+    serviceWorker: {
+      url: workerUrl.href
+    },
     onUnhandledRequest(request, print) {
       const excludedUrls = [
         '/assets/',
@@ -22,17 +25,15 @@ export const setupMockServiceWorker = async () => {
 };
 
 // FCM 서비스 워커를 등록하는 함수
-export const setupFCMServiceWorker = async () => {
-  window.addEventListener('load', () => {
-    navigator.serviceWorker
-      .register('/firebase-messaging-sw.js', {
-        scope: '/'
-      })
-      .then(() => {
-        navigator.serviceWorker.onmessage = (e) => {
-          const url = e.data;
-          location.href = url;
-        };
-      });
+export const setupFCMServiceWorker = async (workerUrl: URL) => {
+  return navigator.serviceWorker.register(workerUrl.href).then(() => {
+    navigator.serviceWorker.onmessage = (e) => {
+      const type = e.data?.type;
+      const url = e.data?.url;
+
+      if (type === 'notification-click') {
+        location.href = url;
+      }
+    };
   });
 };

vite.config.ts

@@ -10,7 +10,6 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
       injectRegister: null,
-      strategies: 'injectManifest',
       filename: 'firebase-messaging-sw.js',
       manifest: {
         name: 'Moabam: 당신의 루틴을 지켜요!',