Windows 市集應用程式實作手冊 - 使用 JavaScript : Lab 07

實驗 7 ： 磚和通知

概述

「磚」是 Windows 市集應用程式使用者經驗當中很重要的元素之一。在安裝應用程式的同時，它的磚也會被創建在 Windows 8 的開始畫面裡，被稱為「主要磚」的它也可以當作啟動此應用程式的捷徑。主要磚的影像預設是 Visual Studio 中 Windows 市集應用程式專案裡的檔案 Logo.png ，影像的長寬是 150 乘 150 像素的正方形磚（ square tile ）。然而，您也可以在應用程式中加入 310 乘 150 影像的寬形磚（ wide tile ），並在應用程式清單裡指定它為「寬形標誌」（ wide logo ）。如果應用程式支援寬形磚，使用者就能在開始畫面裡切換進出於正方形磚和寬形磚之間。

應用程式也允許您創建額外的「磚」，也就是次要磚（ Secondary tiles ）。次要磚可以擺放在事先設定的位置或狀態，當作啟動某一應用程式的捷徑。舉例來說，天氣應用程式可能允許使用者以地理位置來創建次要磚，例如，華盛頓州雷德蒙市（ Redmond, WA ）和喬治亞州亞特蘭大市（ Atlanta, GA ）等。然後，使用者只要點擊次要磚，就可以啟動應用程式來查看雷德蒙市（ Redmond ）或亞特蘭大市（ Atlanta ）的天氣。

您可以使用 Windows 執行階段（ Windows Runtime ）的 Windows.UI.StartScreen.SecondaryTile 類別（ class ）來創建次要磚。磚的創建通常由使用者採取主動，例如，點擊應用程式列裡的某一命令。創建次要磚的應用程式提供一些參數，包括磚的背景影像之 URI （正方形磚和寬形磚兩者都提供，如果您要讓使用者能夠在兩者間做切換的話）和包含啟用引數（ activation arguments ）的字串。當應用程式從次要磚被啟動時，作業系統就將啟用引數傳遞給此應用程式。這些引數提供應用程式初始化所需要的資訊。天氣應用程式所需要的啟用引數可能只是一個郵政編碼而已。

磚在被創建之後，也不必停留靜止不動。透過磚的更新和推播通知（ push notifications ），應用程式有一些方法可以讓磚的內容變得動態而且引人注目。舉例來說，應用程式可以使用 Windows.UI.Notifications.TileUpdater 類別（ class ）來更新磚的內容。您還可以任選這些更新來排隊。當排隊被啟動時，作業系統會每隔幾秒鐘就在最後五個更新之間旋轉一次，以便讓這些磚保持在新鮮而且活躍的狀態中。

當然，應用程式必須正在運作中，才能使用 TileUpdater 類別（ class ）來更新「磚」的內容。但是，透過 Windows 通知服務（ Windows Notification Service ，簡稱 WNS ），縱使應用程式不在運作中，也照樣可以更新「磚」的內容。假設天氣應用程式要顯示惡劣天氣警報，即使它不在運作中，只要透過 WNS ，天氣應用程式的伺服器就能傳送更新「磚」的推播通知到開始畫面。

推播通知也不僅局限於用來更新「磚」的內容而已，它們也能彈出快顯（ toast ）視窗，其內容包含給使用者的資訊（舉例來說，「您住的地區偵測到惡劣天氣」），而且還能在「磚」上顯示徽章 – 一個數字或事先設定的字符（ glyph ），就像通知使用者收件箱有新資訊的郵件應用程式。

在本實驗裡，您將親自把次要磚、推播通知、和快顯加入到 Contoso 食譜內。結束時，使用者將能夠以次要磚把自己喜愛的食譜配方釘在開始畫面、看見 Windows 通知服務對「磚」的更新、和觀察排定時程的快顯如何運作。

目標

本實驗將引導您如何：

  • 創建次要磚。

  • 使用推播通知來更新主要磚。

  • 安排時程讓快顯傳遞資訊給使用者，縱使您的應用程式不在運作中。

系統需求

