摘要：本文是學(xué)習(xí)與實(shí)踐系列的第五篇文章。實(shí)際上，消息推送與提醒是兩個(gè)功能和。在這一篇里，我們先來(lái)學(xué)習(xí)如何使用進(jìn)行消息推送。而當(dāng)服務(wù)端要推送消息時(shí)，會(huì)使用私鑰對(duì)發(fā)送的數(shù)據(jù)進(jìn)行數(shù)字簽名，并根據(jù)數(shù)字簽名生成一個(gè)叫請(qǐng)求頭。

《PWA學(xué)習(xí)與實(shí)踐》系列文章已整理至gitbook - PWA學(xué)習(xí)手冊(cè)，文字內(nèi)容已同步至learning-pwa-ebook。轉(zhuǎn)載請(qǐng)注明作者與出處。

本文是《PWA學(xué)習(xí)與實(shí)踐》系列的第五篇文章。文中的代碼都可以在learning-pwa的push分支上找到（git clone后注意切換到push分支）。

PWA作為時(shí)下最火熱的技術(shù)概念之一，對(duì)提升Web應(yīng)用的安全、性能和體驗(yàn)有著很大的意義，非常值得我們?nèi)チ私馀c學(xué)習(xí)。對(duì)PWA感興趣的朋友歡迎關(guān)注《PWA學(xué)習(xí)與實(shí)踐》系列文章。

在之前的幾篇文章中，我和大家分享了如何使用manifest（以及meta標(biāo)簽）讓你的Web App更加“native”；以及如何使用Service Worker來(lái)cache資源，加速Web App的訪問(wèn)速度，提供部分離線功能。在接下來(lái)的內(nèi)容里，我們會(huì)探究PWA中的另一個(gè)重要功能——消息推送與提醒（Push & Notification）。這個(gè)能力讓我們可以從服務(wù)端向用戶推送各類消息并引導(dǎo)用戶觸發(fā)相應(yīng)交互。

實(shí)際上，消息推送與提醒是兩個(gè)功能——Push API 和 Notification API。為了大家能夠更好理解其中的相關(guān)技術(shù)，我也會(huì)分為Push（推送消息）與Notification（展示提醒）兩部分來(lái)介紹。在這一篇里，我們先來(lái)學(xué)習(xí)如何使用Push API進(jìn)行消息推送。

Push API 和 Notification API其實(shí)是兩個(gè)獨(dú)立的技術(shù)，完全可以分開使用；不過(guò)Push API 和 Notification API相結(jié)合是一個(gè)常見的模式。

Web Push的整個(gè)流程相較之前的內(nèi)容來(lái)說(shuō)有些復(fù)雜。因此，在進(jìn)入具體技術(shù)細(xì)節(jié)之前，我們需要先了解一下整個(gè)Push的基本流程與相關(guān)概念。

如果你對(duì)Push完全不了解，可能會(huì)認(rèn)為，Push是我們的服務(wù)端直接與瀏覽器進(jìn)行交互，使用長(zhǎng)連接、WebSocket或是其他技術(shù)手段來(lái)向客戶端推送消息。然而，這里的Web Push并非如此，它其實(shí)是一個(gè)三方交互的過(guò)程。

在Push中登場(chǎng)的三個(gè)重要“角色”分別是：

瀏覽器：就是我們的客戶端

Push Service：專門的Push服務(wù)，你可以認(rèn)為是一個(gè)第三方服務(wù)，目前chrome與firefox都有自己的Push Service Service。理論上只要瀏覽器支持，可以使用任意的Push Service

后端服務(wù)：這里就是指我們自己的后端服務(wù)

下面就介紹一下這三者在Web Push中是如何交互。

下圖來(lái)自Web Push協(xié)議草案，是Web Push的整個(gè)流程：

    +-------+           +--------------+       +-------------+
    |  UA   |           | Push Service |       | Application |
    +-------+           +--------------+       |   Server    |
        |                      |               +-------------+
        |      Subscribe       |                      |
        |--------------------->|                      |
        |       Monitor        |                      |
        |<====================>|                      |
        |                      |                      |
        |          Distribute Push Resource           |
        |-------------------------------------------->|
        |                      |                      |
        :                      :                      :
        |                      |     Push Message     |
        |    Push Message      |<---------------------|
        |<---------------------|                      |
        |                      |                      |

