Feat#9 hyein/notification

[hae2ni]

🔥 Related Issues

• close [ Hyein ] 알림 구현  #9

💙 작업 내용

• [ ] ~ PWA PUSH 알림

✅ PR Point

• service worker 구현이 핵심인 것 같습니다.
• 여기서도 config 받아왔어여

// 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);
});

• firebase-messaging-sw.js 파일의 이름과 파일의 위치가 조금이라도 틀리면 아예 먹지 않더라구요! 이거 주의하여야 할 것 같습니다.
• service worker는 public 폴더 밑에,
• 돌아가는(?) token을 받아오는 파일은 App.tsx 밑에 두었고, App.tsx에서 token을 받아오는 부분을 import해주었습니다.
• 이후, token을 받아오면,

이런식으로 뜨게 되는데,
이 부분과 함께 firebase console에서

테스트 부분에 내용과 제목을 입력하고 token을 넣어주고 보내면 data가 잘 받아와집니다!

이렇게 push 알림 데이터를 받으면,
마지막으로 notification의 title과 body부분을 보여주면 될 것 같습니다....

아예 알람 메세지랑 아이콘까지 띄울 수 있게 좀더 리팩토링해보겠습니다!!!

결과 화면=> 근데 chrome에서만 해봐서(아이폰이슈) pwa 자체로 바꾸지도 않은 것 같아서,,, 자신감은 제로임

😡 Trouble Shooting

• yarn add firebase를 해도 firebase를 인지하지 못하는 상황이 있었고,
• import @firebase/messaging을 해도 인지하지 못했습니다ㅠㅠ
• 결국에는 요거 레포지토리를 제 걸루 fetch해서 진행했고 거기서는 다 잘 돌아갔습니다..!

👀 스크린샷 / GIF / 링크

📚 Reference

PWA PUSH 구현에 대하여
PWA PUSH 예시코드

사실 코드는 제 레포지토리,,,에서 보시는 게 나을 것 같습니다! (복붙한다고 붙였는데 사람인지라 빼먹었을 것 같기도 하고 리팩토링도 그쪽에서 진행하려고 합니다)