共用方式為


將您的網站變成高品質的 PWA

將您的網站變成功能完整的高品質 PWA (漸進式 Web 應用程式) 可以在午餐休息時完成! 在本文中,您會逐步完成端對端程式。

步驟 1:在 PWA 建立器中建立報告卡片

首先,您會想要檢查您的網站是否有絕佳的 PWA 所需的功能和中繼資料。

  1. 瀏覽至 PWA 建立器
  2. 輸入您要轉換成 PWA 的網站 URL,然後按一下 [開始]
  3. PWA 建立器會顯示 PWA 報告卡片,指出您的網站具有且沒有的功能。

步驟 2:檢閱您的 PWA 報告卡片

PWA 報表卡片範例

您的 PWA 報告卡片包含網站的分數,最高分數為 100。 分數是以三種特徵類別為基礎。

Manifest

PWA 會評估網站的 Web 應用程式資訊清單,如果有的話,並識別所需的欄位或值、建議和選擇性。 您可以藉由編輯和重新發佈資訊清單檔案,或使用線上資訊清單編輯器來新增遺漏值來改善分數。

警告

線上資訊清單編輯器所做的變更將不會發佈至您的網站。 建立 PWA 時,您所做的變更只會由 PWA 建立器使用。

必要的值必須存在,否則 PWA 建立器將無法建立 PWA。 必要的欄位包括只有資訊清單、圖示、名稱、簡短名稱和 start_url。

建議的欄位並非必要,但對於 PWA 的使用者體驗而言很重要。 強烈建議您提供所有建議的值,不過 PWA 建立器可以建立不含 PWA 的值。 建議的值包括顯示模式、啟動顯示畫面背景色彩、描述、方向、螢幕擷取畫面、高解析度圖示、可遮罩圖示、類別和快捷方式。

不需要選擇性欄位,但可以視需要指定。 選擇性欄位包括年齡分級和相關應用程式。

服務程式

PWA Builder 提供的一些預先建置服務工作者服務工作者會在背景執行,以啟用豐富的 Web 應用程式功能,否則會有 404 錯誤。 PWA 建立器需要服務工作者來建立 PWA,但如果您沒有服務背景工作角色,您可以使用 PWA 建立器所提供的數個預先建置服務背景工作角色之一。 若要使用預先建置的服務背景工作角色:

  1. 選擇功能表中的 [服務背景工作角色選項] 索引標籤。
  2. 從策劃清單中選取適當的服務背景工作角色。 請注意,有許多預先建置的選項;請務必挑選最適合您特定使用案例的服務背景工作角色。
  3. 選取您想要使用的服務背景工作角色之後,就會返回 PWA 報告卡片。

安全性

所有使用 PWA 建立器建置的 PWA 都需要三種安全性通訊協定。

  1. 您的網站必須使用 HTTPS。

  2. 您的網站必須有對應的 HTTPS 憑證。

    如果您的網站沒有 HTTPS 憑證,您可以發佈至 Azure 以取得內建 HTTPS 支援。 或者,還有免費的第三方工具,例如 Allowencrypt,可讓您免費取得 HTTPS 憑證。

  3. 您的網站不得包含混合內容。 混合內容是在透過 HTTPS 提供的頁面包含透過 HTTP 載入的資源時。 混合內容會危害 HTTPS 和 PWA 的安全性。

步驟 3:從合作夥伴中心收集重要資訊

您需要合作夥伴中心帳戶的數個資訊,才能建立 PWA。 如果您沒有 MSA,請按一下此處以取得如何開始使用的指示。 您也必須在 Windows 開發人員計劃中註冊。

應用程式概觀頁面的影像

如果您尚未這麼做,您必須保留新的名稱來建立 PWA 應用程式。 保留名稱之後,按一下 [開始提交] 按鈕以建立新的應用程式提交。

產品身分識別頁面的影像

接下來,按一下 [產品管理] 索引標籤,然後選取 [產品身分識別]。 產品身分識別頁面會列出您產品的套件識別碼、發行者識別碼和發行者顯示名稱。 儲存這些值並返回 PWA 建立器。

步驟 4:在 PWA 建立器上產生 PWA

PWA Builder 上產生按鈕的影像

您現在擁有在 PWA 建立器上建立 PWA 所需的一切。 返回 PWA 建立器網站,然後按一下 [產生]

PWA Builder 提示使用者從合作夥伴中心取得資訊

PWA 建立器會提示您輸入您在步驟 3 中從合作夥伴中心取得的資訊。 填入值,然後按一下 [產生]

檔案總管中的 PWA 檔案

PWA 建立器建立 PWA 之後,您的瀏覽器會自動下載它。 您的 PWA 會封裝在包含六個檔案的 .zip 檔案中。

msix 檔案是 PWA 的主要應用程式套件。 此檔案會在使用者的電腦上安裝您的 PWA。

appx 檔案是傳統應用程式套件。 它用來在舊版 Windows 上安裝您的 PWA。 如需詳細資訊,請參閱經典應用程式套件

步驟 5:將您的應用程式套件提交至 Microsoft Store

這些套件可以透過與 MSIX 檔案封裝的任何其他應用程式相同的方式提交至 Microsoft Store。 如需將 PWA 套件提交至 Store 的進一步指示,請參閱 應用程式提交