Web Notification 結合 Firebase 向瀏覽器使用者發出網頁通知

Notification工作流程

1. 瀏覽器向使用者發出通知權限請求
2. 使用者若同意接收通知則發送通知
3. 使用者接受通知的方式分為前景與背景接收：
   前景(使用者正開啟瀏覽器)接收訊息 (init.js)
   — 背景(使用者已關閉瀏覽器)接受訊息 (firebase-messaging-sw.js)

Notification API

Notification 實作流程

1. 建立 firebase 專案與 Web 應用程式並取得設定檔

• 專案總覽 > 專案設定 > 一般設定：取得firebaseConfig
• 專案總覽 > 專案設定 > 雲端通訊：取得伺服器金鑰

2. 網站根目錄下建立 firebase-messaging-sw.js，目的是透過 Service Worker建立瀏覽器背景通知

*請注意：firebase-messaging-sw.js 必須在根目錄下建立！

/** firebase-messaging-sw.js */
// Service Worker所需js檔案
importScripts('https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js');
importScripts('https://www.gstatic.com/firebasejs/7.14.5/firebase-messaging.js');
// firebase設定檔
var firebaseConfig = {
  apiKey: "Your api key",
  authDomain: "Your api domain",
  databaseURL: "Your database url",
  projectId: "Your project id",
  storageBucket: "Your storage bucket",
  messagingSenderId: "Your messaging sender id",
  appId: "Your app id",
  measurementId: "Your measurement id"
};
// firebase初始化
firebase.initializeApp(firebaseConfig);
var messaging = firebase.messaging();
// 背景訊息接收處理(瀏覽器已關閉時觸發)
messaging.setBackgroundMessageHandler(function (payload) {
  let notificationTitle = payload.notification.title; // 通知標題
  let notificationOptions = {
      body: payload.notification.body, // 通知內容
      icon: payload.notification.icon, // 通知圖示
      click_action: payload.notification.url // 通知連結
  };
　return self.registration.showNotification(notificationTitle, notificationOptions);
});

3. 於可載入靜態檔案位置建立 init.js

/** init.js */
// 檢查瀏覽器是否支援通知
if ('serviceWorker' in navigator && 'Notification' in window && 'PushManager' in window) {
  // firebase設定檔
  var firebaseConfig = {
    apiKey: "Your api key",
    authDomain: "Your api domain",
    databaseURL: "Your database url",
    projectId: "Your project id",
    storageBucket: "Your storage bucket",
    messagingSenderId: "Your messaging sender id",
    appId: "Your app id",
    measurementId: "Your measurement id"
  };
  // firebase初始化
  firebase.initializeApp(firebaseConfig);
  var messaging = firebase.messaging();
  // 前景訊息接收處理(瀏覽器已開啟時觸發)
  messaging.onMessage(function (payload) {
  
    // 使用者已允許瀏覽器發送通知
    if (Notification.permission === 'granted') {
    
      // 瀏覽器向使用者發出通知
      let notification = new      Notification(payload.notification.title, {
        body: payload.notification.body, // 通知內容
        icon: payload.notification.icon // 通知圖示
      });
      // 通知連結
      notification.onclick = function (e) {
        e.preventDefault();
        window.open(payload.notification.click_action);
      }
    }
  });
  window.addEventListener('load', function () {
  
    // 註冊指定Service Worker
    navigator.serviceWorker.register('firebase-messaging-sw.js')
      .then(function (reg) {
        messaging.useServiceWorker(reg);
      });
    // 向使用者請求瀏覽器通知權限
    messaging.requestPermission().then(function () {
    // 檢查cookies是否存在token
    let ckv = document.cookie.replace(/(?:(?:^|.*;\\s*)augustusWsPush\s*\=\s*([^;]*).*$)|^.*$/, "$1") || null;
    // 重新請求權限取得token
    if (ckv === null) {
        messaging.getToken().then(function (currentToken) {
          let id = currentToken.split(':')[0];
          // token存入firebase
          firebase.database().ref('collection/' + id).set({
            'token': currentToken
          });
          document.cookie = 'augustusWsPush=' + currentToken;
        });
      // cookies內存在token
      } else {
        let id = ckv.split(':')[0];
        // token存入firebase
        firebase.database().ref('collection/' + id).set({
          'token': ckv
        });
      }
    });
  });
}

4. 引入使用 firebase 所需 javascript 檔案

<script src='https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js'></script>
<script src='https://www.gstatic.com/firebasejs/7.14.5/firebase-messaging.js'></script>
<script src='https://www.gstatic.com/firebasejs/7.14.5/firebase-database.js'></script>
<script src='init.js'></script>

5. 透過 PostMan 發送訊息通知進行測試

*請注意：Authorization 的值格式為 key= 伺服器金鑰

PostMan 請求標頭

PostMan 請求參數

API 回傳值

成功發送通知