使用 Azure 通知中樞的 Web 推播通知

2025-05-06

本文說明如何使用 Azure 通知中樞將瀏覽器推播通知傳送給單一使用者。

概括而言，這個流程是：

設定認證：
建立註冊和安裝。
傳送推播通知：

概觀

網頁推播（或 瀏覽器推播）是一種通知類型，客戶可以在其桌面瀏覽器或某些情況下的行動瀏覽器中接收到，這是基於每個網站的通知。

Azure 通知中樞現在支援所有主要瀏覽器的瀏覽器推送，包括 Microsoft Edge、Google Chrome 和 Mozilla Firefox。不包含Apple Safari。針對 Apple Safari，您可以使用現有的 APNS 支援，如使用憑證式驗證設定 Safari 推播通知中所述。

在具有下列作業系統和瀏覽器的裝置上，支援跨平台的瀏覽器推播。

筆記型電腦上的瀏覽器推播支援：

操作系統	瀏覽器
Windows 作業系統	Google Chrome v48+ Microsoft Edge v17+ Mozilla Firefox v44+ Safari v7+ Opera v42+
macOS	Chrome v48+ Firefox v44+ Safari v7+ Opera v42+
Linux 作業系統	Chrome v48+ Firefox v44+ Safari v7+ Opera v42+

平板電腦上的瀏覽器通知支援：

操作系統	瀏覽器
Windows 作業系統	Chrome v48+ Firefox v44+ Opera v42+
iOS	不支援。
Android OS	Chrome v48+ Firefox v44+ Opera v42+

行動裝置上的瀏覽器通知推送支援

操作系統	瀏覽器
iOS	不支援。
Android OS	Chrome v48+ Firefox v44+ Opera v42+

設定認證

若要訂閱網站上的瀏覽器推播通知，您可以使用 VAPID 金鑰。您可以使用 VAPID 金鑰產生器等服務來產生 VAPID 認證。認證看起來應該類似下列範例：

{ 
    "location": "South Central US", 
    "properties": { 
        "browserCredential": { 
            "properties": { 
                "subject": "mailto:email@microsoft.com", 
                "vapidPublicKey": "some-vapid-public-key", 
                "vapidPrivateKey":"some-vapid-private-key" 
            } 
        } 
    } 
}

在 Azure 入口網站中設定認證

若要在 Azure 入口網站中設定瀏覽器推入認證，請遵循下列步驟：

在 Azure 入口網站中，於您的通知中樞開啟 瀏覽器（Web Push） 面板。
輸入現有的 VAPID 金鑰，或使用 VAPID 金鑰產生器等服務產生新的 VAPID 金鑰組。
選取 [儲存]。

使用 REST API 設定認證

您也可以使用 REST API 來設定瀏覽器推播的瀏覽器認證，例如使用建立或更新中樞 REST API 方法、Azure Resource Manager API 或 V2 RP。

輸入此格式的認證，並提供訂用帳戶標識碼、資源群組、命名空間和通知中樞：

https://management.azure.com/subscriptions/{subscription}/resourceGroups/{resource-group}/providers/Microsoft.NotificationHubs/namespaces/{namespace}/notificationHubs/{hub}api-version=2016-03-01

使用 Azure SDK 設定認證

您可以使用 Azure SDK 來設定瀏覽器推送的認證。以下是使用 .NET SDK 的範例：

var browserCreds = new BrowserCredential 
{ 
    Subject = "<subject>", 
    VapidPublicKey = "<vapid public key>", 
    VapidPrivateKey = "<vapid private key>", 
}

和：

await nhManagementClient.NotificationHubs.CreateOrUpdateAsync(config.ResourceGroupName, config.NamespaceName, config.HubName, new NotificationHubCreateOrUpdateParameters(config.Location) 
{ 
   BrowserCredential = browserCreds 
});

建立註冊和安裝

大量傳送需要註冊或安裝。您也可以在偵錯傳送中使用註冊和安裝。

下列範例顯示原生註冊、範本註冊和瀏覽器安裝的請求內容。

本機註冊請求主體

<?xml version="1.0" encoding="utf-8"?><entry xmlns="http://www.w3.org/2005/Atom"><content type="application/xml"><BrowserRegistrationDescription xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/netservices/2010/10/servicebus/connect"><Endpoint></Endpoint><P256DH></P256DH><Auth></Auth></BrowserRegistrationDescription></content></entry>

