refactor: serviceWorker 병형 가능하도록 설정

frontend/public/devLocalServiceWorker.js

@@ -0,0 +1,3 @@
+/* eslint-disable no-undef */
+importScripts('/firebase-messaging-sw.js');
+importScripts('/mockServiceWorker.js');

frontend/public/firebase-messaging-sw.js

@@ -92,20 +92,18 @@ self.addEventListener('fetch', (event) => {
 messaging.onBackgroundMessage((payload) => {
   const {
     notification: { title, body },
-    webpush: {
-      fcm_options: { link },
-    },
   } = payload;
-  // Customize notification here
 
+  // Customize notification here
   const notificationTitle = title;
+
   const notificationOptions = {
     body: body,
     icon: './assets/favicon-32x32.png',
     badge: './assets/favicon-16x16.png',
-    data: link,
+    data: '/reminder',
     tag: 'reminder-alert',
-    vibrate: [200, 100, 200, 100, 200, 100, 200], // 짝수 인덱스는 진동 시간, 홀수 인덱스는 휴식 시간
+    vibrate: [200], // 짝수 인덱스는 진동 시간, 홀수 인덱스는 휴식 시간
   };
 
   self.registration.showNotification(notificationTitle, notificationOptions);

frontend/src/hooks/@common/usePushAlert.ts

@@ -23,7 +23,6 @@ const usePushAlert = () => {
     }
 
     const currentToken = await getCurrentToken(); // 여기서 새로운 토큰을 전달하면 됨.
-
     subscribe(currentToken);
   };
 

frontend/src/index.tsx

@@ -6,16 +6,17 @@ import registerServiceWork from './registerServiceWork';
 if (process.env.NODE_ENV === 'development') {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const { worker } = require('./mocks/browser');
+  registerServiceWork('/devLocalServiceWorker.js');
 
   worker.start({
     serviceWorker: {
-      url: 'http://localhost:8282/mockServiceWorker.js',
+      url: 'http://localhost:8282/devLocalServiceWorker.js',
     },
   });
 }
 
 if (process.env.NODE_ENV === 'production') {
-  registerServiceWork();
+  registerServiceWork('/firebase-messaging-sw.js');
 }
 
 const root = createRoot(document.getElementById('root') as HTMLElement);

frontend/src/registerServiceWork.ts

@@ -1,24 +1,23 @@
 import { isSupported, updatePushStatus } from 'utils/pushStatus';
 
-const registerPwaServiceWorker = async () => {
+const registerPwaServiceWorker = async (workerPath: string) => {
   // 지원하지 않는 브라우저라면 return;
   if (!isSupported) {
     return;
   }
   // 기존에 있던 서비스 워커를 가져옴
   let registration = await navigator.serviceWorker.getRegistration();
 
-  const newScriptPath = '/firebase-messaging-sw.js';
   const oldScriptUrl = registration?.active?.scriptURL;
 
   // 서비스워커 등록이 되어 있지 않다면 새로 등록함.
   if (!oldScriptUrl) {
-    registration = await navigator.serviceWorker.register(newScriptPath);
+    registration = await navigator.serviceWorker.register(workerPath);
   } else {
     const oldScriptPath = new URL(oldScriptUrl).pathname;
     // 서비스 워커 업데이트가 일어나거나, 기존 서비스 워커가 없다면 새로 등록함.
-    if (!registration || oldScriptPath !== newScriptPath) {
-      registration = await navigator.serviceWorker.register(newScriptPath);
+    if (!registration || oldScriptPath !== workerPath) {
+      registration = await navigator.serviceWorker.register(workerPath);
     }
   }