From 5768a3defaae89da3153ef68e911ea5fdc235f14 Mon Sep 17 00:00:00 2001
From: SangHoon Lee <50488780+bbearcookie@users.noreply.github.com>
Date: Fri, 17 Nov 2023 15:10:04 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=84=9C=EB=B9=84=EC=8A=A4=20=EC=9B=8C?=
 =?UTF-8?q?=EC=BB=A4=20=EA=B4=80=EB=A0=A8=20=EC=9D=B4=EC=8A=88=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0=20(#159)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

* chore: menifest 관련 추가 설정
---
 public/firebase-messaging-sw.js               |  31 ++++++++++++++++++
 public/{ => pwa}/apple-touch-icon-180x180.png | Bin
 public/{ => pwa}/maskable-icon-512x512.png    | Bin
 public/{ => pwa}/pwa-192x192.png              | Bin
 public/{ => pwa}/pwa-512x512.png              | Bin
 public/{ => pwa}/pwa-64x64.png                | Bin
 vite.config.ts                                |  15 ++++++---
 7 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 public/firebase-messaging-sw.js
 rename public/{ => pwa}/apple-touch-icon-180x180.png (100%)
 rename public/{ => pwa}/maskable-icon-512x512.png (100%)
 rename public/{ => pwa}/pwa-192x192.png (100%)
 rename public/{ => pwa}/pwa-512x512.png (100%)
 rename public/{ => pwa}/pwa-64x64.png (100%)

diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js
new file mode 100644
index 00000000..a5781fae
--- /dev/null
+++ b/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);
+});
diff --git a/public/apple-touch-icon-180x180.png b/public/pwa/apple-touch-icon-180x180.png
similarity index 100%
rename from public/apple-touch-icon-180x180.png
rename to public/pwa/apple-touch-icon-180x180.png
diff --git a/public/maskable-icon-512x512.png b/public/pwa/maskable-icon-512x512.png
similarity index 100%
rename from public/maskable-icon-512x512.png
rename to public/pwa/maskable-icon-512x512.png
diff --git a/public/pwa-192x192.png b/public/pwa/pwa-192x192.png
similarity index 100%
rename from public/pwa-192x192.png
rename to public/pwa/pwa-192x192.png
diff --git a/public/pwa-512x512.png b/public/pwa/pwa-512x512.png
similarity index 100%
rename from public/pwa-512x512.png
rename to public/pwa/pwa-512x512.png
diff --git a/public/pwa-64x64.png b/public/pwa/pwa-64x64.png
similarity index 100%
rename from public/pwa-64x64.png
rename to public/pwa/pwa-64x64.png
diff --git a/vite.config.ts b/vite.config.ts
index 08902e1c..4445a068 100644
--- a/vite.config.ts
+++ b/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'