瀏覽器範本註冊要求本文

<?xml version="1.0" encoding="utf-8"?> 
<entry xmlns="http://www.w3.org/2005/Atom"> 
    <content type="application/xml"> 
        <BrowserTemplateRegistrationDescription xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/netservices/2010/10/servicebus/connect"> 
            <Endpoint></Endpoint> 
            <P256DH></P256DH> 
            <Auth></Auth> 
            <BodyTemplate><![CDATA[{"title":"asdf","message":"xts"}]]></BodyTemplate> 
        </BrowserTemplateRegistrationDescription> 
    </content> 
</entry>

安裝要求本文

{  
    "installationId": "installation-id", 
    "platform": "browser", 
    "pushChannel": { 
            "endpoint": "", 
            "p256dh": "", 
            "auth": "" 
        } 
}

建立原生註冊（SDK）

await notificationHubClient.CreateBrowserNativeRegistrationAsync(subscriptionInfo, tagSet);

建立樣本註冊（SDK）

await notificationHubClient.CreateBrowserTemplateRegistrationAsync(subscriptionInfo, template, tagSet);

建立瀏覽器安裝（SDK）

var browserPushSubscription = new BrowserPushSubscription 
            { 
                Endpoint = "", 
                P256DH = "", 
                Auth = "", 
            }; 

var browserInstallation = new BrowserInstallation 
            { 
                InstallationId = installationId, 
                Tags = tags, 
                Subscription = browserPushSubscription, 
                UserId = userId, 
                ExpirationTime = DateTime.UtcNow.AddDays(1), 
            }; 

await notificationHubClient.CreateOrUpdateInstallationAsync(browserInstallation);

傳送推播通知

設定瀏覽器推播的認證並建立裝置的註冊和安裝之後，您就可以建立推播通知。本節說明如何建立直接傳送的通知|、對象傳送和偵錯（測試）傳送。

建立直接傳送

針對直接傳送，您需要來自瀏覽器訂用帳戶的端點 URI、p25DH 金鑰和驗證密碼。如需直接傳送通知的詳細資訊，請參閱直接傳送。

若要建立直接傳送通知，請遵循下列步驟：

設定以下瀏覽器推播通知的標題：
- ServiceBusNotification-Format - browser
- ServiceBusNotification-DeviceHandle - endpoint：來自訂閱的endpoint欄位
- P256DH：來自訂閱的p256dh欄位
- Auth：來自訂閱的auth欄位
建立訊息本文。訊息本文通常以此格式顯示：
```
{ 
  "title": "Some Title", 
  "body": "Some body of a message" 
} 
```
您可以在本文中指定其他欄位，例如，icon，以便變更每個訊息的圖示。
傳送通知。

您也可以使用 .NET SDK 來建立直接傳送：

var browserSubscriptionEndpoint = ""; 
var browserPushHeaders = new Dictionary<string, string> 
            { 
               { "P256DH", "" }, 
               { "Auth", "" }, 
            }; 

var directSendOutcome = await notificationHubClient.SendDirectNotificationAsync(new BrowserNotification("payload", browserPushHeaders), browserSubscriptionEndpoint);

建立受眾傳送

針對群組傳送，請使用用於直接傳送的相同 ServiceBus Notification-Format 標頭，並視需要修改消息載荷。選擇性地使用 ServiceBusNotification-Tags 標頭指定標記表達式。如需建立受眾發送的詳細資訊，請參閱傳送APNS原生通知。

若要使用 SDK 來執行目標受眾傳送，請使用下列語句：

var outcome = await notificationHubClient.SendNotificationAsync(new BrowserNotification(payload, tagExpression);

建立偵錯/測試傳送

偵錯傳送會在 Azure 入口網站中建立，而且需要註冊和安裝。

建立裝置的註冊之後，請遵循下列步驟來建立偵錯傳送通知：

在 Azure 入口網站中，開啟您的通知中樞中的 測試傳送 面板。
在 [ 平臺] 欄位中，選取 [ 瀏覽器]。
指定 傳送到標籤表達式。
將 有效負載 修改為您想要的訊息。
選擇傳送。