該時(shí)序圖表明了Web Push的各個(gè)步驟，我們可以將其分為訂閱（subscribe）與推送（push）兩部分來(lái)看。

subscribe，首先是訂閱：

Ask Permission：這一步不再上圖的流程中，這其實(shí)是瀏覽器中的策略。瀏覽器會(huì)詢問(wèn)用戶是否允許通知，只有在用戶允許后，才能進(jìn)行后面的操作。

Subscribe：瀏覽器（客戶端）需要向Push Service發(fā)起訂閱（subscribe），訂閱后會(huì)得到一個(gè)PushSubscription對(duì)象

Monitor：訂閱操作會(huì)和Push Service進(jìn)行通信，生成相應(yīng)的訂閱信息，Push Service會(huì)維護(hù)相應(yīng)信息，并基于此保持與客戶端的聯(lián)系；

Distribute Push Resource：瀏覽器訂閱完成后，會(huì)獲取訂閱的相關(guān)信息（存在于PushSubscription對(duì)象中），我們需要將這些信息發(fā)送到自己的服務(wù)端，在服務(wù)端進(jìn)行保存。

Push Message，然后是推送：

Push Message階段一：我們的服務(wù)端需要推送消息時(shí)，不直接和客戶端交互，而是通過(guò)Web Push協(xié)議，將相關(guān)信息通知Push Service；

Push Message階段二：Push Service收到消息，通過(guò)校驗(yàn)后，基于其維護(hù)的客戶端信息，將消息推送給訂閱了的客戶端；

最后，客戶端收到消息，完成整個(gè)推送過(guò)程。

在上面的Push流程中，出現(xiàn)了一個(gè)比較少接觸到的角色：Push Service。那么什么是Push Service呢？

A push service receives a network request, validates it and delivers a push message to the appropriate browser.

Push Service可以接收網(wǎng)絡(luò)請(qǐng)求，校驗(yàn)該請(qǐng)求并將其推送給合適的瀏覽器客戶端。Push Service還有一個(gè)非常重要的功能：當(dāng)用戶離線時(shí)，可以幫我們保存消息隊(duì)列，直到用戶聯(lián)網(wǎng)后再發(fā)送給他們。

目前，不同的瀏覽器廠商使用了不同的Push Service。例如，chrome使用了google自家的FCM（前身為GCM），firefox也是使用自家的服務(wù)。那么我們是否需要寫不同的代碼來(lái)兼容不同的瀏覽器所使用的服務(wù)呢？答案是并不用。Push Service遵循Web Push Protocol，其規(guī)定了請(qǐng)求及其處理的各種細(xì)節(jié)，這就保證了，不同的Push Service也會(huì)具有標(biāo)準(zhǔn)的調(diào)用方式。

這里再提一點(diǎn)：我們?cè)谏弦还?jié)中說(shuō)了Push的標(biāo)準(zhǔn)流程，其中第一步就是瀏覽器發(fā)起訂閱，生成一個(gè)PushSubscription對(duì)。Push Service會(huì)為每個(gè)發(fā)起訂閱的瀏覽器生成一個(gè)唯一的URL，這樣，我們?cè)诜?wù)端推送消息時(shí)，向這個(gè)URL進(jìn)行推送后，Push Service就會(huì)知道要通知哪個(gè)瀏覽器。而這個(gè)URL信息也在PushSubscription對(duì)象里，叫做endpoint。

那么，如果我們知道了endpoint的值，是否就代表我們可以向客戶端推送消息了呢？并非如此。下面會(huì)簡(jiǎn)單介紹一下Web Push中的安全策略。

在Web Push中，為了保證客戶端只會(huì)收到其訂閱的服務(wù)端推送的消息（其他的服務(wù)端即使在拿到endpoint也無(wú)法推送消息），需要對(duì)推送信息進(jìn)行數(shù)字簽名。該過(guò)程大致如下：