要完成本實驗，您必須擁有下列東西：

  • Windows 8

  • Microsoft Visual Studio 2012

設定

為了讓您的電腦能進行本實驗，您必須先實作下列步驟：

  1. 安裝 Windows 8。

  2. 安裝 Microsoft Visual Studio 2012 。

練習

本動手做實驗室包含下列練習：

  1. 納入次要磚

  2. 納入推播通知

  3. 納入排定時程的快顯

完成本實驗，估計需要費時： 30 到 40 分鐘。

練習 1 ： 納入次要磚

在這個練習裡，您將加入一個命令到應用程式列，以便讓使用者能夠以次要磚來釘選自己喜愛的食譜配方到開始畫面。您將也加入邏輯到 Contoso 食譜，以便應用程式在次要磚裡被啟動時，能展示相對應的食譜配方。

任務 1 – 修改應用程式列

我們需要做的第一件事是加入一個釘選（ Pin ）命令到應用程式列，然後，為它寫處理常式來創建顯示目前食譜配方的次要磚。

  1. 打開您在 Visual Studio 實驗 6 中所完成的 ContosoCookbook 專案。如果您尚未完成實驗 6 或想啟動另一參考複本，您可以在起始材料中找到一份完整的實驗版本。

  2. 打開 itemDetail.html ，找出 id 是 "appbar" 的 DIV 元素。

  3. 在 appbar DIV 宣告**吹牛（ Brag ）**命令陳述式的後面加入下列元素。

    HTML
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'pin', label:'Pin Recipe', icon:'pin', section: 'selection'}"></button>

  4. 打開 itemDetail.js ，在「文件」頂部附近，加入下列陳述式到其他像它的陳述式裡。

    JavaScript
    var start = Windows.UI.StartScreen;

  5. 現在，加入下列陳述式到 ready 函式後面。

    JavaScript
    // Handle click events from the Pin command
    document.getElementById("pin").addEventListener("click", function (e) {
      var uri = new Windows.Foundation.Uri("ms-appx:///" + item.tileImage);
      var tile = new start.SecondaryTile(
        item.key,// Tile ID
        item.shortTitle, // Tile short name
        item.title, // Tile display name
        JSON.stringify(Data.getItemReference(item)), // Activation argument
        start.TileOptions.showNameOnLogo, // Tile options
        uri // Tile logo URI
    );
    tile.requestCreateAsync();
    });

    備註：在這一步驟上，磚標誌 URIs 說的就是影像資料夾裡的 150 x 150 像素的影像檔案。次要磚影像必須從本地載入，它們無法像普通影像那樣從遠端載入。

  6. 啟動應用程式，點擊任一食譜配方，進到項目明細頁。

  7. 確認應用程式列已包括一**釘選食譜（ Pin Recipe ）**命令，如圖 1 所示。

    圖 1
    釘選（ Pin ）命令

  8. 返回 Visual Studio 並停止偵錯。

任務 2 – 修改 default.js

要創建次要磚很簡單，但是，您也需要察覺應用程式從次要磚被啟動的時間，以便航行到項目明細頁來展示食譜配方。

  1. 打開 default.js ，找到被啟動的事件處理常式。

  2. 在處理常式的後面找到 args.setPromise 文句，並將它改寫如下所示。

    JavaScript
    args.setPromise(WinJS.UI.processAll().then(function () {
    if (args.detail.arguments !== "") {
    nav.history.current.initialPlaceholder = true;
    return nav.navigate("/pages/itemDetail/itemDetail.html", { item: JSON.parse(args.detail.arguments) });
    }
    else if (nav.location) {
    nav.history.current.initialPlaceholder = true;
    return nav.navigate(nav.location, nav.state);
    } else {
    return nav.navigate(Application.navigator.home);
    }
    }));

    備註：當 Windows 市集應用程式被啟動時， args.detail.kind 會告訴您它為什麼被啟動，而 args.detail.previousExecutionState 則告訴您此應用程式在前一次的運作之後是否被終止。相同地，當應用程式從次要磚被啟動時， args.detail.arguments 會提供啟用引數，也就是在第四參數裡被傳遞到 SecondaryTile 的建構函示之字串。您在這兒所要做的事就是如果使用者點擊次要磚來啟動應用程式的話，航行到項目明細頁來展示食譜配方。

