快速入門:傳送快顯通知 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

注意  不是使用 JavaScript?請參閱快速入門:傳送快顯通知 (XAML)

 

快顯通知是顯示在畫面上的快顯 UI,無論使用者是在另一個應用程式、在 [開始] 畫面或是在 Windows 桌面,都能讓應用程式與使用者進行通訊。這個快速入門會逐步引導您定義和顯示快顯通知內容。 這些動作是透過本機通知示範的,而本機通知是實作上最簡單的通知。我們討論以下步驟:

  • 指定通知的範本
  • 擷取範本的空白 XML 內容
  • 新增通知的文字
  • 新增通知的影像
  • 設定通知的持續時間
  • 指定隨附通知的音訊
  • 提供通知啟用應用程式時使用的內容相關資訊
  • 以本機通知方式傳送快顯通知

注意  在這個快速入門中,您將直接透過 XML 文件物件模型 (DOM) 來操作通知內容。另外還有透過 NotificationsExtensions 程式庫的選擇性方法,這個程式庫會以物件屬性的形式呈現 XML 內容,包含 Intellisense。如需詳細資訊,請參閱快速入門:在程式碼中使用 NotificationsExtensions 程式庫。若要查看這個快速入門中以 NotificationsExtenstions 表示的程式碼,請參閱快顯通知範例

 

注意  透過 Microsoft Visual Studio 測試快顯通知程式碼功能時,您必須在 Windows x86、x64 或 Windows 執行階段電腦上,使用本機電腦或遠端電腦偵錯設定。您不能使用 Visual Studio 模擬器偵錯功能選項—您的程式碼將在模擬器中編譯並執行,但不會顯示快顯通知。

 

先決條件

為了解這個主題,您將需要:

  • 快顯通知詞彙及概念的實用知識。如需詳細資訊,請參閱快顯通知概觀
  • 您應用程式資訊清單中的 [支援快顯通知] 選項必須設為 "true" (Visual Studio 資訊清單編輯器中的 [是]),才能傳送或接收快顯通知。如需詳細資訊,請參閱如何選擇加入快顯通知
  • 熟悉 XML 和透過文件物件模型 (DOM) API 操作 XML 的方法。
  • 熟悉快顯通知 XML 結構描述。如需詳細資訊,請參閱快顯通知結構描述
  • 能夠使用 Windows 執行階段 API 透過 JavaScript 建立基本 Windows 市集應用程式的能力。如需詳細資訊,請參閱使用 JavaScript 建立您的第一個 Windows 市集應用程式

指示

1. 選擇性:宣告命名空間變數

這個步驟提供您用來取代完整命名空間名稱的簡短名稱。這是 C# 中的 "using" 陳述式或 Visual Basic 中的 "Imports" 陳述式的對等項。讓您將程式碼簡化。

注意  這個快速入門中的其餘程式碼假設已經宣告這個變數。

 


var notifications = Windows.UI.Notifications;

2. 為您的快顯通知挑選一個範本,然後抓取它的 XML 內容

從系統提供的範本目錄中選擇一個符合您內容需求的範本。如需範本的完整清單,請參閱 ToastTemplateType 列舉。請注意,您傳送的每個獨立通知都可以使用不同的範本。

注意  Windows Phone 8.1 只支援 toastText02 範本的一種變化。它接受兩個文字字串,其中第一個轉譯為粗體文字,但是兩者皆位於同一行,所以應該只使用一個短字串或兩個極短字串,以避免串連。

與 Windows 搭配使用的這個範例使用 toastImageAndText01 範本,需要一個影像和一個文字字串。以下提供一個範例:

ToastImageAndText01


var template = notifications.ToastTemplateType.toastImageAndText01;
var toastXml = notifications.ToastNotificationManager.getTemplateContent(template);

getTemplateContent 方法傳回 XmlDocument。上述程式碼會抓取下列 XML 基本架構,您將在後續的步驟中,透過標準文件物件模型 (DOM) 函式為這個基本架構提供詳細資料:


<toast>
    <visual>
        <binding template="ToastImageAndText01">
            <image id="1" src=""/>
            <text id="1"></text>
        </binding>
    </visual>
</toast>

3. 提供通知的文字內容

