推送Web瀏覽器的通知

時間  2020-12-02
標籤 php html 前端 mysql web sql 數據庫 json 後端 api 欄目 HTML 简体版
原文   原文鏈接

你如何增長網站的流量？電子商務企業的主要目標是繼續吸引現有用戶並吸引新訪客。經過發送電子郵件通知，短信提醒，社交媒體和網絡推送通知，有不少方法能夠增長網站流量和客戶互動度。今天，咱們將看到推送通知如何適用於Web瀏覽器。這些是經過桌面和移動瀏覽器發送給用戶的通知。這些通知在用戶的桌面或移動瀏覽器上提供 - 不管用戶是否在網站上。這些通知容許用戶從他們喜歡的網站得到及時更新，並容許開發人員有效地從新使用相關內容以增長網站的流量。php

此項目須要如下項目html

Website
前端網站，您必須在index.html中包含jav.json文件前端

manifest.json
有關您的網站擴展的基本元數據信息，這將幫助您與瀏覽器操做進行通訊。mysql

service-worker.js
這是一個腳本文件，您的瀏覽器在後臺運行並執行同步操做。web

notification.js
容許瀏覽器通知的JavaScript文件。這包含將用戶註冊令牌信息發送到後端服務器的全部操做。sql

RESTful或ServerSide URL 數據庫

Subscribe
建立一個簡單的服務端插入操做來存儲用戶註冊令牌。json

Unsubscribe
以一樣的方式建立刪除操做以從數據庫中刪除用戶註冊令牌。後端

Get Notification
此URL應以JSON數據格式返回通知數據。api

CURL推送通知應用程序
服務器端CURL項目，用於向訂閱用戶列表發送通知。

數據庫
You have to create a database for storing user registration ids/tokens.

CREATE TABLE GMC {
gid INT PRIMARY KEY AUTO_INCREMENT，
rid TEXT
}

This will contain a push notification data.

CREATE TABLE notifications{
nid INT PRIMARY KEY AUTO_INCREMENT，
title VARCHAR（200），
msg VARCHAR（200），
logo VARCHAR（300），
name VARCHAR（100），
url VARCHAR（300）
}

Firebase入門

第1步爲Google Cloud Messing
建立Firebase項目。

適用於GCM FCM ID的Firebase應用程序

步驟2
登陸Google Developer Console並轉到您的信息中心

適用於GCM FCM ID的Firebase應用程序

步驟3
贊成firebase條款。

適用於GCM FCM ID的Firebase應用程序

步驟3
選擇您的API項目。

適用於GCM FCM ID的Firebase應用程序

步驟4
單擊「選擇」並選擇現有的Firebase項目。適用於GCM FCM ID的Firebase應用程序

步驟5
選擇現有項目

適用於GCM FCM ID的Firebase應用程序

步驟6
複製項目身份驗證密鑰以發送Google Cloud Messaing 適用於GCM FCM ID的Firebase應用程序

步驟7
您的項目客戶端ID。

FiID

manifest.json
Meta data information file to communicate with browsers. Here include your project client id, check Step 7 screenshot.

{
"name": "Web Push Demo",
"short_name": "push_demo",
"version": "1.0.0",
"description": "A simple site with push notification",
"author": {
"name": "Srinivas Tamada"
},
"gcm_sender_id": "Your_Client_ID",
"gcm_user_visible_only": true
}

service-worker.js
JavaScript file that your browser runs at the background and perform sync operations. This will always communicate with your project api to get latest notification information. Upload this file in your project index location.

var self = this;
var urlMain;
self.addEventListener("push", function(event) {
event.waitUntil(

fetch("https://yourwebiste.com/api/getNotification", {
  method: "get"

})
.then(function(response) {

return response.json();

})
.then(function(result) {

urlMain = result.data.url;
const options = {

body: result.data.msg,
  icon: result.data.logo,
  image: result.data.name,
  action: result.data.url
};

self.registration.showNotification(result.data.title, options);
})
);
});

self.addEventListener("notificationclick", function(event) {
event.notification.close();
const promiseChain = clients.openWindow(urlMain);

event.waitUntil(promiseChain);

});

index.html
Include manifest.json and notification.js file. Here notification.js is a controller and this works with service-worker.js.

<!DOCTYPE html>
<html>
<head>
<title>Push Demo</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="container">
<div class="desc"> </div>
<button class="pushButton" disabled>
Subscribe
</button>
</div>
<script src="notification.js"></script>
</body>
</html>

notification.js
JavaScript file to control all the subscribers' information. Bit large file split into different parts.

DocumentContent Loader initilise the service worker and this will verify the user subscription. This Code will launch the Allow and Block popup.