任務 3 – 釘選食譜配方

現在，讓我們測試您的修改。請釘選一食譜配方到開始畫面，並確認：當應用程式從此「磚」被啟動時，正確的食譜配方被顯示出來。

  1. 按壓 F5 來啟動應用程式於偵錯器。
  2. 進到項目明細頁來查看您所選擇的食譜配方。
  3. 從畫面底部往上滑動此應用程式列（或按壓視窗鍵 + Z ），並點擊釘選食譜（ Pin Recipe） 按鈕。
  4. 在隨後彈出的視窗裡，點擊**釘選到「開始」畫面（ Pin to Start ）**按鈕（圖 2 ）。

    圖 2
    釘選一個次要磚
  5. 返回 Visual Studio 並停止偵錯。
  6. 進到 Windows 8 開始畫面，驗證它現在已包含您所釘選的食譜配方之次要磚。
  7. 點擊次要磚，驗證 Contoso 食譜已啟動並顯示出相對應的食譜配方。
  8. 返回 Visual Studio 並停止偵錯。

練習 2 ：納入推播通知

推播通知讓 Windows 市集應用程式，甚至在不運作時，都能夠更新「磚」的內容 – 主要磚或次要磚。推播通知也能更新磚的徽章（ badge ），它可能是一個從 0 到 99 的數字或一個特別的字符（ glyph ），例如出現在磚上面的星狀物。推播通知起源自 Windows 通知服務（ WNS ），以回應與您的應用程式相關的雲端服務之呼叫。在這個練習裡，您將加入推播通知到 Contoso 食譜裡。

任務 1 – 修改應用程式列表

為了使本實驗變得比較容易， Microsoft 已經部署了 Microsoft Azure 服務， Contoso 食譜能夠呼叫它來訂閱推播通知，它則透過 WNS 來傳送通知。當此服務被部署時，它就是被用來傳送通知到特定發行者（ "Contoso" ）所指定的特定套件名稱之應用程式。為了接收此服務所傳送過來的徽章通知，您需要修改應用程式清單，以便使用正確的套件名稱和發行者 ID 。

  1. 在方案總管裡，雙擊 package.appxmanifest 來打開此清單。
  2. 在清單編輯器裡，點擊**封裝（ Packaging ）**標籤。
  3. 變更套件名稱為 "BUILD.87821274-9e97-488c-b5af-69dace508bff" 。
  4. 變更套件顯示名稱為 "Contoso食譜" 。
  5. 變更發行者顯示名稱為 "Contoso" 。
  6. 在發行者行，點擊選擇憑證按鈕。然後，從設定憑證（Configure Certificate）下拉列表裡，選擇從檔案選取，並從隨後出現的對話框中選擇 Contoso.pfx 。您將在起始材料裡發現 Certs 資料夾裡的 Contoso.pfx 。然後，點擊 OK 。
  7. 驗證套件名稱、套件顯示名稱、發行者、和發行者顯示名稱都有圖 3 所顯示的值。

    圖 3
    編輯後清單
  8. 儲存您的變更並關閉 package.appxmanifest 。

任務 2 – 訂閱推播通知

