由 Web 到 App 之路 (三): 使用 WAT (Web App Template)
WAT (Web App Template) 是微軟所開發，專門設計將既有的網站轉成 App 的免費 Visual Studio 擴充元件，此前的文章已有簡介: WAT- 將既有網站快速轉為 Windows 8.1 App 或 Windows Phone App 的免費工具。上個月也剛推出了 Universal Apps v2.0 的版本 (https://wat.codeplex.com/)。
WAT 的目標定義明確，即是要讓企業能完全延用在既有網站上的投資、同時還能以直覺簡易的 config 方式讓 App 實作出平台功能 (如 Windows Live Tile、App Bar 等)、而且無需每次網站改版即需重新編譯。
WAT 實作
在 Visual Studio 2013 中開啟 Web App Template for Universal Apps- JavaScript 範本
可以看到此方案已預設包含 Windows 8.1 及 Windows Phone 8.1 的 Universal Apps 專案
要快速將 Web 轉為 App，需要 config 的地方只有一個，就是 Shared 中的 config.json 檔。
將其中的 homeURL 改為 Bill Gates 的網址 (https://www.gatesnotes.com/) 之後，同時以 Windows Phone 及 Windows 8.1 模擬器執行的畫面如下，可見到已符合 Responsive Web Design (RWD) 規範的網站轉為 App 之後，即能因應不同尺寸螢幕大小作適當的版面配置:
透過 config.json 客製化 App
所有 App 功能面的實作，全部是透過修改這個 config.json 檔來完成的，包含最重要的無網際網路時的離線 Offline 支援、給定 RSS Feed 即能達到 Live Tile 的效果、給定 Search URL 即實作出 Search Charm Bar、給定外部連結即可實作 App Bar 及 Navigation Bar 等等。
完整的說明文件可見: https://wat-docs.azurewebsites.net/JsonWindows
目前能透過 config 方式即能實現的 App 功能如以下，未來能實現的功能還會不斷增加。
除了功能面外，WAT 也提供了讓您修改 CSS 檔以改變 App 呈現時的版型 (但不影響原有網站的版型)
實際案例
有愈來愈多的國外網站在維護網站的同時、經由 WAT 建置 App 以因應行動化的需求，除了前文中介紹的 Low’s 及 Zoopla Property 之外，我們再以著名旅遊規劃網站 Expedia.com 為例。
以下可看到其網站及在 Windows Phone App 上各自的呈現:
回饋及討論
利用 WAT 將既有網站轉為 App 的過程可說是最簡單的，config 的方式易於操作、維護及偵錯門檻也低。
但最最重要的一點是，網站作了任何更新或變動，其 App 即能立即反應最新的內容；也就是企業本來即正常運行的網站維運流程幾乎不用作調整，在最大化既有投資的同時還能以 App 打開另一個市場。
當然，為了因應各種不同尺寸的行動裝置，亦強烈建議採行此方法的網站符合 Responsive Web Design (RWD) 的設計準則，以達到最好的使用者經驗。
WAT 的未來
微軟設計 WAT 的原始精神是將 Web Experience 作最佳化的運用，短期目標即是讓各客戶能延用在人力、技術及維護上的既有投資、同時能滿足市場行動化的需求；長遠而言微軟會在 Web Experience 上作更進一步的投資!
由 Web 到 App 之路小結
簡單來說，無論是否要走向 App 化，建議各網站可先行實作「釘選」的功能，畢竟簡單又容易測試。
往 App 發展之路，若跨平台是現階段的急迫性需求，可走 Apache Cordova 的方式，但其客製化及維運成本就相對高些；若無跨平台的急迫需求，建議可先走 WAT 的方式，對未來整體維運考量上應能達到最好的 ROI 成效。
延伸閱讀: