從原始程式碼建立具有 MSIX 核心的 MSIX 套件Create an MSIX package with MSIX Core from source code

MSIX Core 提供 MSIX 部署來選取舊版的 Windows。MSIX Core brings MSIX deployment to select previous versions of Windows. 您可以利用 MSIX Core 安裝程式,使用 ClickOnce 來建立應用程式。You can leverage the MSIX Core installer to create an application using ClickOnce. 這可讓您的使用者下載 setup.exe,並透過 MSIX Core 安裝程式安裝 MSIX 應用程式。This will allow your users to download a setup.exe and install the MSIX app through the MSIX Core installer.

將您的應用程式裝載在 web 伺服器上Host your app on a web server

若要讓您的應用程式準備好使用 MSIX Core installer 進行開機,您必須將應用程式套件裝載在 web 伺服器上。To get your app ready for bootstrapping with the MSIX Core installer, you’ll need to host your app package on a web server. 本節提供有關如何在 Azure上設定 web 應用程式、 Internet Information Services (IIS) ,以及 Amazon Web Services (AWS) 的詳細資料。This section provides details about how to set up a web app on Azure, Internet Information Services (IIS), and Amazon Web Services (AWS).

AzureAzure

若要使用此選項,您必須擁有 Azure 訂用帳戶。To use this option you must have an Azure subscription. 若要取得一個,請參閱 Azure 帳戶頁面To obtain one, see the Azure account page.

建立 Azure Web 應用程式Create an Azure Web App

若要開始使用,請移至 Azure 入口網站頁面 ,並遵循下列步驟:To get started go to the Azure portal page and follow these steps:

  1. 按一下 [建立資源]。Click Create a Resource.
  2. 按一下 [ web ],然後選取 [ web 應用程式]。Click Web and select Web App.
  3. 在 [ 實例詳細資料] 底下,建立唯一的應用程式名稱,然後為您的應用程式選取適當的設定。Under Instance Details, create a unique app name and select the appropriate settings for your app. 例如,您必須在程式 代碼或 Docker 容器執行時間堆疊之間進行選擇。For example, you will need to choose between Code or Docker Container and the Runtime Stack. 否則,請將其他專案保留為預設值。Otherwise, leave everything else default.
  4. 按一下 [ 建立 ] 並完成 wizard。Click Create and finish the wizard.

裝載應用程式套件與網頁Host the app package and the web page

  1. 建立 web 應用程式之後,請選取應用程式。After you create the web app, select the app.
  2. 在 [ 開發工具] 底下,按一下 [ App Service 編輯器]。Under Development Tools, click App Service Editor.
  3. 在編輯器中,有預設的 hostingstart.html 檔案。In the editor, there is a default hostingstart.html file. 以滑鼠右鍵按一下檔案總管的空白處,然後選取 [上傳 檔案] 以開始上傳您的應用程式套件。Right-click in the empty space of File Explorer and select Upload Files to begin uploading your app packages.
  4. 再以滑鼠右鍵按一下檔案總管面板的空白處,然後選取 [ 新增 檔案] 以建立新的檔案。Right-click in the empty space of the File Explorer panel again and select New Files to create a new file. 將檔案命名為您要預設 HTML 網頁的名稱。Name the file what you want your default HTML page to be.

設定應用程式套件 MIME 類型的 web 應用程式Configure the web app for app package MIME types

將名為 Web.config 的新檔案新增至 web 應用程式。Add a new file named Web.config to the web app. 開啟 Web.config 檔案,然後將下列 XML 新增至檔案。Open the Web.config file and add the following XML to the file.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <!--This is to allow the web server to serve resources with the appropriate file extensions-->
    <staticContent>
      <mimeMap fileExtension=".appx" mimeType="application/appx" />
      <mimeMap fileExtension=".msix" mimeType="application/msix" />
    </staticContent>
  </system.webServer>
</configuration>

網際網路資訊服務 (IIS)Internet Information Services (IIS)

IIS 是選用的 Windows 功能。IIS is an optional Windows feature. 若要安裝 IIS:To install IIS:

  1. 按一下 [ 開始 ],並搜尋 [ 開啟或關閉 Windows 功能]。Click Start and search for Turn Windows features on or off.
  2. 選取 Internet Information ServicesSelect Internet Information Services.
  3. 也請確定您已安裝 ASP.NET 4.5 或更新版本。Also make sure you install ASP.NET 4.5 or greater. 在 [ Windows 功能] 對話方塊中,展開Internet Information Services -> World Wide Web 服務 -> 應用程式開發功能],然後選取大於或等於ASP.NET 4.5ASP.NET版本。In the Windows Features dialog, expand Internet Information Services -> World Wide Web Services -> Application Development Features, and select a version of ASP.NET that is greater than or equal to ASP.NET 4.5.
  4. 按一下 [確定] 開始安裝。Click OK to begin the installation.

