NotificationView.vue

<!-- src/views/NotificationView.vue -->
<template>
  <v-container>
    <v-card class="pa-3">

      <v-card-title style="font-size:1.1em">
        알림 요청
      </v-card-title>

      <v-card-subtitle>
        '알림 요청'을 하면 구독 중인 저자의 새로운 마이로그가 저장되면 알림을 받을 수 있습니다.     
      </v-card-subtitle>

      <v-row>
        <v-col style="text-align: center">   
          <!-- <v-btn color="primary"  @click="requestFCMToken"> 
            <v-icon left>mdi-bell</v-icon> 알림 요청 
          </v-btn> 
           -->
          <v-btn color="primary" @click="requestFCMToken">
            <v-icon left>mdi-bell</v-icon>{{ isGranted ? "알림 차단" : "알림 요청" }}
          </v-btn>

        </v-col>
      </v-row>

    </v-card>

    <!-- v-alert : type="success" "info" "warning"  "error" -->
    <v-alert v-if="error" type="info" dismissible @input="resetErrorMsg" class="my-alert">{{ error }}</v-alert>
    <div class="text-center">
      <v-progress-circular v-if="isLoading" indeterminate></v-progress-circular>
    </div>
      
  </v-container>

</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
  name: "NotificationView",
  data() {
    return { 

    };
  },
  async created() {
    const userId = this.$store.state.auth.user.id; 
    if(userId) {
      this.checkFCMToken(userId); // Check if the user is subscribed when the component mounts
    }
  },
  computed: { 
    ...mapGetters('fcm',['isGranted','isLoading','error']),
  },
  methods: {    
    ...mapActions('fcm', ['getAndSaveFCMToken', 'deleteFCMToken', 'checkFCMToken', 'resetError']),
    async requestFCMToken() {
      const userId = this.$store.state.auth.user.id; 
      if(this.isGranted) {
        // 푸시 알림을 허용한 상태 이므로 차단을 실행한다
        try {
          await this.deleteFCMToken(userId);
        } catch (error) {
          console.error("Error requesting FCM token:", error);
        }
      } else {
        // 푸시 알림을 요청하지 않은 상태로 알림 요청을 한다.
        try {          
          await this.getAndSaveFCMToken(userId);
          
          this.ShowNotification();
        } catch (error) {
          console.error("Error requesting FCM token:", error);
        }
      }
      // 알림 요청 버튼의 상태 변경
      //this.checkFCMToken(userId);
    },
    
    resetErrorMsg() {
      this.resetError();
    },

    ShowNotification() {
      const title = "마이로그-일상의 기록";
      const options = {
        body: "알림 서비스 가입을 환영합니다!",
        icon: "/img/push-noti.png",
        badge: "/img/push-badge-icon.png",
        image: "/img/push-image.jpg",
        data: [
           { action: "like", title: "링크를 클릭하세요.", icon: "/img/push-coffee.png", url: 'https://velog.io/@inetsos/posts'}
        ],
        vibrate: [500, 100, 500]
      };
      navigator.serviceWorker.ready
      .then(function(swreg) {
        swreg.showNotification(title, options);
      });
    },
  }
};
</script>

<style scoped>
.my-alert {
  text-align: justify;
  bottom: 30px;
  margin: 20px 0;
}

#blog-link:hover {
  color: blue;
  cursor: pointer;
}
</style>