IT工程師數位筆記本

　　記得在IE 9和Windows 7剛出來那會兒我寫過一篇文章來介紹如何自定義網站將其固定到Windows的任務欄上，同時自定義圖標及任務內容。那個功能在IE 9中被稱之為JumpList。http://www.cnblogs.com/jaxu/archive/2010/11/17/1879617.html

　　Windows 8對該功能進行了增強，但仍然不夠豐富。全新的Windows 8.1對其做了許多改進，包括：

• 在IE的Metro模式下將網站以一個普通App的形式固定到開始菜單中
• 可以提供四種不同尺寸的規格（Small, Medium, Wide, Large），并可以為每一個尺寸單獨指定圖標
• 為圖標指定默認的背景色
• 給Website App單獨設定徽標和Windows推送通知

　　上面給出的幾個功能中，為每一個尺寸單獨指定圖標和為Website App指定Windows推送通知比較具有吸引力。在下面的截圖中，紅框所顯示的App其實是一個網頁，其中包含有Windows的推送通知，每隔幾秒鐘其中的圖片和文字就會變換。

　　與IE 9的JumpList功能類似，IE 11的Pinned Site Enhancements功能也是通過在頁面的Head部分添加Meta tag標簽來實現的。這里有一篇文章介紹了其中所使用的meta標簽：

http://msdn.microsoft.com/en-us/library/ie/bg183312%28v=vs.85%29.aspx

　　除此之外，還有許多JavaScript API被提供以支持在網頁中與Windows推送服務進行交互。上面給出的這篇文章中有比較詳細的介紹。先來看看一些基本的meta標簽。

  <meta name="application-name" content=" Contoso" />
  <meta name="msapplication-TileColor" content=" #009900" />
  <meta name="msapplication-square70x70logo" content="images/smalltile.png" />
  <meta name="msapplication-square150x150logo" content="images/mediumtile.png" />
  <meta name="msapplication-wide310x150logo" content="images/widetile.png" />
  <meta name="msapplication-square310x310logo" content="images/largetile.png" />
  <meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/contoso1.xml;
    polling-uri2=notifications/contoso2.xml; polling-uri3=notifications/contoso3.xml" />

　　msapplication-TileColor標簽指定了Website App圖標的背景顏色。接下來的四個meta標簽給出了在四種不同尺寸下的圖標URL。默認情況下，Website App的圖標是你網站的favicon，如果沒有指定favicon，則使用IE 11默認的圖標。默認圖標僅提供給Small和Medium尺寸，Wide和Large尺寸的圖標必須自己提供。文字在Tile上顯示的顏色默認為白色，但是Windows會根據情況改變文字的默認顏色以使其達到最佳顯示效果，如當選用一個淺顏色的Tile圖標時Windows會自動將文字的顯示顏色改為黑色。

　　上表中Standard tile dimensions指的是Windows開始菜單中App Tile的標準尺寸大小，Recommended image size是App圖標的推薦尺寸。建議圖標的尺寸大小是Tile尺寸大小的1.8倍左右，這樣可以覆蓋大部分的移動設備，使其有較好的用戶體驗。

　　msapplication-notification標簽用于設定Windows推送通知的內容。frequency用來告訴Windows多長時間去刷新notification xml的源數據，默認值為30分鐘，你可以指定60（1小時），360（6小時），720（12小時）或者1440（1天）。注意frequency不是用來設定notification的內容在Tile中多長時間變換一次，notification內容變換的時間是由Windows本身決定的，frequency只是用來設定Windows多長時間去重新獲取數據來刷新緩存。polling-uri用來指定notification數據源的地址，最多可以指定5個推送通知的數據源，每一個數據源僅提供一條推送通知信息，后面會有介紹。