在Web Push中會(huì)有一對(duì)公鑰與私鑰?？蛻舳顺钟泄€，而服務(wù)端持有私鑰?？蛻舳嗽谟嗛啎r(shí)，會(huì)將公鑰發(fā)送給Push Service，而Push Service會(huì)將該公鑰與相應(yīng)的endpoint維護(hù)起來(lái)。而當(dāng)服務(wù)端要推送消息時(shí)，會(huì)使用私鑰對(duì)發(fā)送的數(shù)據(jù)進(jìn)行數(shù)字簽名，并根據(jù)數(shù)字簽名生成一個(gè)叫】Authorization請(qǐng)求頭。Push Service收到請(qǐng)求后，根據(jù)endpoint取到公鑰，對(duì)數(shù)字簽名解密驗(yàn)證，如果信息相符則表明該請(qǐng)求是通過(guò)對(duì)應(yīng)的私鑰加密而成，也表明該請(qǐng)求來(lái)自瀏覽器所訂閱的服務(wù)端。反之亦然。

而公鑰與私鑰如何生成，會(huì)在第三部分的實(shí)例中講解。

到這里，我們已經(jīng)基本了解了Web Push的流程。光說(shuō)不練假把式，下面我就通過(guò)具體代碼來(lái)說(shuō)明如何使用Web Push。

這部分會(huì)基于sw-cache分支上的代碼，繼續(xù)增強(qiáng)我們的“圖書搜索”WebApp。

為了使文章與代碼更清晰，將Web Push分為這幾個(gè)部分：

瀏覽器發(fā)起訂閱，并將訂閱信息發(fā)送至后端；

將訂閱信息保存在服務(wù)端，以便今后推送使用；

服務(wù)端推送消息，向Push Service發(fā)起請(qǐng)求；

瀏覽器接收Push信息并處理。

友情提醒：由于Chrome所依賴的Push Service——FCM在國(guó)內(nèi)不可訪問(wèn)，所以要正常運(yùn)行demo中的代碼需要“梯子”，或者可以選擇Firefox來(lái)進(jìn)行測(cè)試。

首先，我們需要使用PushManager的subscribe方法來(lái)在瀏覽器中進(jìn)行訂閱。

在《讓你的WebApp離線可用》中我們已經(jīng)知道了如何注冊(cè)Service Worker。當(dāng)我們注冊(cè)完Service Worker后會(huì)得到一個(gè)Registration對(duì)象，通過(guò)調(diào)用Registration對(duì)象的registration.pushManager.subscribe()方法可以發(fā)起訂閱。

為了使代碼更清晰，本篇demo在之前的基礎(chǔ)上，先抽離出Service Worker的注冊(cè)方法：

// index.js
function registerServiceWorker(file) {
    return navigator.serviceWorker.register(file);
}

然后定義了subscribeUserToPush()方法來(lái)發(fā)起訂閱：

// index.js
function subscribeUserToPush(registration, publicKey) {
    var subscribeOptions = {
        userVisibleOnly: true,
        applicationServerKey: window.urlBase64ToUint8Array(publicKey)
    }; 
    return registration.pushManager.subscribe(subscribeOptions).then(function (pushSubscription) {
        console.log("Received PushSubscription: ", JSON.stringify(pushSubscription));
        return pushSubscription;
    });
}

這里使用了registration.pushManager.subscribe()方法中的兩個(gè)配置參數(shù)：userVisibleOnly和applicationServerKey。

userVisibleOnly表明該推送是否需要顯性地展示給用戶，即推送時(shí)是否會(huì)有消息提醒。如果沒(méi)有消息提醒就表明是進(jìn)行“靜默”推送。在Chrome中，必須要將其設(shè)置為true，否則瀏覽器就會(huì)在控制臺(tái)報(bào)錯(cuò)：

applicationServerKey是一個(gè)客戶端的公鑰，VAPID定義了其規(guī)范，因此也可以稱為VAPID keys。如果你還記得2.3中提到的安全策略，應(yīng)該對(duì)這個(gè)公鑰不陌生。該參數(shù)需要Unit8Array類型。因此定義了一個(gè)urlBase64ToUint8Array方法將base64的公鑰字符串轉(zhuǎn)為Unit8Array。subscribe()也是一個(gè)Promise方法，在then中我們可以得到訂閱的相關(guān)信息——一個(gè)PushSubscription對(duì)象。下圖展示了這個(gè)對(duì)象中的一些信息。注意其中的endpoint，Push Service會(huì)為每個(gè)客戶端隨機(jī)生成一個(gè)不同的值.

之后，我們?cè)賹?b>PushSubscription信息發(fā)送到后端。這里定義了一個(gè)sendSubscriptionToServer()方法，該方法就是一個(gè)普通的XHR請(qǐng)求，會(huì)向接口post訂閱信息，為了節(jié)約篇幅就不列出具體代碼了。

