Hướng dẫn tích hợp notification trên web bằng firebase

20/11/2017

Bước 1: tạo project trên trang https://console.firebase.google.com

Bước 2: lấy mã Server key

Bước 3: up file notification.js và firebase-messaging-sw.js lên host, tải file mẫu về tại đây

Bước 4: chèn hàm saveTokenUserAPI vào controller

function saveTokenUserAPI($input)
{
    $dataSend = arrayMap($input['request']->data);
    $modelCustomer= new Customer();

    if(!empty($dataSend['tokenDevice'])){
        
        if(!empty($_SESSION['infoCustomer'])){
            $save= array();
            $save['$set']['tokenDeviceWeb']= $dataSend['tokenDevice'];
            $dk= array();
            $dk= array('_id'=> new MongoId($_SESSION['infoCustomer']['Customer']['id']) );
            $modelCustomer->updateAll($save,$dk);
        }
        
        $_SESSION['tokenDevice']= $dataSend['tokenDevice'];
        echo 1;
    }else{
        echo 0;
    }
}

Bước 5: chèn hàm sendMessageNotifiWeb vào file funcition

function sendMessageNotifiWeb($title,$body,$icon,$click_action,$target){
	//FCM api URL
	$url = 'https://fcm.googleapis.com/fcm/send';
	//api_key available in Firebase Console -> Project Settings -> CLOUD MESSAGING -> Server key
	$server_key = 'xxx'; // lấy server key trong firebase
				
	$fields = array();
	$fields['notification'] = array('title'=>$title,'body'=>$body,'icon'=>$icon,'click_action'=>$click_action);
	$fields['to'] = $target;
	$fields['data'] = array('message'=>'Thông báo');

	//header with content_type api key
	$headers = array(
		'Content-Type:application/json',
	  'Authorization:key='.$server_key
	);
				
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_POST, true);
	curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));
	$result = curl_exec($ch);
	if ($result === FALSE) {
		die('FCM Send Error: ' . curl_error($ch));
	}
	curl_close($ch);
}

Bước 6: tại nơi muốn đẩy thông báo về trình duyệt thì xử lý theo mẫu sau:

if(!empty($driver['Driver']['tokenDeviceWeb'])){
    $title= 'Mantan thông báo';
    $body= 'Bạn có đơn hàng cần duyệt';
    $icon= 'http://mantanservices.com/app/Theme/mantanservices/images/logo.png';
    $click_action= $urlHomes.'listOrderProcess';
    $target= $driver['Driver']['tokenDeviceWeb'];
    sendMessageNotifiWeb($title,$body,$icon,$click_action,$target);
}

Bước 7: tại file header của giao diện chèn đoạn mã script sau

Các tham số config lấy ở firebase

Test bằng cách vào SSH của server chạy lệnh sau:

curl --header "Authorization: key=xxx" --header "Content-Type: application/json" -d '{"notification": {"title": "FCM Message","body": "This is an FCM Message",},"to": "yyy"}' "https://fcm.googleapis.com/fcm/send"

Trong đó xxx là server key và yyy là token của thiết bị

Chú ý: thông báo chỉ bật ra khi cửa sổ nhận thông báo đã close

Tác giả:

Bài viết liên quan

Bình luận về Hướng dẫn tích hợp notification trên web bằng firebase

Từ khóa:

 

Hỗ trợ trực tuyến

Mr Mạnh - 0127.656.0000

Ms Cúc - 0916.129.396

Ms Phương - 0165.236.5506

Mr Hải - 0168.994.9361

Mr Lộc - 0166.336.0173

Ms.Kim Anh - 0962162406

Kho giao diện

Khuyến mại

  • 15 2
    Khuyến mãi lớn nhân dịp 8 -3

    Mantan Việt Nam giảm giá 50% chi phí thiết kế website. Nhân dịp ngày 8-3 chúng tôi thân gửi đến quý khách hàng nữ chương trình khuyến mại cực lớn này, như một lời chúc chân thành cho sức khỏe, vẻ đẹp và sự nghiệp của phái đẹp - một nửa rất quan trọng của thế giới.

  • 4 1
    Tưng bừng đón xuân tặng ngay hosting và domain

    Chương trình MIỄN PHÍ 100% HOSTING VÀ DOMAIN cho mọi khách hàng đăng ký dịch vụ thiết kế website của Mantan Việt Nam, tổng giá trị trên 2.000.000đ Đăng ký nhận khuyến mại ...

  • 23 12
    Giảm giá thiết kế web còn 2.000.000đ nhân dịp Giáng sinh

    Bạn đang kinh doanh , bạn muốn đạt hiệu quả tối ưu nhưng vẫn chưa có giải pháp phù hợp ? Một lượng lớn khách hàng đang sử dụng mạng ...