這個範例會先抓取標記名稱為 "text" 之範本中的所有元素。toastImageAndText01 範本只包含單一文字字串,程式碼之後會指派這個字串。這個字串最多可換三行,因此應妥善設定字串的長度以避免截斷。

   
var toastTextElements = toastXml.getElementsByTagName("text");
toastTextElements[0].appendChild(toastXml.createTextNode("Hello World!"));

4. 提供通知的影像

這個程式碼會先抓取標記名稱為 "image" 之範本中的所有元素。快顯通知範本 (例如 toastImageAndText01) 最多包含一個影像。請注意,並非所有快顯通知範本都包含影像;某些只有文字。


var toastImageElements = toastXml.getElementsByTagName("image");

影像的來源可以是應用程式的套件、應用程式的本機存放區或網路。針對每個影像來源,分別顯示了這個步驟的不同版本。影像大小必須小於 200 KB 且小於 1024 x 1024 像素。如需詳細資訊,請參閱磚與快顯通知影像大小

下列程式碼使用應用程式套件的本機影像。這種影像類型包含於 Visual Studio 方案檔中,而且是封裝為您應用程式的一部分。可使用 "ms-appx:///" 首碼存取這些影像。為呈現最佳做法,我們也會針對協助工具用途 (如螢幕助讀程式) 指派替代文字。

重要  這裡使用的影像 "redWide.png" 只是一個範例,並未包含在 Microsoft Visual Studio 專案中。您必須以新增到專案的實際影像名稱取代 "redWide.png",再嘗試傳送此快顯通知。

 


toastImageElements[0].setAttribute("src", "ms-appx:///images/redWide.png");
toastImageElements[0].setAttribute("alt", "red graphic");

下列程式碼使用應用程式本機存放區的本機影像。應用程式已將此類型的影像儲存在其本機存放區中。這是由 Windows.Storage.ApplicationData.current.localFolder 傳回的位置。可使用 "ms-appdata:///local/" 首碼存取這些影像。同樣地,我們也會針對協助工具用途 (如螢幕助讀程式) 指派選擇性的替代文字。


toastImageElements[0].setAttribute("src", "ms-appdata:///local/redWide.png");
toastImageElements[0].setAttribute("alt", "red graphic");

下列程式碼使用網頁影像。可使用 "http://" 通訊協定指定影像的路徑,以存取這些影像。您也可以使用 "https://" 通訊協定。


toastImageElements[0].setAttribute("src", "https://www.microsoft.com/redWide.png");
toastImageElements[0].setAttribute("alt", "red graphic");

您可以使用選擇性的 baseUri 屬性來指定根路徑,例如 "https://www.microsoft.com/",其結合了任一影像的 src 屬性中指定的任何相對統一資源識別元 (URI)。這個屬性可以在 visual 元素 (套用至整個通知) 或 binding 元素 (套用至該繫結) 上設定。如果同時在這兩個元素中設定 baseUri,則 binding 中的值會覆寫 visual 中的值。

如果 baseUri 設定為 "https://www.microsoft.com/",範例程式碼中的這一行:

toastImageElements[0].setAttribute("src", "https://www.microsoft.com/redWide.png");

便可縮短成這樣:

toastImageElements[0].setAttribute("src", "redWide.png");

5. 選用:指定快顯通知持續時間

您可以選擇性設定快顯通知的顯示持續時間。有兩個值:"short" (預設值) 和 "long"。只有在您的通知屬於來電或約會提醒等案例時,才能使用 "long"。如需詳細資訊,請參閱快顯通知概觀

注意  Windows Phone 8.1 不支援不同的持續時間,所有快顯通知的持續時間都相同。如果手機快顯通知中包含此屬性,會被忽略。

注意  預設持續時間為 "short",因此通常只在要將持續時間設定成 "long",才會新增這個屬性。

 


var toastNode = toastXml.selectSingleNode("/toast");
toastNode.setAttribute("duration", "long");

6. 選用:指定快顯通知音效

如需快顯通知音效的詳細資訊,請參閱快顯通知音訊選項目錄

根據預設,Windows 會在顯示快顯通知時播放簡短的音效。您可以選擇從系統提供的一組音效中指定不同音效,或是不播放音效。在 Windows Phone 8.1 上,您可以指定自訂音效。如需詳細資訊,請參閱快顯通知音訊選項目錄

