將 PWA 發佈到 Microsoft Store

將您的 Progressive Web App (PWA) 發佈到 Microsoft 商店 ，帶來以下優勢：

要將您的 PWA 發佈到 Microsoft Store，則不需要修改程式碼。 相反地，你要在 Microsoft Partner Center 建立應用程式預約，使用 PWA Builder 打包你的 PWA，然後將套件提交到 Microsoft Store。 以下章節將說明這些步驟。

另請參閱:

• 開始：在 Microsoft Store 發布你的第一個應用程式

建立應用程式預約

要將您的應用程式提交至 Microsoft Store，請使用 Microsoft 合作夥伴中心。

要建立應用程式預約：

1. 在你能建立應用程式預約之前，必須擁有 個人 Microsoft帳號， (不是工作Microsoft帳號或學校Microsoft帳號，且這些帳號) 已註冊在 Windows 開發者計畫中。

   1. 如果你還沒有，請在 account.microsoft.com 建立個人Microsoft帳號。
   2. 請依照 Partner Center 開啟開發者帳號的步驟，註冊 Windows 開發者計畫。

2. 當您的帳號註冊完成應用程式開發計畫後，請依照以下步驟建立應用程式預約：

   1. 前往 合作夥伴中心儀表板。 請用你註冊的帳號登入。
   2. 在 工作區中，選擇 應用程式與遊戲。 應用程式與遊戲 |總覽頁面會出現。
   3. 選擇 新產品>MSIX 或 PWA 應用程式。
   4. 當被要求時，輸入您的預訂名稱，然後選擇 「保留產品名稱」。

   

3. 若要在 「打包你的 PWA 」區塊中顯示您的出版商資訊，請選擇 產品管理>產品識別碼。

   

4. 複製並儲存以下數值。

   • 套件識別碼
   • 出版商識別
   • 出版商顯示名稱

打包你的 PWA 給商店

現在你已經收集到應用程式的發佈資訊，請使用 PWA Builder 為你的 PWA 產生 Windows 應用程式套件。

要產生應用程式套件：

1. 請前往 PWA Builder。

2. 在 「將你的 PWA 寄送到應用程式商店」裡，在文字框輸入你的 PWA 網址，然後點擊 開始 按鈕。

   你的 PWA 會被評估以確保已準備好上架。

3. 如果 PWABuilder 報告卡頁面的評估顯示您的 PWA 已準備好被包裝，請繼續下一步。 若評估顯示您的 PWA 尚未準備好被包裝，請檢視 行動項目 區塊，了解如何改進您的 PWA：

   

4. 當您的 PWA 準備好包裝後，在 PWABuilder 報告表頁面右上角，點擊「 Package For Stores 」按鈕。 對話框隨即開啟，顯示訊息「太棒了！」你的 PWA 已經準備好上門了！

5. 在 Windows 裡，點擊 「產生套件 」按鈕。 Windows 套件選項 對話框會打開。

6. 將你儲存在上方 「建立應用程式預約 」區塊的以下數值貼上：

   • 套件識別碼
   • 出版商顯示名稱
   • 出版商識別

   

7. 點擊 下載套件 按鈕即可下載您的 Windows 套件。

你的下載是一個 .zip 包含 .msixbundle 檔案和檔案 .classic.appxbundle 的壓縮檔。 這兩個應用程式套件讓你的 PWA 能在多種 Windows 版本上運行。

另請參閱:

• 什麼是經典套裝？
• MSIX 套件的打包。

將您的應用程式套件提交至 Microsoft Store

要將您的應用程式提交到 Microsoft Store：

1. 前往 Microsoft 合作夥伴中心。

2. 選擇你的應用程式。

3. 點擊 「開始提交 」按鈕。

   

4. 當被要求時，提供你的應用程式資訊，例如價格和年齡分級。

5. 在「套件」提示詞中，選擇.msixbundle你在「打包你的 PWA」區塊產生的.classic.appxbundle檔案。

提交申請後，申請會被審核，通常會在24到48小時內完成。 應用程式核准後，你的 PWA 會上架 Microsoft Store。

測量你從 Microsoft Store 安裝的 PWA 使用情況

當您的 PWA 首次啟動時，如果 PWA 是從 Microsoft Store 安裝，Microsoft Edge 會包含以下 Referer 標頭，並請求您網頁應用程式的第一個導覽。

