Merge pull request #13 from fan9704/feature_firebase

Register Firebase Cloud Messaging

public/firebase-messaging-sw.js

@@ -0,0 +1,13 @@
+importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js')
+importScripts('https://www.gstatic.com/firebasejs/8.2.7/firebase-messaging.js')
+
+var firebaseConfig = {
+    apiKey: "AIzaSyA1FevAEUfg7u_tmhjPKGLJfVFBiQaghCY",
+    authDomain: "petmonitoringsystem-729da.firebaseapp.com",
+    projectId: "petmonitoringsystem-729da",
+    storageBucket: "petmonitoringsystem-729da.appspot.com",
+    messagingSenderId: "218937674834",
+    appId: "1:218937674834:web:2961695e7663494adb638b",
+    measurementId: "G-D4TRM99C0G"
+}
+const app = firebase.initializeApp(firebaseConfig);

public/index.html

@@ -13,11 +13,24 @@
     <meta name="theme-color" content="#ffffff">
     <link rel="manifest" href="/manifest.json" />
     <script>
-        if ("serviceWorker" in navigator) {
-            navigator.serviceWorker
-                .register("/sw.js")
-                .then(res => console.log("service worker registered"))
-                .catch(err => console.log("service worker not registered", err));
+        // if ("serviceWorker" in navigator) {
+        //     navigator.serviceWorker
+        //         .register("/sw.js")
+        //         .then(res => console.log("service worker registered"))
+        //         .catch(err => console.log("service worker not registered", err));
+        // }
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('firebase-messaging-sw.js')
+                .then(reg => {
+                    console.log(`Service Worker Registration (Scope: ${reg.scope})`);
+                })
+                .catch(error => {
+                    const msg = `Service Worker Error (${error})`;
+                    console.error(msg);
+                });
+        } else {
+            // happens when the app isn't served over HTTPS or if the browser doesn't support service workers
+            console.warn('Service Worker not available');
         }
     </script>
 </head>

src/App.vue

@@ -55,7 +55,8 @@
 
 <script>
 import HelloWorld from './components/HelloWorld.vue'
-import {onMounted, provide, reactive} from "vue";
+import {onMounted, provide, reactive, ref} from "vue";
+import { getToken,onMessage } from "firebase/messaging";
 
 export default {
   name: 'App',
@@ -64,6 +65,7 @@ export default {
     HelloWorld,
   },
   setup(){
+    const notification = ref(null);
     const states = reactive({
       deferredPrompt: null,
     });
@@ -110,5 +112,21 @@ export default {
       this.drawer = false
     },
   },
+  mounted () {
+    console.log('Firebase cloud messaging object', this.$messaging)
+    getToken(this.$messaging,{
+      vapidKey: "BIGbuGz1MOztzbd3qpesAdtm1DKfhNVatZAdTU_ncPLrQWISpzFbbTjQS5dkQkqkLah43ic5MhJHWK3K_Ix-h0I"
+    })
+        .then((token) => {
+          console.log('FCM Token:', token);
+        })
+        .catch((error) => {
+          console.error('FCM 訂閱失敗:', error);
+        });
+    onMessage(this.$messaging, (payload) => {
+      console.log("收到通知:", payload);
+      notification.value = payload;
+    });
+  }
 }
 </script>

src/main.ts

@@ -25,6 +25,9 @@ const vuetify = createVuetify({
     components,
     directives,
 })
+// Firebase
+import {messaging} from './utils/firebaseCore';
+
 
 const app = createApp(App);
 app.use(vuetify);
@@ -33,4 +36,5 @@ app.use(VueAxios, axios);
 app.use(loadFonts);
 app.use(AOS.init());
 app.use(VueSweetalert2);
+app.config.globalProperties.$messaging = messaging
 app.mount('#app');

src/utils/firebaseCore.ts

@@ -1,6 +1,8 @@
 import { getAuth, GithubAuthProvider,GoogleAuthProvider } from "firebase/auth";
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
+import { getMessaging } from "firebase/messaging";
+
 
 const firebaseConfig = {
     apiKey: "AIzaSyA1FevAEUfg7u_tmhjPKGLJfVFBiQaghCY",
@@ -16,8 +18,10 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 const analytics = getAnalytics(app);
 const auth = getAuth(app);
+const messaging = getMessaging(app)
 
 const githubProvider = new GithubAuthProvider();
 const  googleProvider = new GoogleAuthProvider();
 
-export { auth, githubProvider,googleProvider }
+
+export { auth,messaging, githubProvider,googleProvider }