透過 getTemplateContent 抓取的範本不包含 audio 元素,所以您必須予以定義並新增到 XML 承載。指定音效檔時,是透過使用 "ms-winsoundevent:" 前置詞來指定,如果是在 Windows Phone 8.1 上,則是以使用 "ms-appx:///" 或 "ms-appdata:///" 前置詞的路徑來指定。這個範例會建立 audio 元素,並選取 toast 元素成為它的父元素。


var toastNode = toastXml.selectSingleNode("/toast");                        
var audio = toastXml.createElement("audio");

這個範例會指定非預設音效。

audio.setAttribute("src", "ms-winsoundevent:Notification.IM");

這個範例會指定不播放音效。

audio.setAttribute("silent", "true");

如果是持續時間較長的快顯通知,您可以循環播放音效,而非只播放一次。請注意,循環播放音效只適用於持續時間較長的快顯通知。系統指定的一組音效中,包含適合循環播放的特定音效。這個範例會指定循環播放音效。

注意  因為它不支援持續時間較長的快顯通知,所以 Windows Phone 8.1 不支援循環播放音效。


toastNode.setAttribute("duration", "long");

var audio = toastXml.createElement("audio");
audio.setAttribute("src", "ms-winsoundevent:Notification.Looping.Alarm");
audio.setAttribute("loop", "true");

一旦定義了音效元素,您就必須將它附加到快顯通知的 XML 承載,做為 toast 元素的子元素,如下所示。

toastNode.appendChild(audio);

7. 指定應用程式啟動參數

當使用者按一下您的快顯通知時,預期會啟動您的應用程式,並顯示關於通知內容的檢視。為了達到這個目的,會使用快顯通知元素的 launch 屬性,它會提供一個字串,在透過快顯通知啟動應用程式時,會將這個字串從快顯通知傳送到應用程式。這個字串沒有特定形式,而且是由應用程式定義。每次啟動應用程式時,應用程式必須檢查這個字串並將它做為引數,然後據此調整它的檢視或作業。


toastXml.selectSingleNode("/toast").setAttribute("launch", '{"type":"toast","param1":"12345","param2":"67890"}');

注意  在 Windows Phone Silverlight 8.1 中,啟動字串值的值會附加到您的預設啟動頁面 URI。例如,如果您提供啟動字串 "?conversation=71",它會產生像是 /MainPage.xaml?conversation=71 的 URI。因此,啟動字串必須同時也是有效的查詢字串;否則,就會擲回例外狀況。

8. 根據您已指定的 XML 內容來建立快顯通知。

var toast = new notifications.ToastNotification(toastXml);

9. 傳送您的快顯通知。

 
 var toastNotifier = notifications.ToastNotificationManager.createToastNotifier();
 toastNotifier.show(toast);

注意  在 Windows Phone Silverlight 8.1 中,如果目前的前景應用程式是 ToastNotifier.Show 方法的呼叫端,就不會顯示快線通知。在這種情況下,快顯通知應該主要由背景代理程式使用。

附註: 套用至快顯通知的背景色彩,是在應用程式資訊清單中為應用程式磚宣告的背景色彩。如需詳細資訊,請參閱快速入門:使用 Visual Studio 資訊清單編輯器建立預設磚

摘要與後續步驟

在這個快速入門中,您已將本機快顯通知傳送給使用者。

這個快速入門以本機通知方式 (最容易實作的通知類型) 傳送快顯通知,讓您能夠迅速看到結果。您應該接著探索其他快顯通知傳遞方法:排程及推播。如需詳細資訊,請參閱傳遞通知

相關主題

範例

快顯通知範例

從傳統型應用程式傳送快顯通知範例

黑白棋範例功能案例:快顯通知

概念

快顯通知概觀

快顯通知範本目錄

快顯通知音訊選項目錄

教學

快速入門:傳送推播通知

如何處理從快顯通知的啟用

如何選擇加入快顯通知

如何排程快顯通知

快速入門:從傳統型應用程式傳送快顯通知

如何透過 AppUserModelID 啟用桌面快顯通知功能

最佳做法

快顯通知的指導方針和檢查清單

參考

快顯通知 XML 結構描述

ToastNotification

ToastNotificationManager

ToastNotifier