要訂閱推播通知，應用程式會從 Windows 執行階段（ Windows Runtime ）檢索出一通知頻道（ notification channel ）並將頻道的 URI 傳遞給服務。當此服務要更新「磚」的內容時，它就使用此 URI 頻道來呼叫 WNS 。然後， WNS 會交付通知給應用程式。當 Contoso 食譜啟動並使用它來訂閱推播通知時，讓我們抓住一條頻道 URI 吧。

  1. 打開 default.js ，在「文件」頂部，加入下列陳述式到其他像它的陳述式中。

    JavaScript
    var notify = Windows.UI.Notifications;
    var push = Windows.Networking.PushNotifications;
    var net = Windows.Networking.Connectivity;
    var wsc = Windows.Security.Cryptography;
    var popups = Windows.UI.Popups;

  2. 找到被啟動的事件處理常式，在 if (app.sessionState.history) 陳述式的前面，加入下列陳述式，以便在每一次應用程式被啟動時，訂閱推播通知。

    JavaScript
    // Clear tiles and badges
    notify.TileUpdateManager.createTileUpdaterForApplication().clear();
    notify.BadgeUpdateManager.createBadgeUpdaterForApplication().clear();
    // Register for push notifications
    var profile = net.NetworkInformation.getInternetConnectionProfile();
    if (profile.getNetworkConnectivityLevel() === net.NetworkConnectivityLevel.internetAccess) {
    push.PushNotificationChannelManager.createPushNotificationChannelForApplicationAsync().then(function (channel) {
    var buffer = wsc.CryptographicBuffer.convertStringToBinary(channel.uri, wsc.BinaryStringEncoding.utf8);
    var uri = wsc.CryptographicBuffer.encodeToBase64String(buffer);
    WinJS.xhr({ url: "http://ContosoRecipes8.cloudapp.net?uri=" + uri + "&type=tile"}).then(function (xhr) {
    if (xhr.status < 200 || xhr.status >= 300) {
    var dialog = new popups.MessageDialog("Unable to open push notification channel");
    dialog.showAsync();
    }
    });
    });
    }

    備註： CreatePushNotificationChannelForApplicationAsync 的呼叫會從 Windows 執行階段（ Windows Runtime ）要求一通知頻道。在這個例子裡，您正使用 base-64 來編碼 URI 頻道，以便將它以查詢字串傳送給食譜服務。嚴格說來， Base-64 編碼不是必需的，但是，它能防止 URI 頻道產生不良字元，進而要求將 base-64 編碼包括在查詢字串的可能性。 您正在使用 WinJS.xhr 來啟動 Microsoft Azure 所託管的食譜配方服務和傳送 URI 頻道。該服務會保存所有已訂閱服務的客戶端（ URIs ）記錄，並每 2 分鐘觸發 20 分鐘的通知到這些客戶端。每一個傳遞到服務的頻道 URI 都會識別出正在某一特定裝置上運作的一項特定應用程式。

任務 3 – 測試推播通知

最後步驟是確認您的應用程式能接收到傳送過來給它的推播通知。

  1. 請按壓 F5 來啟動偵錯器裡的應用程式。作為啟動體制的一部份，應用程式現在重新設定它的主要磚並訂閱推播通知。

  2. 在完全啟動之後，返回 Visual Studio 並停止偵錯來關閉此應用程式。

  3. 進到 Windows 8 的開始畫面，找到應用程式的主要磚。如果它是正方形磚，請用滑鼠右鍵單擊它，並從應用程式列選擇「放大」（ Larger ）來展示寬形磚。

  4. 仔細觀察一會兒磚的變化。在兩分鐘之內，磚應該會改變成幾個不同特性的食譜配方之一，如圖 4 所示。

    圖 4
    磚更新之後的 Contoso 食譜主要磚

  5. 另一個兩分鐘之後，再回過頭來檢視一下，這時候，磚應該又有了改變。注意：即使應用程式不在運作中，這些現象仍然會一直發生！

    備註：如果您想看運作中的徽章通知，請將傳遞到 WinJS.xhr 的 URI 之 "type=tile" 變更為 "type=badge" 。再度執行此應用程式，大約兩分鐘之後，磚上面會出現一個數字或「徽章」。

練習 3 ：納入排定時程的快顯

快顯是出現在螢幕角落小視窗裡的資訊。不管安排時程的應用程式是否正在運作中，快顯就是一直出現。它們可以由應用程式本身來安排時程（當應用程式正在運作時）或對 Windows 通知服務所發出的通知做回應而顯示出來。此外，快顯可以包括聲音和文字。 在這個練習裡，您將為 Contoso 食譜加入一個排定時程的快顯，來模擬提醒。

任務 1 – 修改應用程式列

