Web端消息推送最佳实践

Notification.requestPermission().then((permission) => { console.log("permission=", permission); if (permission === "granted") {    //do something } else if (permission === "denied") {    //do something } else {    //do something }});

// 注册Service Workerif ("serviceWorker" in navigator && "PushManager" in window) {  navigator.serviceWorker    .register("./service-worker.js")    .then(function (reg) {});  navigator.serviceWorker.ready.then(function (reg) {    subscribe(reg);  });}

// 发起订阅function subscribe(serviceWorkerReg) {  serviceWorkerReg.pushManager    .subscribe({ userVisibleOnly: true, applicationServerKey: "xxxx" })    .then(function (subscribe) {      //获取到的subscribe发送推送给后端存储起来      sendToServer(subscribe);    })    .catch(function () {      // 用户拒绝了订阅请求      if (Notification.permission === "denied") {        //do something      }    });}

const webpush = require('web-push');//VAPID keys should only be generated only once.const vapidKeys = webpush.generateVAPIDKeys();console.log(vapidKeys.publicKey, vapidKeys.privateKey);

const webpush = require("web-push");// 从数据库取出用户的subsciption,例如取出的subsciption如下const pushSubscription = {  endpoint: "xxx",  expirationTime: null,  keys: {    p256dh: "xxxx",    auth: "xxxx",  },};// push的数据const payload = {  title: "消息标题",  body: "点开看看吧",  icon: "xxx.png",  data: { url: "https://www.xxx.com" },};webpush.sendNotification(pushSubscription, JSON.stringify(payload));

this.addEventListener("push", function (event) {  console.log("[Service Worker] Push Received.");  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);  let notificationData = event.data.json();  const title = notificationData.title;  // 弹通知消息框  event.waitUntil(self.registration.showNotification(title, notificationData));});

//检查是否支持service worker、notification、pushManagerfunction checkFirebaseSupport() {  return (    checkNotificationSupport() &&    checkServiceworkerSupport() &&    checkPushMessageSupport()  );}
//Notification支持判断function checkNotificationSupport() {  return "Notification" in window;}
//service worker支持判断function checkServiceworkerSupport() {  return "serviceWorker" in window.navigator;}
//PushManager支持判断function checkPushMessageSupport() {  return "PushManager" in window;}

import * as firebase from "firebase";//firebase项目初始化function firebaseInit() {  firebase.initializeApp({    messagingSenderId: FCM_APP_ID,    projectId: PROJECT_ID,    apiKey: API_KEY,    appId: APP_ID,  });  this.messaging = firebase.messaging();  window.messaging = this.messaging;  htmlOnMessageInit();}//当页面聚焦时，监听推送事件，必须初始化，否则收不到推送function htmlOnMessageInit() {  window.addEventListener("load", function () {    //手动更新service worker    navigator.serviceWorker      .getRegistration("/firebase-cloud-messaging-push-scope")      .then((registration) => {        registration && registration.update();      });    if (window.messaging) {      //firebase封装的方法,监听service worker的postMessage事件      //当收到推送且用户当前浏览器页面处于该service worker的作用域范围时，能拿到推送的数据payload      //考虑到用户已经处于我们平台的页面了，此时不显示通知，实际上是可以调用notification的api去显示通知的      window.messaging.onMessage(function (payload) {        console.log("Message received:", payload);      });    }  });}

//调起授权function getRequestPermission(grantedCallback, deniedCallback, closeCallback) {  //调起授权询问  Notification.requestPermission().then(async (permission) => {    switch (permission) {      case "granted": {        //此处可加上允许授权事件上报        //调用获取subscribe方法        let token = await _this.getToken();        if (token) {          grantedCallback(token);          sendTokenToServer(token);        }        break;      }      case "denied": {        //此处可加上拒绝授权事件上报        deniedCallback();        break;      }      default: {        //此处可加上默认处理、关闭通知授权事件上报        closeCallback();        break;      }    }  });}

//获取firebase tokenasync function getToken() {  try {    //firebase封装好的getToken()方法获取到subscribe    let token = await this.messaging.getToken();    return token;  } catch (e) {    console.log("get token error", e);    return false;  }}

from firebase_admin import messagingimport sysimport jsoncred = credentials.Certificate('xxxx.json')default_app = firebase_admin.initialize_app(cred)message = messaging.Message(    data={        'data_title': 'test title',        'data_body': 'hahahaha',        'data_icon': 'xxx',        'jump_url': 'xxx',        'send_id' : '123123',        'isShow': 'true',    },    token='xxx')
response = messaging.send(message)

if (window.messaging) {  //此处是与service worker进行通信  window.messaging.onMessage(function (payload) {    console.log("Message received:", payload);  });}

//当页面位于后台时，调用的是此方法messaging.setBackgroundMessageHandler(function (payload) {  console.log(    "[firebase-messaging-sw.js] Received background message ",    payload  );  if (payload.data.isShow === "true") {    //payload.data可获取到消息的内容    const notification = payload.data;    //设置消息的标题、内容、图标、点击需要跳转的地址、该消息的标识    const notificationTitle = notification.data_title;    const notificationOptions = {      body: notification.data_body,      icon: notification.data_icon,      data: {        linkUrl: notification.jump_url,        sendId: notification.send_id,      },    };    //向后端发送收到消息统计    //service worker限制无法使用XMLHttpRequest,可使用fetch api发起请求    var request = new Request(      `https://xxx.xxx.com/game_message/show_times?SEND_ID=${notification.send_id}`,      {        method: "GET",        mode: "no-cors",        redirect: "follow",        headers: new Headers({          "Content-Type": "text/plain",        }),      }    );    fetch(request)      .then(function () {        console.log("send show notification statistics succ");      })      .catch(function (err) {        console.log("send show notification statistics fail");      });    //设置显示通知    return self.registration.showNotification(      notificationTitle,      notificationOptions    );  }});

navigator.serviceWorker  .getRegistration("/firebase-cloud-messaging-push-scope")  .then((registration) => {    registration && registration.update();  });

self.addEventListener("install", function (event) {  self.skipWaiting();})

messaging.setBackgroundMessageHandler(function (payload) {  //payload.data.isShow === 'true'才显示消息，否则是token有效性检查，不显示通知  if (payload.data.isShow === "true") {    const notification = payload.data;    const notificationTitle = notification.data_title;    const notificationOptions = {      body: notification.data_body,      icon: notification.data_icon,      data: {        linkUrl: notification.jump_url,        sendId: notification.send_id,      },    };    return self.registration.showNotification(      notificationTitle,      notificationOptions    );  }});