Firebase Push Notification (Laravel + Vue.js)

จาก Blog ก่อนหน้านี้เราได้เข้าใจวิธีการ Setup FCM บน JavaScript ไปเรียบร้อยแล้ว (ถ้าใครยังไม่ได้เข้าไปอ่านสามารถอ่านได้ที่ลิ้งด้านล่าง)

Firebase Cloud Messaging for Web

ก่อนอื่น ๆ Firebase จะส่ง Notification มาที่ Website เราได้จะต้องมี “firebase-messaging-sw.js” ซึ่งวิธีการ Route ผ่าน Laravel เราสามารถตั้งค่าได้ดังนี้

web.php

use Illuminate\Support\Facades\File;
Route::get('firebase-messaging-sw.js', function () {
return File::get(public_path() . '/firebase-messaging-sw.js');
});

และเอาไฟล์ไปว่างไว้ที่ “public/firebase-messaging-sw.js” ดังรูป

จากนั้น Install library 2 ตัว คือ firebase และ firebase/messaging

firebase

@firebase/messaging

หลังจากนั้น Config ค่าต่าง ๆ ให้ Firebase และทำการ get FCM Token

app.js

import firebase from 'firebase';
import '@firebase/messaging';
var firebaseConfig = {
apiKey: "AIzaSyD4zhIMpv1Ch",
authDomain: "peerless.firebaseapp.com",
databaseURL: "https://peerless.firebaseio.com",
projectId: "peerless",
storageBucket: "peerless.appspot.com",
messagingSenderId: "369073",
appId: "1:369073:web:f2d1ae14"
};
// var firebase = require('firebase');
firebase.initializeApp(firebaseConfig);
// Using FCM Messaging
const messaging = firebase.messaging();
messaging.usePublicVapidKey("BPhWo3Z0lYqisgfKxHKi53J822fQBSR3ZOU");
// Get FCM Token
messaging.getToken().then((currentToken) => {
if (currentToken) {
console.log("Token: " + currentToken);
} else {
// Show permission request.
console.log('No Instance ID token available. Request permission to generate one.');
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
});

จากนั้นทดสอบยิงจะได้ดังรูปด้านล่าง