　　除此之外，你還可以通過JavaScript來動態設定推送通知。看下面的代碼：

  document.addEventListener('mssitepinned', StartPeriodicUpdateBatch, false);

  function StartPeriodicUpdateBatch()
  {
      var arrURI = ["notifications/contoso1.xml", "notifications/contoso2.xml", "notifications/contoso3.xml"];
      window.external.msEnableTileNotificationQueue(true);
      window.external.msStartPeriodicTileUpdateBatch(arrURI);

　　document對象綁定了事件mssitepinned，該事件當網頁在Windows中被pin的時候觸發。事件的代碼指定了3個推送通知的地址，然后告訴Windows將推送加入到隊列中。有許多新增加的JavaScript事件、方法和函數以幫助我們自定義網站內容，前面給出的msdn頁面中有更詳細的說明。這里有一個例子：http://pinnedsitedemo.cloudapp.net/testdrive/index.aspx

　　如果你覺得通過meta標簽單獨設置太麻煩，你也可以提供一個XML配置文件，這樣會更靈活一些。如果配置文件被命名為browserconfig.xml，將其存放到網站服務器的根目錄下，當用戶將網頁固定到Windows開始菜單時IE 11會自動讀取該文件的內容。如果采用自定義的名稱，則需要通過msapplication-config標簽進行指定，如下：

<meta name="msapplication-config" content="IEconfig.xml" />

　　所提供的XML配置文件必須使用browser congiguration規定的節點，詳細的說明可以看這里：http://msdn.microsoft.com/en-us/library/ie/dn320426(v=vs.85).aspx

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
        <TileColor>#009900</TileColor>
     </tile>
     <badge>
        <polling-uri src="badge.xml"/>
        <frequency>30</frequency>
     </badge>
     <notification>
        <polling-uri  src="1.xml"/>
        <polling-uri2 src="2.xml"/>
        <polling-uri3 src="3.xml"/>
        <polling-uri4 src="4.xml"/>
        <polling-uri5 src="5.xml"/>
        <frequency>30</frequency>
        <cycle>1</cycle>
     </notification>
   </msapplication>
</browserconfig>

　　其中指定了Tile的圖標和背景色，以及badge和notification相關的設置。有關什么是badge以及如何在XML文件中自定義badge可以看這里http://msdn.microsoft.com/en-us/library/windows/apps/br212849.aspx

　　你最多只能在一個網站中指定5個推送通知，Windows會負責進行切換，frequency用來告訴Windows多長時間去刷新一下數據源來更新本地緩存信息。cycle是一個枚舉值，用來指定哪些推送通知會在特定尺寸的Tile中顯示，

• 0：不顯示任何推送通知（當只提供了1條推送通知時為默認值）
• 1：顯示所有指定的推送通知（當提供了多條推送通知時為默認值）
• 2：只在Medium尺寸的Tile下顯示推送通知
• 3：只在Wide尺寸的Tile下顯示推送通知
• 4：只在Large尺寸的Tile下顯示推送通知
• 5：僅在Medium和Wide尺寸的Tile下顯示推送通知
• 6：僅在Medium和Large尺寸的Tile下顯示推送通知
• 7：僅在Wide和Large尺寸的Tile下顯示推送通知

　　另外，有關notification的XML文件的格式說明可以看這里：http://msdn.microsoft.com/en-us/library/windows/apps/br230841.aspx

　　其中有對每個節點和屬性的詳細介紹，下面是一個例子：

<tile>
  <visual lang='en-US' version='2'>

    <binding template="TileSquare150x150PeekImageAndText04" branding="name">
      <image id="1" src="http://samples.msdn.microsoft.com/iedevcenter/PinnedSites/images/1.jpg"/>
      <text id="1">Serving Today: Tacos</text>
    </binding>

    <binding template="TileWide310x150ImageAndText01" branding="name">
      <image id="1" src="http://samples.msdn.microsoft.com/iedevcenter/PinnedSites/images/1.jpg"/>
      <text id="1">Serving Today: Tacos</text>
    </binding>

    <binding template="TileSquare310x310ImageAndText01" branding="name">
      <image id="1" src="http://samples.msdn.microsoft.com/iedevcenter/PinnedSites/images/1.jpg"/>
      <text id="1">Serving Today: Tacos</text>
    </binding>

  </visual>
</tile>

 　　幾個主要的地方說明一下，更全面的介紹大家可以去看前面給出的那個地址。visual節點的version屬性的值如果是在Windows 8.1上的話就應該指定為2，如果是Windows 8則為1。每一個visual節點下允許有最多3個binding子節點，用來指定該推動通知可以支持哪些模板。模板由template屬性指定，它是一個枚舉值，有多達70多種不同的模板，詳細的介紹可以看這篇文章http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype.aspx branding屬性有三個枚舉值，用以說明Tile如何顯示App的brand，可以是none，logo或者name。子節點image和text用來提供推送通知要顯示的圖片和文字，其中的id是一個占位符標識，當指定不同的template時，Tile中內容的布局也會有區別，可以看template的詳細說明。圖片要求必須小于200kb，而且只能是jpg，gif或png。圖片的src必須是以下幾種類型：

• http://或者https://開頭 - 基于Web的圖片地址，必須使用絕對地址，相對地址無效，會導致binding所定義的推送通知無法顯示。
• ms-appx:// - 包含在App包里的圖片地址。
• ms-appdata:///local/ - 本地存儲的圖片地址。
• file:/// - 本地圖片路徑。只支持desktop apps，不支持Windows Store apps。

　　需要注意的是，在同一個notification的XML文件中，最多三個的binding子節點只是描述了同一個推送通知的內容（其中包括圖片和文字），只是區別說明了在不同template下要顯示的內容，你完全可以在幾個相似的template中提供完全相同的內容，只要不影響推送通知在template中的顯示。前面提到過，一個網站最多只能提供5個推送通知，也就是說你最多只能提供5個notification XML文件，該文件可以是靜態的XML文件，也可以是Web Service或任何其它的URI，但XML結構必須要符合定義。

　　上圖給出了推送通知在Windows 8.1和IE 11中的工作流程。在服務端，我們可以利用代碼將msapplication-config節點添加到頁面的head部分，如下例：

HtmlMeta meta_msapplication_config = new HtmlMeta();
meta_msapplication_config.Name = "msapplication-config";
meta_msapplication_config.Content = _browserConfig;
Page.Header.Controls.Add(meta_msapplication_config);    

　　總之，Windows 8.1和IE 11豐富了對網頁進行pin操作和提供推送通知的功能，使得我們不僅可以將自己喜歡的頁面添加到收藏夾，還可以將其以普通App的方式加入到Windows開始菜單中，同時推送通知還可以及時地告訴網站的受眾最近有哪些內容做了更新。

　　附加一個從MSDN上下載的官方例子：Pinned Sites - Live Tiles support in IE11