Feat#9 hyein/notification

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

firebase-messaging-sw.js

@@ -0,0 +1,35 @@
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+import { getMessaging, getToken, onMessage } from "firebase/messaging";
+
+import "@firebase/messaging";
+// import firebase from "firebase";
+const firebaseConfig = {
+  apiKey: import.meta.env.REACT_APP_API_KEY,
+  authDomain: "pre-gwasuoneshot.firebaseapp.com",
+  projectId: "pre-gwasuoneshot",
+  storageBucket: "pre-gwasuoneshot.appspot.com",
+  messagingSenderId: import.meta.env.REACT_APP_MESSAGING_ID,
+  appId: import.meta.env.REACT_APP_APP_ID,
+  measurementId: import.meta.env.REACT_APP_MEASUREMENT_ID,
+};
+
+const app = initializeApp(firebaseConfig);
+
+const messaging = getMessaging();
+
+getToken(messaging, {
+  vapidKey: import.meta.env.REACT_APP_VAPID_KEY,
+})
+  .then((currentToken) => {
+    if (currentToken) {
+      console.log("currentToken", currentToken);
+    } else {
+      console.log("No registration");
+    }
+  })
+  .catch((e) => console.log("err:", e));
+
+onMessage(messaging, (payload) => {
+  console.log("Message received", payload);
+});

index.html

@@ -16,4 +16,29 @@
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
+
+  <script type="module">
+    // Import the functions you need from the SDKs you need
+    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
+    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-analytics.js";
+    // TODO: Add SDKs for Firebase products that you want to use
+    // https://firebase.google.com/docs/web/setup#available-libraries
+
+    // Your web app's Firebase configuration
+    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
+    const firebaseConfig = {
+      apiKey: "AIzaSyDNyoLsnDzmay7XS2uB_CIIwuKGx26ZeRk",
+      authDomain: "pre-gwasuoneshot.firebaseapp.com",
+      projectId: "pre-gwasuoneshot",
+      storageBucket: "pre-gwasuoneshot.appspot.com",
+      messagingSenderId: "137792399262",
+      appId: "1:137792399262:web:39fd3294e0be22a812988f",
+      measurementId: "G-4EJ7KCCDEF"
+    };
+
+    // Initialize Firebase
+    const app = initializeApp(firebaseConfig);
+    const analytics = getAnalytics(app);
+  </script>
+
 </html>

package.json

@@ -16,6 +16,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "firebase": "^10.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
@@ -40,7 +41,9 @@
     "lint-staged": "^13.2.3",
     "prettier": "^2.8.8",
     "typescript": "^5.0.2",
-    "vite": "^4.3.9"
+    "vite": "^4.3.9",
+    "vite-plugin-pwa": "^0.16.4",
+    "workbox-window": "^7.0.0"
   },
   "lint-staged": {
     "*.tsx": "eslint --fix",

public/firebase-messaging-sw.js

@@ -0,0 +1,30 @@
+// importScripts("https://www.gstatic.com/firebasejs/9.5.0/firebase-app.js");
+// importScripts("https://www.gstatic.com/firebasejs/9.5.0/firebase-messaging.js");
+importScripts("https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js");
+importScripts("https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js");
+const firebaseConfig = {
+  apiKey: import.meta.env.REACT_APP_API_KEY,
+  authDomain: "pre-gwasuoneshot.firebaseapp.com",
+  projectId: "pre-gwasuoneshot",
+  storageBucket: "pre-gwasuoneshot.appspot.com",
+  messagingSenderId: import.meta.env.REACT_APP_MESSAGING_ID,
+  appId: import.meta.env.REACT_APP_APP_ID,
+  measurementId: import.meta.env.REACT_APP_MEASUREMENT_ID,
+};
+
+firebase.initializeApp(firebaseConfig);
+
+const messaging = firebase.messaging();
+
+messaging.onBackgroundMessage(messaging, (payload) => {
+  console.log("[firebase-messaging-sw.js] Received background message ", payload);
+
+  // Customize notification here
+  const notificationTitle = "Tutice";
+  const notificationOptions = {
+    body: payload,
+    icon: "/fruit.png",
+  };
+
+  self.registration.showNotification(notificationTitle, notificationOptions);
+});

src/App.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider } from "styled-components";
 import Router from "./Router";
 import { GlobalStyle } from "./style/globalStyle";
 import { theme } from "./style/theme";
+import "./firebase-messaging-sw.js";
 
 export default function App() {
   return (

src/Router.tsx

@@ -11,7 +11,7 @@ export default function Router() {
       <Routes>
         <Route path="/eun-bean" element={<EunBean />} />
         <Route path="/hee-jung" element={<HeeJung />} />
-        <Route path="/hye-in" element={<Hyein />} />
+        <Route path="/" element={<Hyein />} />
         <Route path="/ji-soo" element={<Jisoo />} />
         <Route path="/seong-gyeong" element={<SeongGyeong />} />
       </Routes>

src/components/hyein/Notification.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Notification() {
+  return <div>알림입니다.</div>;
+}

src/pages/Hyein.tsx

@@ -1,3 +1,4 @@
 export default function Hyein() {
-  return <div>Hyein</div>;
+  return <div>PWA 알림 한번 해보자</div>;
 }
+

src/type/Notification.ts

@@ -0,0 +1,4 @@
+export interface Notification {
+  title: string;
+  body: string;
+}

vite.config.ts

@@ -2,12 +2,14 @@ import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import svgr from "vite-plugin-svgr";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     tsconfigPaths(),
     react(),
+    VitePWA(),
     svgr({
       svgrOptions: {
         // svgr options