[Windows 8.1] 升級Windows 8 App到Windows 8.1

本文章的內容來自2013/6月在舊金山舉行的BUILD 2013大會。

原始投影片及錄影檔請見: Upgrading Windows 8 apps to Windows 8.1

首先這堂課的內容是如何使用Visual Studio來針對既有的Windows 8 App升級為Windows 8.1的版本，無論是以XAML或HTML寫的Apps。但不涵蓋C++。

為何要升級我的Windows 8 App呢? 使用者由Windows 8升級為Windows 8.1之後，仍然能夠在Store中看到所有的 Windows 8 Apps；亦即，您已上架到Windows 8 市集中的Apps，在Windows 8.1的環境中仍然能被找到、被購買、也能完全相容且正確的執行。而且，若您的Apps升級到8.1之後，Windows 8的使用者即無法在Store中找到您的Apps。

所以，我們得先來衡量一下升級到8.1的好處，之後也會討論到是否要同時管理Windows 8 及Windows 8.1 版本的方法。

首先最重要的是，8.1在Apps的效能執行上作了非常大的改進! 在無需修改任何一行程式碼的情形下，只要retarget您的Apps到8.1，就可以感覺到效能上的大幅進步。

而您若使用了8.1的新功能，如 WinJS Scheduler, Dispose Model等的話，效能更能顯著提升、同時減少Working Set等記憶體使用量。

接下來是一段比較內建的Mail (郵件) App，在沒更改一行程式碼的情況下分別在Windows 8及Windows 8.1中執行起來的比較:

啟動速度較快(圖片先出來)

在ListView control 用手作快速的panning時，右側8.1的畫面不會有lag的情形。

其次，當然就是一些Windows 8.1的許多新功能了。(更多新功能的詳細說明請見BUILD 2013的錄影: https://channel9.msdn.com/Events/Build/2013)

而最後，也許也是最重要的，就是Windows 8.1重新改版的Store(市集)了，新的Store會特別精選具有8.1 新功能的Apps，增加您的Apps被使用者找到、下載的機會。

同時因為所有的Windows 8機器都可以免費升級到Windows 8.1，我們也預期會有許多的使用者願意直接升級。

請視App升級至8.1為讓您的Apps更好(better)的過程，而非只是單純的升級。

第一步驟即是regarteting您的Apps至8.1，重新編譯、執行、測試。

第二步驟是使用8.1的全新功能，讓您的Apps更好! 比如Search控制項在8.1中可以很好的利用。

第三步驟即是讓您的8.1 Apps上架Store。

OK 現在我有兩個不同版本的Apps了，要如何維護呢? 建議的作法是：

1. 在您所使用的Source Control軟體中，建立一個全新的分支(branch)，這也是微軟內部的作法；或是

2. 拷貝整個solution再各自維護。

比較不建議的作法是維持一個單一的solution，然後在不同的projects中target到不同的Windows 版本。這種作法的缺點是，當有共用reference時，還得依據不同版本的reference給它不同的名稱，增加coding上的複雜度，也增加管理reference上的困難。

不同版本的Visual Studio 2013在開發及升級Windows Store Apps上的差異:

- Profession, Premium 及Ultimate版本:

1. 可以建立、編譯Windows 8.1專案

2. 可以升級Windows 8專案至Windows 8.1

3. 可以編譯Windows 8專案

- Express版本:

1. 可以建立、編譯Windows 8.1專案

2. 可以升級Windows 8專案至Windows 8.1 (但不能編譯Windows 8專案)

同時，Visual Studio 2012及Visual Studio 2013可以同時執行在同一台機器上!

現在來試一個Windows Blog Reader (XAML) App，這是在MSDN可以免費下載且附程式碼的範例程式。

以Visual Studio 2013 (Preview)開啟後會出現建議retarget到Windows8.1的提示，按了OK後並不會直接幫你升級。

你可以看到右側的各專案還是Windows 8的專案。我們可以按F5直接執行:

看起來好像完全沒問題，但是在Windows 8.1中，使用者可以在此App所容許的最小寬度以上任意調整寬度。以下看到當使用者變換寬度時會看到有黑色留邊的現象:

好，接下來我們來試試升級至Windows 8.1:

看來是無痛升級成功了，執行之後會發現皆能正常執行，同時在使用者改變App寬度時不會有黑邊的情形發生:

雖然在此範例中能無痛升級，當然並非保證所有的Windows 8 Apps皆能如此輕易的完成升級，在retargeting的過程中會提示您閱讀一份文件，可以作為遇到問題時之參考。比如常見的問題是8.1使用了IE 11作為Web redering engine，這些都可能影響到相容性。

在另一個Windows Blogs Reader App的JavaScript版本中，也可以作同樣的升級，除了會發現在使用者改變Apps寬度時不會出現黑邊外，不同版本間的CSS會有些不同，但只要些微修改即可:

說明至此各位已發現Windows Size是各位在升級時必需考量的重點之一。

在Windows 8中，有一個固定的Snapped View (320 pixels 寬)可讓使用者選擇。

而在Windows 8.1，使用者不但能在同一螢幕上同時執行最多4個Apps (包含Destop Apps)，同時在寬度的選擇上也有更大的自由。

以下圖為例，中間的Weather Apps其最小的可能寬度為500 Pixels，以能完整的顯示其資訊，使用者可在此500 pixels以上的寬度間自由調整。而最右側的Reader List App，其最小則能縮至320 Pixels。

Windows 8.1再也沒有所謂的Filled View及Snapped View了!

新的作法是，所有的Apps的預設最小寬度是500 pixels，亦即使用者可以將您的App設為612, 700 pixels等寬度。而開發者則可以決定你的App的最小寬度至320 pixels。若設為320，使用者即可在320以上以至於螢幕的寬度間來更改你的App寬度。

App在執行時，使用者更改寬度後(手指離開螢幕時)會接收到一個event，開發者即可以據此event handler來設定layout。在這個步驟中，能取得Windows Size的資訊就很重要了。

以下是在manifest中設定最小寬度:

那到底要設多少呢? 這當然是取決於你的App是否能在某種寬度下仍能最佳顯示所要呈現的內容了。同時也要考慮到小螢幕尺寸的平版、以及在Portrait模式時，你的App能呈現的內容會是受限的，也需要將這些使用情境列入考量。

以下是HTML及XAML取得Windows Size & Orientation資訊的程式碼:

好，假設您已經成功升級、實作了Windows 8.1的新功能並測試完畢之後，就準備好上傳您的App至Store了。

在您submit同一個App的過程之中，您會注意到只需要重新填寫Description (描述)、Features (新功能)及Screenshots (截圖)，其他諸如App Name, Pricing, Website and support等都是相同的資訊，故不用重新填寫。

這裡有一個需注意的一點，同一個App若有Windows 8 及Windows 8.1的版本，則Windows 8的版本別(version numbers)不能超過8.1的版本。Visual Studio 2013會自動幫您解決或避開此問題。

好，我們來看看上傳介面吧!

你會看到可以在同一畫面中上傳Windows 8及Windows 8.1的package.

如前所述，您只要再填入Description (描述)、Features (新功能)及Screenshots (截圖)資訊即可。

延伸學習:

Beautiful Apps at Any Size on Any Screen

The fast lane for app certification

BUILD 2013 Channel 9