最后，將這一系列方法組合在一起。當(dāng)然，使用Web Push前，還是需要進(jìn)行特性檢測(cè)"PushManager" in window。

// index.js
if ("serviceWorker" in navigator && "PushManager" in window) {
    var publicKey = "BOEQSjdhorIf8M0XFNlwohK3sTzO9iJwvbYU-fuXRF0tvRpPPMGO6d_gJC_pUQwBT7wD8rKutpNTFHOHN3VqJ0A";
    // 注冊(cè)service worker
    registerServiceWorker("./sw.js").then(function (registration) {
        console.log("Service Worker 注冊(cè)成功");
        // 開啟該客戶端的消息推送訂閱功能
        return subscribeUserToPush(registration, publicKey);
    }).then(function (subscription) {
        var body = {subscription: subscription};
        // 為了方便之后的推送，為每個(gè)客戶端簡(jiǎn)單生成一個(gè)標(biāo)識(shí)
        body.uniqueid = new Date().getTime();
        console.log("uniqueid", body.uniqueid);
        // 將生成的客戶端訂閱信息存儲(chǔ)在自己的服務(wù)器上
        return sendSubscriptionToServer(JSON.stringify(body));
    }).then(function (res) {
        console.log(res);
    }).catch(function (err) {
        console.log(err);
    });
}

注意，這里為了方便我們后面的推送，為每個(gè)客戶端生成了一個(gè)唯一IDuniqueid，這里使用了時(shí)間戳生成簡(jiǎn)單的uniqueid。

此外，由于userVisibleOnly為true，所以需要用戶授權(quán)開啟通知權(quán)限，因此我們會(huì)看到下面的提示框，選擇“允許”即可。你可以在設(shè)置中進(jìn)行通知的管理。

為了存儲(chǔ)瀏覽器post來(lái)的訂閱信息，服務(wù)端需要增加一個(gè)接口/subscription，同時(shí)添加中間件koa-body用于處理body

// app.js
const koaBody = require("koa-body");
/**
 * 提交subscription信息，并保存
 */
router.post("/subscription", koaBody(), async ctx => {
    let body = ctx.request.body;
    await util.saveRecord(body);
    ctx.response.body = {
        status: 0
    };
});

接收到subscription信息后，需要在服務(wù)端進(jìn)行保存，你可使用任何方式來(lái)保存它：mysql、redis、mongodb……這里為了方便，我使用了nedb來(lái)進(jìn)行簡(jiǎn)單的存儲(chǔ)。nedb不需要部署安裝，可以將數(shù)據(jù)存儲(chǔ)在內(nèi)存中，也可以持久化，nedb的api和mongodb也比較類似。

這里util.saveRecord()做了這些工作：首先，查詢subscription信息是否存在，若已存在則只更新uniqueid；否則，直接進(jìn)行存儲(chǔ)。

至此，我們就將客戶端的訂閱信息存儲(chǔ)完畢了?，F(xiàn)在，就可以等待今后推送時(shí)使用。

在實(shí)際中，我們一般會(huì)給運(yùn)營(yíng)或產(chǎn)品同學(xué)提供一個(gè)推送配置后臺(tái)。可以選擇相應(yīng)的客戶端，填寫推送信息，并發(fā)起推送。為了簡(jiǎn)單起見，我并沒(méi)有寫一個(gè)推送配置后臺(tái)，而只提供了一個(gè)post接口/push來(lái)提交推送信息。后期我們完全可以開發(fā)相應(yīng)的推送后臺(tái)來(lái)調(diào)用該接口。

// app.js
/**
 * 消息推送API，可以在管理后臺(tái)進(jìn)行調(diào)用
 * 本例子中，可以直接post一個(gè)請(qǐng)求來(lái)查看效果
 */
router.post("/push", koaBody(), async ctx => {
    let {uniqueid, payload} = ctx.request.body;
    let list = uniqueid ? await util.find({uniqueid}) : await util.findAll();
    let status = list.length > 0 ? 0 : -1;

    for (let i = 0; i < list.length; i++) {
        let subscription = list[i].subscription;
        pushMessage(subscription, JSON.stringify(payload));
    }

    ctx.response.body = {
        status
    };
});