為了提供 UI 來為快顯安排時程，我們將加入一提醒（ Reminder ）命令到應用程式列，並為它寫處理常式。

  1. 打開 itemDetail.html ，找到 id 是 "appbar" 的 DIV 元素。

  2. 加入下列陳述式到此 DIV 元素，其位置在宣告釘選（ Pin ）命令的陳述式後面，以便加入一提醒命令到此應用程式列。

    HTML
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'remind', label:'Reminder', icon:'clock', section: 'selection'}">
    </button>

  3. 打開 itemDetail.js ，在「文件」頂部加入下列陳述式到其他像它的陳述式中。

    JavaScript
    var notify = Windows.UI.Notifications;
    var popups = Windows.UI.Popups;

  4. 加入下列陳述式到 ready 函式後面。

    JavaScript
    // Handle click events from the Reminder command
    document.getElementById("remind").addEventListener("click", function (e) {
    // Create a toast notifier
    var notifier = notify.ToastNotificationManager.createToastNotifier();

    // Make sure notifications are enabled
    if (notifier.setting != notify.NotificationSetting.enabled) {
    var dialog = new popups.MessageDialog("Notifications are currently disabled");
    dialog.showAsync();
    return;
    }

    // Get a toast template and insert a text node containing a message
    var template = notify.ToastNotificationManager.getTemplateContent(notify.ToastTemplateType.toastText01);
    var element = template.getElementsByTagName("text")[0];
    element.appendChild(template.createTextNode("Reminder!"));

    // Schedule the toast to appear 30 seconds from now
    var date = new Date(new Date().getTime() + 30000);
    var stn = notify.ScheduledToastNotification(template, date);
    notifier.addToSchedule(stn);
    });

  5. 啟動應用程式，點擊任一食譜配方，進到項目明細頁。

  6. 確認應用程式列已包括一提醒命令，如圖 5 所示。

    圖 5
    提醒命令

  7. 返回 Visual Studio 並停止偵錯。

任務 2 – 啟動快顯通知

在進行測試之前，我們要做的最後工作就是在清單裡啟動快顯通知。

  1. 打開 package.appxmanifest ，進到應用程式 UI 標籤（ App UI tab ）。

  2. 變更「支援快顯通知」（ Toast capable ）設定為 "是" （圖 6 ）。

    圖 6
    啟動快顯通知

    備註：您必須打開**「支援快顯通知」（ Toast capable ）**，應用程式才能為快顯安排時程。在您啟動這個設定之後，應用程式的權限頁面會出現一個切換按鈕，允許使用者來開關這些通知。您所加入的 OnReminderButtonClicked 方法可以用來查看通知是否被啟動，如果它們未被啟動，它還會警告使用者。

任務 3 – 製作快顯

最後任務是測試為快顯通知安排時程的程式碼，並觀察運作中的快顯。

  1. 按壓 F5 來啟動應用程式。
  2. 進到您所喜愛的食譜配方。
  3. 顯示應用程式列，點擊提醒按鈕。
  4. 返回 Visual Studio 並停止偵錯。
  5. 切換到 Windows 8 的開始畫面或到另一個應用程式，等大約 30 秒，讓快顯出現（圖 7 ）。

    圖 7
    Contoso 食譜裡的快顯
  6. 點擊快顯視窗，驗證您已切換回 Contoso 食譜。
  7. 返回 Visual Studio 並停止偵錯。

摘要

現在，您已看到運作中的次要磚、推播通知、和排定時程的快顯。這些都只是應用程式不運作時，您如何為「磚」和通知更新內容的一些例子。

打從在實驗 1 啟動 Contoso 食譜以來，我們已經走過很長的一段路。但是，要做的事情還很多。 接下來，我們將探索 Windows 市集 APIs 和允許使用者模擬購買應用程式和額外的食譜配方。要將 Windows 市集應用程式轉換成金錢其實非常簡單，微軟早已為您做了大量工作來廣告它並且收取購買費。聽起來很有趣？那麼，就讓我們採取行動吧！

繼續下一個實驗 
  • Last updated on