mylog 서비스 워커 등록

Vue로 PWA 개발 - 그랜파 개발자

Vue 프로젝트 Beta Test : mylog, 일상의 기록

개발이 진행됨에 따라 소스 코드를 계속 추가해 갑니다.

mylog 서비스 워커

Firebase Cloud Messaging (FCM)과 서비스 워커는 웹 애플리케이션에서 푸시 알림 기능을 구현하기 위해 함께 작동하는 중요한 요소입니다. FCM은 서버에서 클라이언트로 푸시 알림을 전송하는 서비스이고, 서비스 워커는 브라우저가 이 알림을 백그라운드에서 처리할 수 있도록 돕습니다. 그러므로 앱이 알림 권한을 받거나 백그라운드에 있을 때 알림을 처리하려면 서비스 워커가 필요합니다

서비스 워커는 브라우저에서 백그라운드 스크립트로 실행되며, FCM으로부터 받은 푸시 메시지를 처리하여 사용자에게 알림을 표시하는 역할을 합니다.
웹 애플리케이션에서 FCM 메시지를 수신하려면, firebase-messaging-sw.js 파일을 서비스 워커로 등록해야 합니다. 이 서비스 워커가 백그라운드에서 푸시 알림을 처리하게 됩니다.

1. 서비스 워커 service worker

앱이 백그라운드에 있을 때 알림을 처리하려면 서비스 워커가 필요합니다. 프로젝트의 루트 디렉터리(index.html이 있는 위치)에 firebase-messaging-sw.js 파일을 만듭니다.

// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/10.13.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.0/firebase-messaging-compat.js');

// Your web app's Firebase configuration (same as in your firebase.js)
const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function (payload) {
  console.log('Received background message ', payload);
  // Extract notification data
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: payload.notification.icon || "/img/push-noti-icon.png",
    badge: "/img/push-badge-icon.png",
    image: "/img/push-image.png",
    data: { url: payload.notification.click_action || 'https://velog.io/@inetsos/posts' } // Custom data for the click event
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

2. 서비스 워커 등록

main.js에 서비스 워커를 등록합니다.

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/firebase-messaging-sw.js')
   .then((registration) => {
       console.log('Service Worker registered with scope:', registration.scope);
   })
   .catch((err) => {
       console.error('Service Worker registration failed:', err);
   });
}

src/main.js

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import { getMessaging, onMessage } from "firebase/messaging";

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
  created() {
    // Set up Firebase auth state change listener
    const { dispatch } = this.$store;
    // Initialize Firebase authentication to check for the logged-in user
    dispatch('auth/initializeAuth');
    dispatch('auth/fetchUsers');

    dispatch('mylogs/fetchMylogs');

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/firebase-messaging-sw.js')
      .then((registration) => {
        console.log('Service Worker registered with scope:', registration.scope);
      }).catch((err) => {
        console.error('Service Worker registration failed:', err);
      });
    } 
    
    // Request Notification Permission
    // '알림 요청'으로 fcm 토큰을 저장할 것이므로 웹앱을 시작할 때 알림 표시 요청과 관게없이 onMessage를 구현해 둔다. 
    const messaging = getMessaging();       
    // Handle incoming messages in the foreground
    onMessage(messaging, (payload) => {
      console.log('Message received: ', payload);
      // Extract notification data
      const title = payload.notification.title;
      const options = {
        body: payload.notification.body,
        icon: payload.notification.icon || "/img/push-noti-icon.png",
        badge: "/img/push-badge-icon.png",
        image: "/img/push-image.png",
        data: { url: payload.notification.click_action || 'https://velog.io/@inetsos/posts' } // Custom data for the click event
      };

      // Show notification
      const notification = new Notification(title, options);
      // Handle click event on the notification
      notification.onclick = (event) => {
        event.preventDefault(); // Prevent the browser from focusing the Notification's tab
        window.open(notification.data.url, '_blank'); // Open the URL in a new tab
      };
      
    });
  }
}).$mount('#app')