來(lái)看一下/push接口。

首先，根據(jù)post的參數(shù)不同，我們可以通過(guò)uniqueid來(lái)查詢某條訂閱信息：util.find({uniqueid})；也可以從數(shù)據(jù)庫(kù)中查詢出所有訂閱信息：util.findAll()。

然后通過(guò)pushMessage()方法向Push Service發(fā)送請(qǐng)求。根據(jù)第二節(jié)的介紹，我們知道，該請(qǐng)求需要符合Web Push協(xié)議。然而，Web Push協(xié)議的請(qǐng)求封裝、加密處理相關(guān)操作非常繁瑣。因此，Web Push為各種語(yǔ)言的開發(fā)者提供了一系列對(duì)應(yīng)的庫(kù)：Web Push Libaray，目前有NodeJS、PHP、Python、Java等。把這些復(fù)雜而繁瑣的操作交給它們可以讓我們事半功倍。

最后返回結(jié)果，這里只是簡(jiǎn)單的根據(jù)是否有訂閱信息來(lái)進(jìn)行返回。

安裝node版web-push

npm install web-push --save

前面我們提到的公鑰與私鑰，也可以通過(guò)web-push來(lái)生成

使用web-push非常簡(jiǎn)單，首先設(shè)置VAPID keys：

// app.js
const webpush = require("web-push");
/**
 * VAPID值
 * 這里可以替換為你業(yè)務(wù)中實(shí)際的值
 */
const vapidKeys = {
    publicKey: "BOEQSjdhorIf8M0XFNlwohK3sTzO9iJwvbYU-fuXRF0tvRpPPMGO6d_gJC_pUQwBT7wD8rKutpNTFHOHN3VqJ0A",
    privateKey: "TVe_nJlciDOn130gFyFYP8UiGxxWd3QdH6C5axXpSgM"
};

// 設(shè)置web-push的VAPID值
webpush.setVapidDetails(
    "mailto:[email protected]",
    vapidKeys.publicKey,
    vapidKeys.privateKey
);

設(shè)置完成后即可使用webpush.sendNotification()方法向Push Service發(fā)起請(qǐng)求。

最后我們來(lái)看下pushMessage()方法的細(xì)節(jié)：

// app.js
/**
 * 向push service推送信息
 * @param {*} subscription 
 * @param {*} data 
 */
function pushMessage(subscription, data = {}) {
    webpush.sendNotification(subscription, data, options).then(data => {
        console.log("push service的相應(yīng)數(shù)據(jù):", JSON.stringify(data));
        return;
    }).catch(err => {
        // 判斷狀態(tài)碼，440和410表示失效
        if (err.statusCode === 410 || err.statusCode === 404) {
            return util.remove(subscription);
        }
        else {
            console.log(subscription);
            console.log(err);
        }
    })
}

webpush.sendNotification為我們封裝了請(qǐng)求的處理細(xì)節(jié)。狀態(tài)碼401和404表示該subscription已經(jīng)無(wú)效，可以從數(shù)據(jù)庫(kù)中刪除。

調(diào)用webpush.sendNotification()后，我們就已經(jīng)把消息發(fā)送至Push Service了；而Push Service會(huì)將我們的消息推送至瀏覽器。

要想在瀏覽器中獲取推送信息，只需在Service Worker中監(jiān)聽push的事件即可：

// sw.js
self.addEventListener("push", function (e) {
    var data = e.data;
    if (e.data) {
        data = data.json();
        console.log("push的數(shù)據(jù)為：", data);
        self.registration.showNotification(data.text);        
    } 
    else {
        console.log("push沒(méi)有任何數(shù)據(jù)");
    }
});

我們同時(shí)使用firefox與chrome來(lái)訪問(wèn)該WebApp，并分別向這兩個(gè)客戶端推送消息。我們可以使用console中打印出來(lái)的uniqueid，在postman中發(fā)起/push請(qǐng)求進(jìn)行測(cè)試。

可以看到，我們分別向firefox與chrome中推送了“welcome to PWA”這條消息。console中的輸出來(lái)自于Service Worker中對(duì)push事件的監(jiān)聽。而彈出的瀏覽器提醒則來(lái)自于之前提到的、訂閱時(shí)配置的userVisibleOnly: true屬性。在后續(xù)的文章里，我繼續(xù)帶大家了解Notification API（提醒）的使用。

