Chrome目前使用Firebase雲訊息傳遞（FCM）作為其推送服務。 FCM最近採用了Web Push協議。 FCM是Google雲訊息傳遞（GCM）的後續產品，支援相同的功能和更多功能。

要使用Firebase雲訊息傳遞，您需要在Firebase上設定專案（請參閱VAPID部分以繞過此步驟）。 大致流程如下：

1、在Firebase控制檯中，選擇建立新專案。
2、提供專案名稱，然後單擊建立專案。
3、單擊導航面板中專案名稱旁邊的“設定”圖示，然後選擇“專案設定”。
4、開啟雲訊息傳遞選項卡。 您可以在此頁面找到您的伺服器金鑰和發件人ID。 儲存這些值。
為了將FCM郵件路由到正確的service worker，需要知道發件人ID。 通過將gcm_sender_id屬性新增到應用程式的manifest.json檔案來提供此功能。 例如：

{
  "name": "Push Notifications app",
  "gcm_sender_id": "370072803732"
}

要讓FCM將沒有負載的通知推送到您的Web客戶端，請求必須包含以下內容：

• 訂閱端點URL
• 公共伺服器金鑰。 FCM使用它來檢查發出請求的伺服器是否允許向接收使用者傳送訊息。
  生產站點或應用程式通常會設定一個服務，以讓伺服器與FCM進行互動。

我們可以使用cURL在我們的應用程式中測試推送訊息。 我們可以向推送服務傳送一個名為“tickle”的空訊息，然後推送服務向瀏覽器傳送訊息。 如果通知顯示，那麼我們已經做了一切正確的，我們的應用程式已準備好從伺服器推送訊息。

傳送請求到FCM發出推送訊息的cURL命令：

curl "ENDPOINT_URL" --request POST --header "TTL: 60" --header "Content-Length: 0" \
--header "Authorization: key=SERVER_KEY"

例如：

curl "https://android.googleapis.com/gcm/send/fYFVeJQJ2CY:APA91bGrFGRmy-sY6NaF8a...gls7HZcwJL4 \ 
LFxjg0y0-ksEhKjpeFC5P" --request POST --header "TTL: 60"
 
 --header "Content-Length: 0" \
 --header "Authorization: key=AIzaSyD1JcZ8WM1vTtH6Y0tXq_Pnuw4jgj_92yg"

向用戶推送訊息相對比較容易。 但是，到目前為止，我們傳送的通知都是空的。 Chrome和Firefox支援使用推送訊息將資料傳送給service worker的功能。
我們先來看看service worker需要進行哪些更改才能將資料從推送訊息中提取出來。

self.addEventListener('push', function(e) {
  var body;

  if (e.data) {
    body = e.data.text();
  } else {
    body = 'Push message no payload';
  }

  var options = {
    body: body,
    icon: 'images/notification-flat.png',
    vibrate: [100, 50, 100],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: 1
    },
    actions: [
      {action: 'explore', title: 'Explore this new world',
        icon: 'images/checkmark.png'},
      {action: 'close', title: 'I don't want any of this',
        icon: 'images/xmark.png'},
    ]
  };
  e.waitUntil(
    self.registration.showNotification('Push Notification', options)
  );
});

當我們收到帶有資料的推送通知時，資料直接在事件物件上可用。 這些資料可以是任何型別，json，blob，array或text。

服務端推送
以nodejs為例：
安裝推送服務：npm install web-push

var webPush = require('web-push');

var pushSubscription = {"endpoint":"https://android.googleapis.com/gcm/send/f1LsxkKphfQ:APA91bFUx7ja4BK4JVrNgVjpg1cs9lGSGI6IMNL4mQ3Xe6mDGxvt_C_gItKYJI9CAx5i_Ss6cmDxdWZoLyhS2RJhkcv7LeE6hkiOsK6oBzbyifvKCdUYU7ADIRBiYNxIVpLIYeZ8kq_A",
"keys":{"p256dh":"BLc4xRzKlKORKWlbdgFaBrrPK3ydWAHo4M0gs0i1oEKgPpWC5cW8OCzVrOQRv-1npXRWk8udnW3oYhIO4475rds=", "auth":"5I2Bu2oKdyy9CwL8QVF0NQ=="}};

var payload = 'Here is a payload!';

var options = {
  gcmAPIKey: 'AIzaSyD1JcZ8WM1vTtH6Y0tXq_Pnuw4jgj_92yg',
  TTL: 60
};

