前言

Windows 8 將 IE10 深度整合至啟動畫面，引入固定網站功能：使用者可將網站「釘選」至啟動畫面形成動態磚，開發者可透過簡單的中繼標籤自訂磚外觀、跳躍清單與通知徽章。微軟實測數據顯示，固定網站可使使用者重訪率提升 15~50%。本文詳細說明實作方式與最佳實務。

核心優勢

• 零安裝成本：無需開發原生 App，現有網站即可升級為類 App 體驗。
• 動態磚：支援循環顯示多張圖片/文字，即時推送更新 (如未讀訊息數、最新優惠)。
• 跳躍清單：右鍵磚可直接跳轉至網站熱門頁面 (如「購物車」、「訂單」、「客服」)。
• 通知徽章：磚右上角顯示數字徽章 (1~99)，提醒新訊息。
• 跨裝置同步：使用者以 Microsoft 帳號登入，固定網站自動同步至所有 Win 8 裝置。

實作三步驟

步驟 1：準備磚圖示 (最關鍵)

IE10 依據裝置解析度自動縮放，建議提供以下尺寸 (PNG，透明背景)：

最小需求： 僅需 144×144 一張，IE10 會自動縮放產生其他尺寸 (品質稍遜)。

步驟 2：在網頁 <head> 加入中繼標籤

<!-- 基本固定網站宣告 -->
<meta name="application-name" content="我的購物網" />
<meta name="msapplication-TileImage" content="/images/tile-144.png" />
<meta name="msapplication-TileColor" content="#0099CC" /> <!-- 磚背景色 -->

<!-- 動態磚內容 (循環顯示最多 5 個通知) -->
<meta name="msapplication-notification" content="frequency=30; polling-uri=https://example.com/notifications.xml; cycle=1" />

<!-- 跳躍清單 (最多 5 項) -->
<meta name="msapplication-task" content="name=購物車; action-uri=/cart; icon-uri=/icons/cart.ico" />
<meta name="msapplication-task" content="name=我的訂單; action-uri=/orders; icon-uri=/icons/order.ico" />
<meta name="msapplication-task" content="name=客服中心; action-uri=/support; icon-uri=/icons/support.ico" />

<!-- 釘選按鈕 (可選，引導使用者釘選) -->
<button onclick="window.external.msPinSite()">釘選到啟動畫面</button>

步驟 3：提供動態磨通知 XML (伺服器端)

polling-uri 指向的 XML 格式範例 (notifications.xml)：

<?xml version="1.0" encoding="utf-8"?>
<notifications version="2.0">
  <notification id="1">
    <tile>
      <visual version="2">
        <binding template="TileWideText03">
          <text id="1">限時優惠：全館 8 折！</text>
          <text id="2">截止今晚 24:00</text>
        </binding>
        <binding template="TileSquareText04">
          <text id="1">8 折優惠</text>
          <text id="2">今晚截止</text>
        </binding>
      </visual>
    </tile>
    <badge value="3" /> <!-- 徽章數字 -->
  </notification>
  <!-- 可再加入 4 個 notification 循環顯示 -->
</notifications>

支援的範本請參考 MSDN Tile Template Catalog。

進階技巧

• 動態更新徽章：伺服器端根據使用者未讀數動態生成 badge value。
• 釘選偵測：JS 判斷 window.external.msIsSitePinned()，已釘選者隱藏引導按鈕。
• 啟動畫面啟動參數：使用者從磚啟動時，URL 會攜帶 ?msPinned=1，可在此呈現專屬歡迎畫面。
• 離線支援：配合 HTML5 Application Cache / Service Worker，讓固定網站離線可用。

相容性與限制

• 僅限 IE10/11 on Windows 8/8.1。Win 10 開始功能表磚機制不同 (支援 PWA/Web App Manifest)。
• 使用者必須主動點擊「釘選到啟動畫面」 (或透過右鍵網頁 → 「釘選網站」)。
• 企業環境群組原則可能禁用固定網站功能。

結語

IE10 固定網站以極低開發成本，為網站帶來原生 App 般的進入點與互動體驗。只需準備 144×144 圖示、加入幾行 meta 標籤、提供簡單的通知 XML，即可讓網站活躍於使用者的啟動畫面，大幅提升回訪率與品牌曝光。建議所有面向消費者的網站盡快部署。