fix: 서비스 워커 관련 이슈 해결 (#159)

* chore: 애셋 폴더 정리 및 개발 서버에서 PWA 워커 실행 안함

* feat: 푸쉬 이벤트를 수신하는 서비스 워커 작성

* chore: menifest 관련 추가 설정

public/firebase-messaging-sw.js

@@ -0,0 +1,31 @@
+import { precacheAndRoute } from 'workbox-precaching';
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+self.addEventListener('install', function (e) {
+  console.log('[FCM] Service Worker Installed.');
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', function (e) {
+  console.log('[FCM] Service Worker Activated.');
+});
+
+self.addEventListener('push', function (e) {
+  const data = e.data.json();
+
+  if (!data) {
+    return;
+  }
+
+  console.log('[FCM] Push Received.');
+
+  const title = data.notification.title;
+
+  const options = {
+    icon: data.notification.image,
+    ...data.notification
+  };
+
+  self.registration.showNotification(title, options);
+});

vite.config.ts

@@ -10,31 +10,36 @@ export default defineConfig({
     VitePWA({
       registerType: 'autoUpdate',
       injectRegister: 'auto',
+      strategies: 'injectManifest',
+      filename: 'firebase-messaging-sw.js',
       devOptions: {
-        enabled: true,
+        enabled: false,
         type: 'module'
       },
       manifest: {
+        name: 'Moabam: 당신의 루틴을 지켜요!',
+        short_name: 'Moabam',
+        description: '성취감과 의무감을 더하는 루틴 관리 웹 앱',
         theme_color: '#60D4DE',
         icons: [
           {
-            src: 'pwa-64x64.png',
+            src: 'pwa/pwa-64x64.png',
             sizes: '64x64',
             type: 'image/png'
           },
           {
-            src: 'pwa-192x192.png',
+            src: 'pwa/pwa-192x192.png',
             sizes: '192x192',
             type: 'image/png'
           },
           {
-            src: 'pwa-512x512.png',
+            src: 'pwa/pwa-512x512.png',
             sizes: '512x512',
             type: 'image/png',
             purpose: 'any'
           },
           {
-            src: 'maskable-icon-512x512.png',
+            src: 'pwa/maskable-icon-512x512.png',
             sizes: '512x512',
             type: 'image/png',
             purpose: 'maskable'