webPush.sendNotification(
  pushSubscription,
  payload,
  options
);

本示例將訂閱物件，有效內容和伺服器金鑰傳遞給sendNotification方法。 它還傳遞一個生存時間，這是以秒為單位的值，它描述了推送服務保留推送訊息的時間（預設為四周）。

通過VAPID身份驗證識別您的服務
Web推送協議旨在通過保持使用者匿名性，並且不需要您的應用程式和推送服務之間的高度認證來尊重使用者的隱私。這提出了一些挑戰：

• 未經認證的推送服務面臨更大的攻擊風險
• 擁有端點的任何應用程式伺服器都能夠向用戶傳送訊息
• 如果出現問題，推送服務無法與開發者聯絡
  解決方案是讓釋出者使用“自願應用伺服器標識”（VAPID）Web推送協議。這至少為應用程式伺服器提供了一個穩定的身份，這也可以包括聯絡資訊，例如電子郵件地址。

該規範列出了使用VAPID的幾個好處：

• 推送服務可以使用一致的身份為應用程式伺服器建立期望行為。然後可以使用明顯偏離既定標準來觸發異常處理程式。
• 在特殊情況下，自願提供的聯絡資訊可用於聯絡應用伺服器運營商。
• 部署推送服務的經驗表明，軟體錯誤或異常情況會導致推送訊息量大幅增加。聯絡應用程式伺服器的運營商已被證明是有價值的。
• 即使沒有可用的聯絡資訊，在選擇是否丟棄推送訊息時，具有良好聲譽的應用程式伺服器可能優先於未識別的應用程式伺服器。
• 使用VAPID還可以避免傳送推送訊息的FCM特定步驟。您不再需要Firebase專案，gcm_sender_id或Authorization標頭。

使用VAPID
這個過程非常簡單：

您的應用程式伺服器建立一個公鑰/私鑰對。 公鑰是給你的web app。
當用戶選擇接收推送時，將公鑰新增到subscribe（）呼叫options物件。
當您的伺服器傳送推送訊息時，請將簽名的JSON Web Token與公鑰一起包含在內。

建立一個公鑰/私鑰對
以下是規範中有關VAPID公鑰/私鑰格式的相關部分：

應用程式伺服器應該在P-256曲線上生成並維護一個可用於橢圓曲線數字簽名（ECDSA）的簽名金鑰對。
可以藉助web-push node library完成這部分：

function generateVAPIDKeys() {  
  const vapidKeys = webpush.generateVAPIDKeys();
  return {
    publicKey: vapidKeys.publicKey,  
    privateKey: vapidKeys.privateKey,  
  };  
}

訂閱公鑰
要訂閱一個Chrome使用者使用VAPID公鑰進行推送，請使用subscribe（）方法的applicationServerKey引數將公鑰作為Uint8Array傳遞。

const publicKey = new Uint8Array（[0x4，0x37，0x77，0xfe，....]）;
serviceWorkerRegistration.pushManager.subscribe（
  {
     userVisibleOnly：true，
     applicationServerKey：publicKey
  }
）;

您將通過檢查生成的訂閱物件中的端點來了解它是否工作正常; 如果來源是fcm.googleapis.com，則表示正在執行。

注意：儘管這是一個FCM URL，但是使用Web推送協議而不是FCM協議，這樣您的伺服器端程式碼將適用於任何推送服務。
傳送推送資訊

要使用VAPID傳送訊息，可以使用另外兩個HTTP標頭進行正常的Web推送協議請求：Authorization header和JWT header。

• Authorization header

授權標頭是一個帶有“WebPush”的簽名JSON Web Token（JWT）。

構成格式為：
<JWTHeader>.<Payload>.<Signature>

JWT header：

{  
  "typ": "JWT",  //型別
  "alg": "ES256"  //簽名演算法名稱
}

Payload:（這個JSON物件是base64 url編碼）

{  
    "aud": "http://push-service.example.com",  //可以通過const audience = new URL(subscription.endpoint).origin獲得
    "exp": Math.floor((Date.now() / 1000) + (12 * 60 * 60)),  //過期時間
    "sub": "mailto: [email protected]"  //可以是一個聯絡的url或mailto
}

Signature
這個簽名是由編碼過後的header和payload用點連線然後與之前建立的VAPID生成的私鑰加密而來的。 簽名庫
簽名的JWT被用作授權頭，“WebPush”作為字首，如下所示：