需要 Visual Studio 2017 (或更新版本) 和 Web 開發工具。Visual Studio 2017 (or a later version) and Web Development Tools are required. 如果您已經安裝 Visual Studio 2017 或更新版本,請確定您已安裝 ASP.NET 和 Web 開發工作負載。If you already have Visual Studio 2017 or a later version installed, make sure you have the ASP.NET and Web development workloads installed. 否則,請從 這裡安裝 Visual Studio。Otherwise, install Visual Studio from here.

建置 Web 應用程式Build a web app

以系統管理員身分啟動 Visual Studio,然後使用空白專案範本建立新的 Visual c # Web 應用程式 專案。Start Visual Studio as an administrator and create a new Visual C# Web Application project with an empty project template.

使用您的 Web 應用程式設定 IISConfigure IIS with your Web app

  1. 方案總管中,以滑鼠右鍵按一下根專案,然後選取 [ 屬性]。In Solution Explorer, right-click on the root project and select Properties.
  2. 在 [屬性] 中,選取 [ Web ] 索引標籤。In properties, select the Web tab.
  3. 在 [ 伺服器 ] 區段中,從下拉式功能表中選擇 [ 本機 IIS ],然後按一下 [ 建立虛擬目錄]。In the Servers section, choose Local IIS from the dropdown menu and click Create Virtual Directory.

將應用程式套件新增至 web 應用程式Add the app package to the web application

將您想要散發的應用程式套件新增至 web 應用程式:Add the app package that you want to distribute to the web application:

  1. 方案總管中,以滑鼠右鍵按一下專案節點。In Solution Explorer, right-click the project node.
  2. 選取Add -> [新增資料夾],並命名資料夾套件Select Add -> New Folder and name the folder packages.
  3. 若要將應用程式封裝新增至資料夾,請以滑鼠右鍵按一下 [封裝] 資料夾,然後選取 [加入 -> 現有專案]。To add app packages to the folder, right-click the packages folder and select Add -> Existing Item. 流覽至應用程式套件位置。Browse to the app package location.

建立網頁Create a web page

根據您的需求,視需要建立 HTML 網頁或任何其他 web 應用程式。Create an HTML page or any other web app as required per your needs. 新增新 setup.exe 的連結。Add the link of your new setup.exe.

設定應用程式套件 MIME 類型的 web 應用程式Configure the web app for app package MIME types

從方案 explorer 開啟 Web.config 檔案,然後在專案中新增下列 XML Open the Web.config file from the solution explorer and add the following XML within the element.

<system.webServer>
  <!--This is to allow the web server to serve resources with the appropriate file extensions-->
  <staticContent>
    <mimeMap fileExtension=".appx" mimeType="application/appx" />
    <mimeMap fileExtension=".msix" mimeType="application/msix" />
  </staticContent>
</system.webServer>

Amazon Web Services (AWS)Amazon Web Services (AWS)

若要使用此選項,您必須擁有 AWS 成員資格。To use this option you must have an AWS membership. 如需詳細資訊,請參閱 AWS 帳戶詳細資料For more information, see AWS account details.

建立 Amazon S3 bucket,然後上傳您的 MSIX 套件和網頁Create an Amazon S3 bucket and upload your MSIX packages and web pages

Amazon Simple Storage Service (S3) 是用來收集、儲存和分析資料的 AWS 供應專案。Amazon Simple Storage Service (S3) is an AWS offering for collecting, storing and analyzing data. S3 值區是一種便利的方式,可裝載 Windows 10 的應用程式套件和網頁以進行散發。S3 buckets are a convenient way to host Windows 10 app packages and web pages for distribution.

  1. 登入 AWS。Log in to AWS. 在 [ 服務 尋找 S3] 下。Under Services find S3.
  2. 選取 [ 建立 bucket ],並輸入您網站的 bucket 名稱Select Create bucket and enter a Bucket name for your website. 遵循對話方塊提示以設定屬性和許可權。Follow the dialog prompts for setting properties and permissions. 若要確保您的 Windows 10 應用程式可以從網站散發,請啟用您的 bucket 的 讀取寫入 許可權,然後選取 [授與此值區的公用讀取權限]。To ensure that your Windows 10 app can be distributed from your website, enable Read and Write permissions for your bucket and select Grant public read access to this bucket. 按一下 [ 建立 bucket ] 以完成此步驟。Click Create bucket to finish this step.
  3. 當您完成時,請將您的 MSIX 套件和網頁上傳至 S3 bucket。When you are finished, upload your MSIX packages and web pages to the S3 bucket.

設定應用程式套件 MIME 類型的 web 應用程式Configure the web app for app package MIME types