var isPushEnabled = false;
var pushButton = document.querySelector(".pushButton");
var desc = document.querySelector(".desc");
var disableText = "Unsubscribe";
var enableText = "Subscribe";
var disableDesc = "Thank you message";
var enableDesc = "Click <span class='high'>Allow</span> button top left.";

document.addEventListener("DOMContentLoaded", function() {

if (isPushEnabled) {
  unsubscribe();
} else {
  subscribe();
}
serviceWorkerCall();

});

serviceWorkerCall function will register the server-worker.js with initilise function for future actions.

function serviceWorkerCall() {
if ("serviceWorker" in navigator) {

navigator.serviceWorker.register("/service-worker.js")
   .then(initialiseState);

} else {

console.warn("Service workers aren't supported in this browser.");
}

}
function initialiseState() {
if (!("showNotification" in ServiceWorkerRegistration.prototype)) {

console.log("Notifications aren't supported.");
  return;
}
if (Notification.permission === "denied") {
 console.log("The user has blocked notifications.");
 return;
}
if (!("PushManager" in window)) {
 console.log("Push messaging isn't supported.");
 return;
}
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
   serviceWorkerRegistration.pushManager
   .getSubscription()
   .then(function(subscription) {
       pushButton.disabled = false;
       if (!subscription) {
         return;
    }
    if (subscription) {
      sendSubscriptionToServer(subscription);
    }
 pushButton.textContent = disableText;
   desc.textContent = disableDesc;
   isPushEnabled = true;
  })

.catch(function(e) {
console.log("Error during getSubscription()", e);
});
});
}

subscribe and unsubscribe function to change the message and button status.

function subscribe() {
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager
.subscribe({ userVisibleOnly: true })
.then(function(subscription) {

isPushEnabled = true;
  pushButton.textContent = disableText;
  desc.textContent = disableDesc;
  pushButton.disabled = false;

if (subscription) {

sendSubscriptionToServer(subscription);

}
})
.catch(function(e) {
if (Notification.permission === "denied") {

console.warn("Permission for Notification is denied");
pushButton.disabled = true;

} else {
console.error("Unable to subscribe to push", e);
pushButton.disabled = true;
pushButton.textContent = "Enable Push Messages";
}
});
});
}

function unsubscribe() {
pushButton.disabled = true;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager
.getSubscription()
.then(function(pushSubscription) {
if (!pushSubscription) {

isPushEnabled = false;
 pushButton.disabled = false;
 pushButton.textContent = enableText;
 desc.textContent = enableDesc;
 return;

}

var temp = pushSubscription.endpoint.split("/");
var registration_id = temp[temp.length - 1];
deleteSubscriptionToServer(registration_id);

pushSubscription.unsubscribe().then(function(successful) {

pushButton.disabled = false;
 pushButton.textContent = enableText;
 desc.textContent = enableDesc;
 isPushEnabled = false;

})
.catch(function(e) {

console.error("Error thrown while unsbscribing from push messaging.");

});
});
});
}

About functions are calling these following functions. Ajax calls to store and delete the user's registation ids.

// send subscription id to server
function sendSubscriptionToServer(subscription) {
var temp = subscription.endpoint.split("/");
var registration_id = temp[temp.length - 1];
fetch(

"http://yourwebsite.com/api/insertGCM/" + registration_id,
{
  method: "get"
 }
).then(function(response) {
 return response.json();
});

}

function deleteSubscriptionToServer(rid) {
fetch("https://yourwebsite.com/api/deleteGCM/" + rid, {

method: "get"

}).then(function(response) {
return response.json();
});
}

InsertGCM
PHP code to insert registartion id in GCM table. Alwasy check HTTP_ORIGIN to avoid wrong inputs.

function insertGCM($rid) {
$check = false;
if($_SERVER['HTTP_ORIGIN'] && $_SERVER['HTTP_ORIGIN'] == "http://yourwesbite.com"){
$check = true;
}

if($check){
$db = getDB();
$sql1 = "SELECT * FROM GMC WHERE rid=:rid";
$stmt1 = $db->prepare($sql1);
$stmt1->bindParam("rid", $rid,PDO::PARAM_STR);
$stmt1->execute();
$mainCount=$stmt1->rowCount();
if($mainCount < 1){

$sql = "INSERT INTO GMC(rid) VALUES (:rid)";
  $stmt = $db->prepare($sql);
  $stmt->bindParam("rid", $rid,PDO::PARAM_STR);
  $stmt->execute();
  echo '{"success":{"text":"done"}}';

}
else{
echo '{"success":{"text":"already users"}}';
}
}
else{
echo '{"error":{"text":"No access"}}';
}
}

Delete
Delete GCM table data based on the registration id.