WebPush eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJhdWQiOiJodHRwczovL2ZjbS5nb29nbGVhcGlzLmNvbSIsImV4cCI6MTQ2NjY2ODU5NCwic3ViIjoibWFpbHRvOnNpbXBsZS1wdXNoLWRlbW9AZ2F1bnRmYWNlLmNvLnVrIn0.Ec0VR8dtf5qb8Fb5Wk91br-evfho9sZT6jBRuQwxVMFyK5S8bhOjk8kuxvilLqTBmDXJM5l3uVrVOQirSsjq0A

這裡有幾點需要指出。 首先，授權標題字面上包含單詞WebPush，後面跟著一個空格，然後是JWT。 還要注意分隔JWT header，payload和signature的點。

Crypto-Key
與授權標題一樣，您必須將您的VAPID公鑰新增到加密金鑰標頭中，作為base64 url編碼的字串，其字首為p256ecdsa =。

p256ecdsa=BDd3_hVL9fZi9Ybo2UUzA284WG5FZR30_95YeZJsiApwXKpNcF1rRPF3foIiBHXRdJI2Qhumhf6_LFTeZaNndIo

當您使用加密資料傳送通知時，您已經使用Crypto-Key header，因此要新增應用程式伺服器金鑰，只需在新增上述內容之前新增逗號，如下：

dh=BGEw2wsHgLwzerjvnMTkbKrFRxdmwJ5S_k7zi7A1coR_sVjHmGrlvzYpAT1n4NPbioFlQkIrTNL8EH4V3ZZ4vJE,
p256ecdsa=BDd3_hVL9fZi9Ybo2UUzA284WG5FZR30_95YeZJsiApwXKpNcF1rRPF3foIiBHXRdJI2Qhumhf6_LFTeZaN

在版本52之前的Chrome中存在一個缺陷，在Crypto-key header中需要使用分號而不是逗號。

cURL傳送推送訊息：

curl "https://updates.push.services.mozilla.com/wpush/v1/gAAAAABXmk....dyR" --request POST --header "TTL: 60" --header "Content-Length: 0" --header "Authorization: WebPush eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJhdWQiOiJodHRwczovL2ZjbS5nb29nbGVhcGlzLmNvbSIsImV4cCI6MTQ2NjY2ODU5NCwic3ViIjoibWFpbHRvOnNpbXBsZS1wdXNoLWRlbW9AZ2F1bnRmYWNlLmNvLnVrIn0.Ec0VR8dtf5qb8Fb5Wk91br-evfho9sZT6jBRuQwxVMFyK5S8bhOjk8kuxvilLqTBmDXJM5l3uVrVOQirSsjq0A" --header "Crypto-Key: p256ecdsa=BDd3_hVL9fZi9Ybo2UUzA284WG5FZR30_95YeZJsiApwXKpNcF1rRPF3foIiBHXRdJI2Qhumhf6_LFTeZaNndIo"

nodejs傳送推送訊息：

var webPush = require('web-push');

var pushSubscription = {"endpoint":"https://fcm.googleapis.com/fcm/send/c0NI73v1E0Y:APA91bEN7z2weTCpJmcS-MFyfbgjtmlAWuV5YaaNw625_Rq2-f0ZrVLdRPXKGm7B3uwfygicoCeEoWQxCKIxlL3RWG2xkHs6C8-H_cxq-4Z-isAiZ3ixo84-2HeXB9eUvkfNO_t1jd5s","keys":{"p256dh":"BHxSHtYS0q3i0Tb3Ni6chC132ZDPd5uI4r-exy1KsevRqHJvOM5hNX-M83zgYjp-1kdirHv0Elhjw6Hivw1Be5M=","auth":"4a3vf9MjR9CtPSHLHcsLzQ=="}};

var vapidPublicKey = 'BAdXhdGDgXJeJadxabiFhmlTyF17HrCsfyIj3XEhg1j-RmT2wXU3lHiBqPSKSotvtfejZlAaPywJ9E-7AxXQBj4
';
var vapidPrivateKey = 'VCgMIYe2BnuNA4iCfR94hA6pLPT3u3ES1n1xOTrmyLw
';

var payload = 'Here is a payload!';

var options = {
  vapidDetails: {
    subject: 'mailto:[email protected]le.com',
    publicKey: vapidPublicKey,
    privateKey: vapidPrivateKey
  },
  TTL: 60
};

webPush.sendNotification(
  pushSubscription,
  payload,
  options
);