使用像是 S3 瀏覽器的 web 服務介面   來新增 預設的 HTTP 標頭Using a web service interface like S3 browser to add a new Default HTTP Headers.

  1. 流覽至 [ 工具 ],然後選取 [ 預設 HTTP 標頭]。Navigate to Tools and select Default HTTP Headers.
  2. 在 [ 預設 HTTP 標頭 ] 對話方塊中,按一下 [ 新增]。In the Default HTTP Headers dialog, click Add.
  3. 在 [ 加入新的預設 HTTP 標頭 ] 對話方塊中,指定 [bucket 名稱]、[檔案名]、[標頭名稱] 和 [標頭值],然後按一下 [ 新增標頭]。In the Add New Default HTTP Headers dialog, specify the bucket name, file name, header name, and header value, and then click Add new header.
    • Bucket 名稱: msix-套件Bucket name: msix-packages
    • 檔案名: *. msixFile name: *.msix
    • 標頭名稱: content-typeHeader name: Content-Type
    • 標頭值: application/msixHeader value: application/msix

注意

 AWS 有一些您必須遵循的嚴格指導方針。 AWS have some strict guidelines you will have to follow. 例如,值區名稱必須是唯一的,因此,如果您使用上述範例,您將需要變更值區名稱。For example, Bucket names are required to be unique and therefore if you are using the example above, you will need to change the Bucket name.

使用 MSIX Core installer 來建立 ClickOnce 應用程式Use the MSIX Core installer to build the ClickOnce application

尋找您的應用程式應用程式 ClickOnce setup.exe。Find your application application ClickOnce setup.exe.

執行 URL 命令以建立新的 setup.exeRun URL command to create new setup.exe

請確定您已遵循在 Visual Studio 中複製、建立和發佈 MSIX Core 解決方案的指示。Make sure you have followed the instructions to clone, build and publish the MSIX Core solution in Visual Studio.

流覽至您下載 setup.exe 檔案的目錄,然後執行此命令:Navigate to the directory where you downloaded the setup.exe file and then run this command:

setup-exe - url=<location of your msix in the webservice>

簽署應用程式Sign the application

因為上一個步驟建立了新的 setup.exe,所以您必須重新簽署應用程式,以確認您是應用程式的受信任發行者,以及建立應用程式的完整性。Because the previous step created a new setup.exe, you will need to sign the app again to verify that you're a trusted publisher of the application and to establish the integrity of the application. 您可以使用 SignTool 並提供您的憑證。You can use the SignTool and provide your certificate.

將應用程式散發給您的使用者Distribute the application to your users

您現在可以使用其網站上的連結或下載按鈕,指向新的 setup.exe。You can now point to the new setup.exe with a link or download button on their website. MSIX Core 的目標物件是 Windows 10 1703 版及更早版本的使用者。MSIX Core is targeted towards users on Windows 10, version 1703 and earlier. 應用程式安裝程式是在 Windows 1709 或更新版本上 MSIX 封裝的理想安裝程式。The App Installer is the ideal installation process for MSIX packages on Windows 1709 or a later version. 應用程式安裝程式可針對取用者端的磁碟空間進行優化,且可以直接從 HTTP 位置安裝應用程式。App Installer optimizes for disk space on the consumer side and can directly install apps from HTTP locations. MSIX Core 會偵測取用者是否在 Windows 1709 或更新版本上,並將它們重新導向至應用程式安裝程式。MSIX Core will detect if a consumer is on Windows 1709 or a later version and redirect them to App Installer.

在 Microsoft Edge 上,您可以呼叫 getHostEnvironmentValue ( # B1 方法,而傳回值中的 作業系統組建 欄位將會指定使用者的 os 版本。On Microsoft Edge, you can call the getHostEnvironmentValue() method and the os-build field in the return value will specify the OS version of the user. 然後,您可以在該處提示安裝程式,使用 MSIX Core (Windows 10、1703版及更早版本的) ,或應用程式安裝程式 (1709 版和更新版本的 Windows 10。From there, you can then prompt the installation process to use MSIX Core (for Windows 10, version 1703 and earlier) or App Installer (for Windows 10, version 1709 and later).

使用者體驗User experience

使用者只需從開發人員的網頁下載並執行 setup.exe。Users simply download and run the setup.exe from the developer’s webpage.

  • 如果使用者執行 setup.exe 時尚未安裝 MSIX Core 安裝程式,使用者會看到 ClickOnce 提示字元,然後按一下 [ 安裝 ] 以安裝 MSIX Core 安裝程式。If the MSIX Core installer is not yet installed when the user runs setup.exe, the user sees the ClickOnce prompt and they click Install to install the MSIX Core installer. 安裝程式會自動啟動,並顯示開發人員查詢字串中指定之 MSIX 套件的安裝畫面,讓使用者可以安裝應用程式。The installer automatically launches and shows the install screen for the MSIX package specified in the developer’s query string so the users can install the app.
  • 如果當使用者執行 setup.exe 時,已安裝 MSIX Core 安裝程式,MSIX Core 安裝程式會自動啟動,並顯示查詢字串中指定之 MSIX 套件的安裝畫面,以便使用者安裝應用程式。If the MSIX Core installer is already installed when the user runs setup.exe, the MSIX Core installer automatically launches and shows the install screen for the MSIX package specified in the query string for users to install the app.