正如前文所述，Push Service可以在設(shè)備離線時(shí)，幫你維護(hù)推送消息。當(dāng)瀏覽器設(shè)備重新聯(lián)網(wǎng)時(shí)，就會(huì)收到該推送。下面展示了在設(shè)備恢復(fù)聯(lián)網(wǎng)后，就會(huì)收到推送：

又到了查看兼容性的時(shí)間了。比較重要的是，對(duì)于Push API，目前Safari團(tuán)隊(duì)并沒(méi)有明確表態(tài)計(jì)劃支持。

當(dāng)然，其實(shí)比兼容性更大的一個(gè)問(wèn)題是，Chrome所依賴的FCM服務(wù)在國(guó)內(nèi)是無(wú)法訪問(wèn)的，而Firefox的服務(wù)在國(guó)內(nèi)可以正常使用。這也是為什么在代碼中會(huì)有這一項(xiàng)設(shè)置：

const options = {
    // proxy: "http://localhost:1087" // 使用FCM（Chrome）需要配置代理
};

上面代碼其實(shí)是用來(lái)配置web-push代理的。這里有一點(diǎn)需要注意，目前從npm上安裝的web-push是不支持設(shè)置代理選項(xiàng)的。針對(duì)這點(diǎn)github上專門有issue進(jìn)行了討論，并在最近（兩周前）合入了相應(yīng)的PR。因此，如果需要web-push支持代理，簡(jiǎn)單的方式就是基于master進(jìn)行web-push代碼的相應(yīng)調(diào)整。

雖然由于google服務(wù)被屏蔽，導(dǎo)致國(guó)內(nèi)Push功能無(wú)法在chrome上使用，但是作為一個(gè)重要的技術(shù)點(diǎn)，Web Push還是非常值得我們了解與學(xué)習(xí)的。

本文中所有的代碼示例均可以在learn-pwa/push上找到。注意在git clone之后，切換到push分支。切換其他分支可以看到不同的版本：

basic分支：基礎(chǔ)項(xiàng)目demo，一個(gè)普通的圖書搜索應(yīng)用（網(wǎng)站）；

manifest分支：基于basic分支，添加manifest等功能；

sw-cache分支：基于manifest分支，添加緩存與離線功能；

push分支：基于sw-cache分支，添加服務(wù)端消息推送功能；

master分支：應(yīng)用的最新代碼。

如果你喜歡或想要了解更多的PWA相關(guān)知識(shí)，歡迎關(guān)注我，關(guān)注《PWA學(xué)習(xí)與實(shí)踐》系列文章。我會(huì)總結(jié)整理自己學(xué)習(xí)PWA過(guò)程的遇到的疑問(wèn)與技術(shù)點(diǎn)，并通過(guò)實(shí)際代碼和大家一起實(shí)踐。

在下一篇文章里，我們先緩下腳步——工欲善其事，必先利其器。在繼續(xù)了解更多PWA相關(guān)技術(shù)之前，先了解一些chrome上的PWA調(diào)試技巧。之后，我們會(huì)再回來(lái)繼續(xù)了解另一個(gè)經(jīng)常與Push API組合在一起的功能——消息提醒，Notification API。

第一篇：2018，開始你的PWA學(xué)習(xí)之旅

第二篇：10分鐘學(xué)會(huì)使用Manifest，讓你的WebApp更“Native”

第三篇：從今天起，讓你的WebApp離線可用

第四篇：TroubleShooting: 解決FireBase login驗(yàn)證失敗問(wèn)題

第五篇：與你的用戶保持聯(lián)系: Web Push功能（本文）

第六篇：How to Debug? 在chrome中調(diào)試你的PWA

第七篇：增強(qiáng)交互：使用Notification API來(lái)進(jìn)行提醒

第八篇：使用Service Worker進(jìn)行后臺(tái)數(shù)據(jù)同步

第九篇：PWA實(shí)踐中的問(wèn)題與解決方案

第十篇：Resource Hint - 提升頁(yè)面加載性能與體驗(yàn)

第十一篇：從PWA離線工具集workbox中學(xué)習(xí)各類離線策略（寫作中…）

Generic Event Delivery Using HTTP Pus (draft-ietf-webpush-protocol-12)

FCM簡(jiǎn)單介紹

How Push Works