diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js index 21d121b2..0757adde 100644 --- a/public/firebase-messaging-sw.js +++ b/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 */ }); diff --git a/src/main.tsx b/src/main.tsx index ef74e8d6..22934876 100644 --- a/src/main.tsx +++ b/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); } }; diff --git a/src/setupWorker.ts b/src/setupWorker.ts index d462f22f..93e329dc 100644 --- a/src/setupWorker.ts +++ b/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; + } + }; }); }; diff --git a/vite.config.ts b/vite.config.ts index a3ce6171..2f77d805 100644 --- a/vite.config.ts +++ b/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: 당신의 루틴을 지켜요!',