將 PWA 發佈至 Microsoft Store

將 Progressive Web App (PWA) 發佈到 Microsoft Store 具有下列優點：

若要將 PWA 發佈至 Microsoft Store，不需要變更程式碼。 相反地，您可以在 Microsoft 合作夥伴中心建立應用程式保留、使用 PWA Builder 封裝您的 PWA，然後將套件提交至 Microsoft Store。 下列各節說明這些步驟。

另請參閱:

• 開始使用：在 Microsoft Store 中發佈您的第一個應用程式

建立應用程式保留

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

若要建立應用程式保留：

1. 在建立應用程式保留之前，您必須先擁有 個人 Microsoft帳戶， (不是公司Microsoft帳戶，也不是已註冊 Windows 開發人員計畫的學校Microsoft帳戶) 。

   1. 如果您還沒有，請在 account.microsoft.com 建立個人Microsoft帳戶。
   2. 依照在 合作夥伴中心開啟開發人員帳戶中的步驟，註冊加入 Windows 開發人員計畫。

2. 當您在應用程式開發人員計畫中註冊帳戶後，請按照下列步驟建立應用程式保留：

   1. 移至 合作夥伴中心儀表板。 使用您註冊的帳戶登入。
   2. 在 [工作區] 底下，選取 [應用程式和遊戲]。 應用程式和遊戲 |[概觀] 頁面隨即顯示。
   3. 選取 新產品>MSIX 或 PWA 應用程式。
   4. 當系統提示時，請輸入您保留的名稱，然後選取 [ 保留產品名稱]。

   

3. 若要顯示發行者詳細資料以用於 [封裝您的 PWA] 區段，請選取 [產品管理] [產品識別>]。

   

4. 複製並儲存下列值。

   • 套件識別碼
   • 發行者識別碼
   • 發行者顯示名稱

針對 Microsoft Store 封裝您的 PWA

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

若要產生應用程式套件：

1. 移至 PWA Builder。

2. 在 [將您的 PWA 運送至 App Store] 底下，在文字方塊中輸入 PWA 的 URL，然後按一下 [開始] 按鈕。

   系統會評估您的 PWA，以確保它已就緒。

3. 如果 PWABuilder 成績單頁面中的評估指出您的 PWA 已準備好封裝，請繼續進行下一個步驟。 如果評估指出您的 PWA 尚未準備好封裝，請檢查 [動作項目] 區段，以了解如何改善您的 PWA：

   

4. PWA 準備好封裝後，按一下 PWABuilder 成績單頁面右上角的 [ 商店封裝 ] 按鈕。 隨即開啟一個對話方塊，顯示訊息「 棒極了！您的 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 小時內審查應用程式。 核准應用程式之後，您就可以在 Microsoft Store 中使用您的 PWA。

測量從 Microsoft Store 安裝的 PWA 使用量

PWA 一開始啟動時，如果 PWA 是從 Microsoft Store 安裝，Microsoft Edge 會在要求的 Web 應用程式首次瀏覽時包含下列 Referer 標頭。

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

使用此功能來測量來自從 Microsoft Store 安裝之 PWA 的不同流量。 根據流量，您可以調整應用程式的內容以改善使用者體驗。 用戶端和伺服器程式碼都可以存取此功能。 若要在用戶端存取此資訊，您可以在 JavaScript 中查詢 document.referrer 。

重新導向至地區設定特定的網域，而不顯示其他 UI

根據預設，當應用程式重新導向至地區設定特定的網域時，從 Microsoft Store 安裝的 PWA 會顯示額外的 UI。 新增的 UI 會顯示 URL 和頁面標題。 新增此 UI 是因為瀏覽至地區設定特定網域被視為 超出範圍。

當使用者移至 PWA 範圍之外時，會引進下列 UI：

使用從瀏覽器安裝的 PWA 進行網域重新導向

Web 應用程式資訊清單會繫結至單一網域。 不過，有些 PWA 會為全球特定區域的客戶使用地區設定特定的網域。 在網頁瀏覽器中瀏覽 PWA 時，客戶會無縫地從主要網域 (（例如) ） contoso.com 轉換至地區設定特定的網域 (例如 contoso.co.ke) ，因為重新導向會在該網站的初始載入期間發生。

因此，從 Microsoft Edge 安裝 PWA 的客戶會從地區設定特定網域安裝 PWA。 後續啟動的 PWA 會直接進入該地區設定特定的網域，而不是先進入主體網域。

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

從 Microsoft Store 安裝的 PWA 有一個硬式編碼的起始 URL，指向主體網域。 啟動 PWA 時，PWA 最初會瀏覽至主體網域，然後客戶可能會視需要 () 重新導向至其地區設定特定的網域。 如果發生該重新導向，則會將瀏覽視為「超出範圍」。 因此，應用程式會在頁面頂端顯示 URL 和頁面標題。

顯示 URL 和頁面標題是一項安全性功能，可確保使用者知道他們已離開 PWA 的內容。 當使用者在 PWA 的內容中從另一個網站載入頁面時，此新增的 UI 很有意義。 不過，當使用者在全都是同一網站一部分的網域之間移動時，新增的 UI 可能不適當。

防止顯示地區設定特定的 URL 和標題

對於從 Microsoft Store 安裝的應用程式，目前無法防止在重新導向至地區設定特定網域時顯示額外的 URL 和標題 UI。

未來， 範圍擴充功能 可讓 PWA 擷取路徑、子網域，甚至是其自己範圍以外的網站瀏覽。 範圍擴充功能正在開發中，尚未準備好可供使用。 如要進一步瞭解 Chromium 中這項功能的開發狀態，請參閱 Chrome 平台狀態中的 Web 應用程式範圍擴充功能。

一旦此功能可在 Microsoft Edge 中使用，我們就會在這裡記錄下來。 同時，若要深入瞭解範圍延伸如何運作，請參閱 WICG 存放庫上的說明文件。

更新您的應用程式

一般而言，當您更新 PWA 程式碼時，不需要建立新的應用程式套件並再次提交至 Microsoft Store 。 例如，假設您對應用程式的前端 HTML、CSS 或 JavaScript 程式碼或服務工作者進行了變更。 使用者下次啟動應用程式時，執行您應用程式的瀏覽器會從網頁伺服器下載變更。

不過，如果您對 Web 應用程式資訊清單檔案進行變更，則必須建立新的應用程式套件，然後再次提交至 Microsoft Store。 例如，在資訊清單中，您可以變更應用程式圖示或應用程式名稱，或新增資訊清單成員，例如 file_handlers、 protocol_handlers、 或 share_target。 變更資訊清單時需要建立和提交新的應用程式套件，因為 Web 應用程式資訊清單檔案中的資訊會複製到 Windows 應用程式套件，以便更好地與 Windows 整合。

另請參閱

• Microsoft Store
• PWA Builder

PWA Builder 存放庫中的文件：

• 將 PWA 放入 Microsoft Store 的下一個步驟 - 測試並提交您的 PWA 應用程式套件。
• 將新的應用程式發佈到 Microsoft Store
• 在 Microsoft Store 中更新現有的應用程式 - 將現有的 Microsoft Store 應用程式更新為 PWA。
• Windows PWA 套件的影像建議 - 市集中 PWA 的影像建議。
• 什麼是傳統套件？ - 應用程序包裝解釋器。