Referer: app-info://platform/microsoft-store

使用此功能測量從 Microsoft Store 安裝的 PWA 不同流量。 根據流量，你可以調整應用程式內容以提升使用者體驗。 此功能對客戶端與伺服器程式碼皆可存取。 要在用戶端存取這些資訊，可以在 JavaScript 中查詢 document.referrer 。

重定向到特定區域的網域，但不會顯示額外介面

預設情況下，從 Microsoft Store 安裝的 PWA 在應用程式被導往特定區域網域時，會顯示額外的介面。 新增的介面會顯示網址和頁面標題。 此 UI 是因為導覽區域特定網域被視為 超出範圍。

下圖顯示當使用者離開 PWA 範圍時所引入的使用者介面。

使用瀏覽器安裝的 PWA 進行網域重定向

網頁應用程式清單綁定於單一網域。 然而，有些 PWA 會為全球特定地區的客戶使用特定地區的網域。 當客戶在網頁瀏覽器中造訪 PWA 時，會無縫地從主網域 (（例如 contoso.com) ）轉換到特定地區的網域 (contoso.co.ke ，例如) ，因為重定向是在該網站初始載入時發生的。

因此，從 Microsoft Edge 安裝 PWA 的客戶，將從當地特定網域安裝 PWA。 後續的 PWA 發布會直接進入該區域特定網域，而非先進入主網域。

使用 Microsoft Store 安裝的 PWA 進行網域重定向

從 Microsoft Store 安裝的 PWA 會有一個硬編碼的起始網址，指向主網域。 當 PWA 啟動時，PWA 會先導向主網域，然後客戶可視需要 () 被導向至其特定區域的網域。 若發生該重定向，該導航將被視為「超出範圍」。 因此，應用程式會在頁面頂端顯示網址和頁面標題。

顯示網址與頁面標題是一種安全功能，確保使用者知道他們已離開 PWA 的上下文。 當使用者在 PWA 的情境下從另一個網站載入頁面時，這個新增的使用者介面是合理的。 然而，當使用者在同一網站的網域間移動時，這種新增的介面可能不合適。

阻止顯示特定地區的網址和標題

目前，從 Microsoft Store 安裝的應用程式無法阻止在重定向特定區域時顯示額外的網址和標題介面。

未來， 範圍擴展 將使 PWA 能夠擷取路徑、子域，甚至是自身範圍以外的地點的導航。 範圍擴展功能目前仍在積極開發中，尚未準備好使用。 想了解更多 Chromium 中此功能的開發狀況，請參考 Chrome Platform Status 中的網頁應用範圍擴充功能。

一旦這項功能能在 Microsoft Edge 中使用，我們會在這裡詳細說明。 同時，想了解更多範圍擴展的運作方式，請參閱 WICG 資料庫上的說明文件。

更新你的應用程式

一般來說，當你更新 PWA 程式碼時，不需要重新建立一個新的應用程式套件並重新提交到 Microsoft Store 。 舉例來說，假設你對應用程式的前端 HTML、CSS 或 JavaScript 程式碼，或是你的服務工作者做了修改。 下次使用者啟動應用程式時，執行應用程式的瀏覽器會從你的網頁伺服器下載變更。

不過，如果你對網頁應用程式清單檔案做了更改，必須建立新的應用程式套件並再次提交到 Microsoft Store。 例如，在清單中，你可以更改應用程式圖示或應用程式名稱，或新增清單成員如 file_handlers、 protocol_handlers、 share_target。 當清單變更時，必須建立並提交新的應用程式套件，因為網頁應用程式清單檔案中的資訊會被複製到 Windows 應用程式套件，以便更好地與 Windows 整合。

另請參閱

• Microsoft Store
• PWA 建構者

PWA Builder 倉庫中的文件：

• 將你的 PWA 帶到 Microsoft Store 的下一步 ——測試並提交你的 PWA 應用程式套件。
• 將新應用程式發佈到商店
• 更新商店中的現有應用程式 - 將現有商店應用程式更新為 PWA。
• Windows PWA 套件的圖片推薦 - 商店中 PWA 的圖片推薦。
• 什麼是經典套裝？ - 應用程式包裝說明。