function deleteGCM($rid) {
$check = false;
if($_SERVER['HTTP_ORIGIN'] && $_SERVER['HTTP_ORIGIN'] =="https://push.9lessons.info"){
$check = true;
}
if($check){
$db = getDB();
$sql = "DELETE FROM GMC WHERE rid=:rid";
$stmt = $db->prepare($sql);
$stmt->bindParam("rid", $rid,PDO::PARAM_STR);
$stmt->execute();
echo '{"success":{"text":"done"}}';
}
else{
echo '{"error":{"text":"No access"}}';
}
}

GetNotification
Get latest notifiaction for service-worker.js

function getNotification(){
$db = getDB();
$sql1 = "SELECT title, msg, logo, url, name FROM notifications ORDER BYnid DESC LIMIT 1";
$stmt1 = $db->prepare($sql1);
$stmt1->execute();
$notification = $stmt1->fetch(PDO::FETCH_OBJ);
$notification->action = $notification->url;
$notification->click_action = $notification->url;
if($notification){

$notification = json_encode($notification);
 echo '{"data": ' .$notification . '}';

}
}

Administrator for Sending Push Notifications

SendGCM.php
PHP Curl to communcate with Google Firebase APIs. Modify Your_Authorization_API and check Step 6.

<?php
function sendGCM($fields) {
$url = 'https://fcm.googleapis.com/fc...';
$fields = json_encode ($fields);
$headers = array (

'Authorization: key=' . "Your_Authorization_Key",

'Content-Type: application/json'
);
$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_IPRESOLVE, CURL_IPRESOLVE_V4 );
curl_setopt ( $ch, CURLOPT_POSTFIELDS, $fields );
$result = curl_exec ( $ch );
echo $result;
curl_close ( $ch );
}
?>

Push Notification Form
Simple HTML form with title, message, logo and url inputs. Make sure give some authentication/login to protect this page.

<form autocomplete="off" method="post" action="">
<div>
<label>Title</label>
<input type="text" placeholder="Title" name="title">
</div>
<div >
<label>Message</label>
<input type="text" placeholder="Message" name="msg">
</div>
<div >
<label>Logo</label>
<input type="text" placeholder="Logo" name="logo" value="">
</div>
<div >
<label>Name</label>
<input type="text" placeholder="Name" name="name">
</div>
<div >
<label>URL</label>
<input type="text" placeholder="URL" name="url">
</div>
<div >
<input type="submit" value="Push Notification" name="notificationSubmit"/>
</div>
</form>

home.php
This will insert form data and sending the push notications to registred users by calling $gcm->getIDs()

<?php
include('config.php');
include('sendGMC.php');
if(!empty($_POST['notificationSubmit'])){
$title=$_POST['title'];
$msg=$_POST['msg'];
$logo=$_POST['logo'];
$name=$_POST['name'];
$url=$_POST['url'];
if(strlen(trim($title))>1 && strlen(trim($msg))>1 &&strlen(trim($logo))>1 && strlen(trim($name))>1 && strlen(trim($url))>1 )
{

if($gcmClass->insertNotification($title, $msg, $logo, $name, $url)){
   $registrationId = $gcmClass->getIDs();
   $total_rids=[];
   foreach($registrationId as $r){
      array_push($total_rids, $r->rid);
   }
$fields = array('registration_ids'  => $total_rids);
sendGCM($fields);
echo "Done";

}
}
}
include('header.php');
?>

gcmClass.php
PHP class for insert notification information and getting all the registration ids.

<?php
class gcmClass
{
public function getIDs()
{
try{

$db = getDB();
 $stmt = $db->prepare("SELECT rid FROM GMC");
 $stmt->execute();
 $data=$stmt->fetchALL(PDO::FETCH_OBJ);
 return $data;

}
catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}

public function insertNotification($a, $b, $c, $d, $e)
{
try{
$db = getDB();
$stmt = $db->prepare("INSERT INTO notifications(title, msg, logo, name,url) VALUES(:title,:msg,:logo,:name,:url)");
$stmt->bindParam("title", $a,PDO::PARAM_STR) ;
$stmt->bindParam("msg", $b,PDO::PARAM_STR) ;
$stmt->bindParam("logo", $c,PDO::PARAM_STR) ;
$stmt->bindParam("name", $d,PDO::PARAM_STR) ;
$stmt->bindParam("url", $e,PDO::PARAM_STR) ;
$stmt->execute();
return true;
}
catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}
}
?>

config.php
Database configuration file. You have to modify the database username and password.

<?php
/ DATABASE CONFIGURATION /
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
define("BASE_URL", "https://www.yourwebsite.com/");
define("SITE_KEY", 'yourSecretKeyyx');
function getDB()
{

$dbhost=DB_SERVER;
$dbuser=DB_USERNAME;
$dbpass=DB_PASSWORD;
$dbname=DB_DATABASE;
$dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
$dbConnection->exec("set names utf8");
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConnection;

}

include('class/gcmClass.php');
$gcmClass = new gcmClass();

?>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程