Cài đặt và sử dụng Firebase push notification trên trang web

Dưới đây là các bước cụ thể để cài đặt và sử dụng push notification trên trang web của bạn:

Bước 1: Tạo tài khoản Firebase

Để sử dụng push notification trên trang web, bạn cần tạo một tài khoản Firebase trước. Nếu bạn đã có một tài khoản Firebase, hãy bỏ qua bước này.

Bước 2: Tạo một project Firebase

Sau khi đăng nhập vào tài khoản Firebase, bạn cần tạo một project Firebase mới. Sau khi tạo xong, bạn sẽ nhận được một số thông tin cần thiết để tích hợp push notification vào trang web.

Bước 3: Tạo file firebase-messaging-sw.js

File firebase-messaging-sw.js là một file JavaScript cần thiết để xử lý push notification trên trang web của bạn. File này cần được đặt trong thư mục gốc của trang web.

Nội dung file firebase-messaging-sw.js:

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

firebase.initializeApp({
    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"
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
    console.log('Received background message', payload);

    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
        icon: payload.notification.icon
    };

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

Bước 4: Viết PHP script để gửi push notification

Để gửi push notification cho các thiết bị đã đăng ký, bạn cần phải viết một PHP script để tương tác với server đẩy của Firebase. Script sẽ đọc danh sách các thiết bị đã đăng ký, xác định thông tin cần thiết cho các thông báo và gửi chúng tới các thiết bị.

Dưới đây là một ví dụ về nội dung của một file PHP script đơn giản để gửi thông báo:

define('SERVER_API_KEY', 'your_server_api_key');
define('SERVER_URL', 'https://fcm.googleapis.com/fcm/send');

$headers = array(
    'Authorization: key='.SERVER_API_KEY,
    'Content-Type: application/json'
);

$message = array(
    'title' => 'Notification title',
    'body' => 'Notification body',
    'icon' => 'path_to_icon',
    'click_action' => 'https://your_website_url.com'
);

$payload = array(
    'notification' => $message,
    'to' => 'device_token'
);

$curl = curl_init();

curl_setopt($curl, CURLOPT_URL, SERVER_URL);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($payload));

$result = curl_exec($curl);

curl_close($curl);

echo $result;

?>
 

Chú ý rằng bạn cần thay thế your_server_api_key bằng API key của bạn và device_token bằng token đã được lưu trữ trong cơ sở dữ liệu của bạn.

Bước 5: Gửi push notification từ trang web của bạn

Cuối cùng, bạn có thể gửi push notification từ trang web của mình bằng cách gọi file PHP script đã viết trong bước trước đó. Bạn có thể làm điều này bằng cách sử dụng Ajax để gọi file PHP script khi cần thiết. Ví dụ:

function sendNotification() {
    $.ajax({
        type: 'POST',
        url: 'path/to/php_script.php',
        success: function(response) {
            console.log(response);
        }
    });
}
 

Lưu ý thay đổi đường dẫn đến file PHP script của bạn trong trường url.

Hy vọng những thông tin này sẽ giúp bạn triển khai thành công push notification trên trang web của mình.