在Build 2015 上，微软宣布新的浏览器Microsoft Edge。 Microsoft Edge 使用的是全新的渲染引擎EdgeHTML和Chakra JavaScript 引擎。 这引擎会一直快速地更新，支持更多的HTML5 的标准。 关于Microsoft Edge的更多信息，请参考之前的Microsoft Edge 介绍。

那么这章里，我们聊一聊Web 应用和在Windows 10 上的Web 平台的状态及发展。 大家知道，现在Web 应用的发展已经不仅仅局限于运行在浏览器里的Web 应用。 通过WebView控件，我们可以让Web 应用运行在原生应用（Native App）内。通过HTML5 跨平台应用开发工具，比如Apache Cordova，我们可以让Web 应用真正变为原生应用，在多平台上运行。我们也称这种应用为Packaged Web 应用。 此外，从Windows 8.1 开始，微软将Host Web App 的概念带到Windows 平台上，同时拓展到更多的平台上。 Host Web App 也是基于HTML5 的Web应用，将HTML5 的Web 应用带入商店，同时HTML5 的代码还是放在原来的后台或云端。充分利用现有代码，同时可以使用Windows 平台上的功能。 稍后我们会详细介绍Host Web App。

这里我们先看看在Windows 10 Web 平台的状态。 从下面这张图展现了Microsoft Edge 上引擎的状态。

从图上我们可以看到， Edge和Chakra 引擎不仅仅使用在Microsoft Edge 浏览器上。针对作为原生应用形式的Web 应用和使用Webview 控件的应用，也同样使用这两个新的引擎。 这样就大大降低了开发者的开发，适配，和调试成本。

新的引擎会支持更多新的HTML5 的标准。下面我们看看那些新标准已经支持或将会被支持。

1.1 Web应用的类型

下面这张图详细介绍了，几种Web App 的类型和他们的特点

1.2 Hosted Web App的开发

从Windows 8.1 开始，我们就支持Hosted Web App 的开发。开发者可以通过Web App Template 工具将自己现有的HTML5 Web 应用升级为Windows 商店应用。 关于Web App Template 的介绍可以参考：

https://wat.codeplex.com/

MVA 课程：https://channel9.msdn.com/Series/MVA-China/WebApp20141218A01

Hosted Web App 可以让开发者仍然保持现有的HTML5 Website 开发流程和工具， 然后将Web 应用通过Windows 应用商店分发。如下图显示：

Hosted Web App 的优点：

1．可以将开发者的设计和开发的Website 体验带入到Windows 应用商店里。

2．充分利用开发者在Web的投资和开发流程。

3．可以让Web 应用直接访问Universal APIs，比如推送通知，相机，联系人，日历等平台功能。

1.2.1 Windows 10 上Hosted Web App 的更新

1.2.1.1 应用架构的变化

如上节所述，在Windows 8.1 我们需要通过Web App Template （WAT） 将Website 转为Windows 商店应用，同时需要通过（WAT）作为桥梁，让Web 应用调用平台上的APIs 接口。 下面是现在在Windows 8.1 和Android 上的Hosted Web App的架构：

Windows 10 上已经可以原生支持Hosted Web App。 不需要Webview呈现Web内容或使用 WAT 作为桥梁，就可以渲染Web 应用、调用Windows APIs、使用一些Native 代码。 下面是Hosted Web App 在Windows 10 上的架构：

1.2.1.2 Cortana 小娜的集成

在Windows 10 上， Hosted Web App 还可以集成和使用Windows 10 上Cortana-小娜的功能。

在你Website 的服务器端可以增加Voice Command Definition （VCD）文件。

在HTML文件里增加一个meta element 标签

在Javascript 文件里处理通过Cortana 小娜 产生的一些任务和活动。

下面的例子里展示如何在Hosted Web App 增加Cortana的支持。

<meta name="msapplication-cortanavcd" content="http://mysite.com/vcd.xml "/>" // Add an event listener for the activation event

if (Windows.UI.WebUI.WebUIApplication.addEventListener(“activated”, function (args)) {

// Handle the Voice Command activation event

var activation = Windows.ApplicationModel.Activation;

if (args.kind === activation.ActivationKind.voiceCommand) {

// Extract the result from the speech recognition from the event arguments

var speechRecognitionResult = args.result;

// Get the recognized command, defined in the VCD file

var command = speechRecognitionResult.rulePath[0];

// Get the full string of text that was spoken

var textSpoken = speechRecognitionResult.text;

}

});

1.2.2 使用Visual Studio 2015 开发Windows 10 上基于Hosted Web App 的通用
应用

下面我们看看如何在VS 2015 里创建和开发一个支持Windows 10 通用应用平台的Hosted Web App。 关于Windows 10 开发工具下载，请参考https://dev.windows.com/zh-CN/ downloads/windows-10-developer-tools

1．在VS 2015 里创建一个使用JavaScript 开发的通用应用

2．删除本地的HTML5 文件。

因为Hosted Web App 的代码是放在云上或者服务器上，所以我们不需要本地的HTML5 文件。 可以直接删除。 保留images 目录是因为商店应用需要应用的logo图标，启动页面图标等。

3．修改appxmanifest

打开packageappxmanifest 文件，将启动页面从default.html 改为你网站的首页。 如下图所示：

这里我们用http://ie.microsoft.com/testdrive/Performance/PenguinMark/ 作为示例。

我们修改StartPage

此外在appxmanifest 我们增加和定义ContentUriRules ，告诉系统哪些内容是包括在Hosted Web App 里的，哪些是纯Web 内容、哪些内容是可以访问系统API的。

如下面所示，我们增加这个ContentUriRules

那么，我们运行起来就会得到下面的结果。

现在我们已经将一个HTML5 页面很方便地转为一个商店应用(Hosted Web App)

关于内容访问策略。我们可以定义不同级别，这样不同的内容针对系统API访问就会有不同的级别。

比如我们不希望广告的内容来访问系统（Runtime）的API，就可以定义成“none”。

1.3 WebView的更新

在Windows 10上，随着Microsoft Edge 的发布，WebView 有了很多新的更新。 主要有三个方面：

1．使用和Microsoft Edge 浏览器一样的Edge 引擎。 可以支持更多HTML5 标准。和在Microsoft Edge浏览器里有一致的体验。

2．丰富的 API集

3．提高了应用性能和相应速度

1.3.1 WebView APIs

现代应用里经常会使用到WebView 去加载Web页面。 Windows10上，应用里的Web体验会更好。WebView 可以方便地和应用通信使用平台的Native APIs，应用可以方便地和WebView 里的内容进行通信。

1.3.1.1 调用C#/C++ object

新的API – AddWebAllowedObject 可以让开发者直接将C#和C++ 成员（Object）直接加入到脚本引擎中：

Windows 8.1 调用C#/C++ Object 的流程：

Windows 10 应用和Web直接的内容可以方便通信。 Windows 10调用C#/C++ Object 的流程：

1.3.1.2 清除缓存数据API （Clear Data API）

Windows 10 的WebView 提供 Clear Data API 可以清除WebView 里AppCache, IndexedDB, Dom Storage and cookies 如下图：

1.3.1.3 打开新窗口消息

新的WebView API 可以让开发者获得打开新窗口的消息。 这样开发者可以让WebView 导向新的页面。

1.3.1.4 JavaScript 直接访问UWP API

和Hosted Web apps 一样，WebView 可以直接从Web 代码里调用 Universal JS APIs。 如果下面的例子所示：

However, with recent survey in top websites partners, we found some web developers who were using Chrome as development and testing tool, seldom used Modern.IE for checking web compatibility. In addition, they thought they needed to do several steps for testing of web compatibility with modern.IE, like opening website, inputting webpage URLs, etc. To help more web developers to use Modern.IE to improve their webpages compatibility, Modern.IE Chrome extension was developed

Please find more detail below:

1. Open Modern.IE Chrome extension in Chrome and select add

2. After installing, you can open Modern.IE extension by clicking IE icon

3. When clicking "Virtual Machines" and "RemoteIE" in toolbar, it'll open VM and remoteIE webpages.

4. In Site Scan, it'll scan current webpage with URL by default when clicking "Scan" button. The result will be showed in new tab

5. For "Compatibility Report" and "Browser Screenshots", they will help to scan current webpages by default.

If you want to scan other website and URL, please input the URL and scan.

Modern.IE Chrome extension will be updated with Modern.IE update.

随着HTML5 游戏快速流行和发展，很多HTML5 游戏开发者并不满足HTML5 游戏在微信和轻应用平台上的成功。迫切希望将游戏变为Native 应用发布的应用商店里。 目前流行的做法是

1. 使用游戏引擎（Cocos2D-X， Unity3D）重新开发游戏
2. 搭建一个极其简单应用框架，使用Webview 加载游戏。

第一种方法，显而易见，虽然充分利用native 应用特点使用了Offline 的功能，但是需要重新开发。又要学习新的引擎和开发语言，痛苦之处，不言而喻。

第二种方法，虽然简单，但是仍然无法逃避H5 非常依赖流量和网络状态的弊端。此外，有些应用商店都会拒绝这类应用的发布。

那么，HTML5 游戏开发者的福音来了。 是时候将你的H5 游戏轻松变为真正的 Windows Universal Apps 发布到Windows 和 Windows Phone 商店了。 这样我们就可以方便地支持Windows PC，平板，手机了。

下面我就揭晓这个过程。

首先，如果你还不了解什么是Windows和Windows Phone 商店应用，请参考

http://msdn.microsoft.com/library/windows/apps/dn726767.aspx

如果你打算发布应用，请注册开发者账户。

然后，请下载开发工具 http://dev.windows.com/zh-cn/develop/downloads 

如果你还不了解什么是Windows Universal App, 请参考 http://dev.windows.com/zh-cn/develop/Building-universal-Windows-apps

请注意：在将你的H5 游戏迁移到Universal App 之前，请一定确保你的游戏在IE11 上没有任何的兼容性问题。 如果你没有IE11，可以使用 http://modern.ie (下载Browser Stack 和其他 free VMs).

那么，我们来举个例子：

我们有一个H5 的游戏  https://aka.ms/platformer 可以下载源码 PlatformerTouch.zip 进行参考。

第一步： 创建一个新的Universal Apps 工程

启动VS2013 创建一个新工程 “Other Languages”->”JavaScript”->”Store Apps”->”Universal Apps” -> “Blank App (Universal Apps)”

你可以看到Solution里有三个工程目录： 两个特定为WP8.1 和 Windows 8.1， 还有一个Shared 工程

默认的时候，在shared 目录里只有一个“default.js” ，在WP8.1 和 Windows 8.1 里有CSS/image/HTML。 有两个default.html 是因为WinJS 版本不同。 在Windows 8.1 WinJS2.0 脚本和CSS 文件将会加载。在Windows phone 8.1 上 WinJS2.1脚本将会加载。 关于WinJS， 可以参考WinJS 开源项目和Windows 商店应用开发介绍

在我们的例子里，不会使用到WinJS 的接口，所以，我们可以使用同样的HTML页面，同样的CSS，同样的JavaScript 代码。 所以我们可以将在”.Windows”和“.Windows Phone” 里的default.html 文件删掉。

第二步： 将代码复制到Shared 目录下

解压缩PlatformTouch 的源码，拷贝所有的文件到”.Shared”项目里。

Ok，万事具备，让我们运行一下试试。确认一下Windows 8.1 已设置成默认启动项目，然后按‘F5’  可以看到，Windows 商店应用已经OK了。完全本地offline 的功能。如果你是触屏的设备，可以直接touch 体验

Ok，既然是Universal App， 让我们看看Windows Phone 上的表现了。

鼠标右键点击 “.WindowsPhone”工程， 选择“Set as StartUp Project”.  选择模拟器或者真机， 这里我们选择模拟器 “Emulator 8.1 WVGA 4 inch 512MB” 。下面我们同样按“F5”

是的，恭喜你，Windows phone 商店应用也OK啦。 而且也是支持offline ，没有loading......的苦恼。完全触屏体验。 不过，我们发现，用户必须自己去转手机，来调整横屏模式。可否在游戏启动的时候，就是横屏模式 ？

当然没问题。这里就发挥了”.WindowsPhone” 工程目录的功能了。 我们的共享逻辑代码可以放在.Shared 目录里，那么我们针对不同Windows 设备的差异化调整，就可以放在不同的项目里了。

那么，我们打开WindowsPhone工程里的appxmanifest

我们可以看到在Application选择里，我们可以调整Rotation。 那么选择成Landscape

是的，你会惊喜地发现，还可以调整很多属性。包括，Logo 图标，Splash Screen (启动时的欢迎页面）等等。 是时候个性化你商店应用了。

调整完了后，我们发现有启动页面和Landscape 效果

通过WinJS， 你还可以增加更多的个性化Native 应用功能。比如Live Tiles （动态磁贴），推送，使用Camera 等。请参考 http://msdn.microsoft.com/library/windows/apps/br229565.aspx/

如何发布你的应用

尝试一下，让你的HTML5 游戏也能轻松变为Windows Universal App， 支持PC， 平板，手机等设备。 通过应用商店，让你的游戏用户更多。 你还可以选择应用内支付，广告，游戏销售等商店功能，帮助你盈利！

随着微信公众号，百度“直达号”，“神经猫”等HTML5 轻应用和游戏的兴起，近一段，HTML5 应用和游戏的快速发展，再次燃起了众多H5开发者的巨大热情。 与此同时，Web 应用在企业级应用市场里，一直占据主导地位。如果拓展HTML5 开发者的技能，在开发Web 应用的同时，将Web 应用拓展到Native 应用，成为开发者最关心的话题。

微软推出Web App Template 工具，可以帮助开发者快速将Web 应用轻松变为Windows Universal App，通过应用商店，可以覆盖更多的用户。

Web App Template 是一个非常便捷的工具。以你的Web 应用为核心，转为全功能的Windows 8.1 和Windows Phone 8.1/Windows Phone 8.0 商店应用。 Web App Template （WAT）通过安装的Visual Studio 模板，配置Config Data（meta data）生成Windows Store App。WAT全面支持Windows Universal App

WAT提供大部分Windows商店应用的功能，比如Back 键，定位功能，Offline 模式支持， Charm 集成等等。

对于用响应式设计的应用，将有非常好的体验。

WAT是个全开源项目。

源码

• 浏览 source code

• Fork 源码

• 克隆 repository git.

git clone https://git01.codeplex.com/wat

安装

1. Visual Studio 2013(Windows Store Express, Pro or Ultimate)
2. 从 https://wat.codeplex.com/ 下载最新版本

可以从下面这个网站上找到详细的介绍和Config 文件的使用 http://wat-docs.azurewebsites.net/

那么下面就让我们做个Demo，看看WAT神奇之处吧。

如何已经安装WAT template，将会在VS2013 新工程里看见WAT 的template

这是一个很典型的Windows Universal App 工程。如果你还不熟悉Universal App 请参考 UAP介绍 和博客 WP8.1 UAP

建完工程后，我们可以看到，左边是WAT的介绍，右边是UAP的工程。 我们重点修改的地方是Shared 目录。

我们这里介绍的是WAT2.2， 我们需要修改config.json，但是WAT 对不同功能提供了非常多的例子。开发过程中，可以参考 config.sample.json。我们可以将config.sample.json 代码复制过来，进行修改。

1. 示例 - 将 http://www.backstreetboys.com/ 变为Universal App

• 修改start_url 为 http://www.backstreetboys.com/

• 把Windows 8.1 设置成默认启动项目，按F5 运行应用。

是的非常简单，我们可以看见基于HTML5 网站的Universal App 已经运行起来了。

• 我们在看看Windows Phone 8.1 应用。 将Windows Phone 8.1 设置成默认启动项目，按F5 运行项目

非常漂亮的响应式非常方便将一个H5 Web 应用变为Universal App

示例2 - http://www.backstreetboys.com/ Universal app 添加导航菜单

我们可以进一步完善，我们用WAT生成的Universal app

在config.sample.json 我们可以找到 "wat_appBar": 和 "wat_navBar": 的配置。 我们下面把sample 中，这两个字段的配置copy 过来，放在 config.json

我将网站里的MENU 里的 News，Event，Media 对应的links 配置放在navigation bar 里

我们运行起来看看，效果。

我们可以看到配置出来的Navigation bar 和 app bar。 我点击News 将进入News 页面

示例3- 配置应用图标和启动页面等

在WAT网站里有个Tools&Tricks 选项。在这里我们使用WAT提供的工具生成商店应用里所需的各种图标。

生成完了以后，就可以方便地配置在 package.appxmanifest 里了。

示例4 - 隐藏页面中的Element

为了更好的体验，我们会发现有些Element 并不适合放在Universal app 商店应用里。 比如下面这些Element。我们可以尝试着隐藏他们。

我们可以使用IE11 里的F12 工具里的Element选择器去查看Element信息。 可以看见这样Element 是在footer里的

我们可以在"wat_styles": 设置HideElement

我们将footer 里的element隐藏掉。可以看到在商店应用里，我们已经看不到网站里footer Element了

示例5 - Offline的功能

HTML5 Web 应用面临着另一个主要问题，就是不支持offline。 WAT将HTML5 Web 应用转为Universal app 后，提供了Offline 功能的支持

"wat_offline": {

"enabled": true,

"message": "It looks like you are offline. Please reconnect to use this application.",

"superCache": {

"enabled": false,

"baseDomainURL": "http://wat-docs.azurewebsites.net/",

"addIndexedDBSupport": true,

"imagesGuardBand": true,

"preCacheURLs": [ ],

"ignoreURLs": [ ]

}

},

在进入offline的时候，应用可以提供

1. 提示信息
2. 提供相应的本地页面
3. 使用SuperCache 功能

superCache 默认是关闭的。 我们还可以配置preCacheURLs cache 更多的页面。

WAT还提供很多方便的功能，因为篇幅关系，下次再一次介绍。 如何使用WAT 请参考

http://wat-docs.azurewebsites.net/GetStarted

在 http://wat-docs.azurewebsites.net/JsonWindows 介绍了如何配置config.json 提供更多的功能。

Modern.IE是微软推出的用来帮助开发者创建现代网站的基本开发工具。作为Web攻城师，最头疼的问题莫过于浏览器兼容性测试，各种类型浏览器，各种版本的浏览器，还有各种头疼的前缀等等。Modern.IE希望做到可以帮助咱们攻城师们把更多的时间能花在工程上，而不是在解决兼容性问题上。Modern.IE是一个非常有用的工具，貌似你已经迫不及待了，打开它吧：https://www.modern.ie。

网站分为几大部分：

1. 网站扫描工具Scanner

Scanner用来扫描发现常见的兼容性问题。 只要你在输入框中输入一个网页的URL，Scanner就会帮你生成一个报告。分为四类16项，包括：

A. 兼容旧版IE；

这个主要是为了解决兼容旧版IE的一些常见问题。

Ø 兼容模式。我们建议网站在标准模式下渲染，而不是在兼容下渲染。

Ø 网页的框架和库。Scanner会扫描网站是否使用了过时的框架或者是库，使用过时的框架和库可能会导致比较多的兼容性问题。

Ø Web标准Docmode。我们建议使用一个标准的HTML5 DocType（<!DOCTYPE html>）来告诉浏览器用标准模式渲染网页，这能使网站能够在Modern IE或者其他Modern浏览器中里大大提高页面的性能体验。

B. 浏览器兼容性问题；

这个主要是帮助开发者做兼容性测试，让网页可以在五花八门的设备和浏览器中更好地展现。

Ø CSS前缀。我们有很多属性仅在加了前缀才能在特定的浏览器中支持，只有标准的属性才无需添加浏览器前缀。Scanner会扫描查看是不是有未添加浏览器前缀的属性。

Ø 浏览插件。我们建议不带任何插件，以避免在其他浏览器中不支持。

Ø 响应式网页设计。我们现在设备越来越多，分辨率也越来越多，我们需要适配各种设备，在各种设备上网站都能有很好的体验，我们建议采用响应式的网页设计。我们是通过扫描媒体查询的最大和最小属性来识别的，媒体查询是当今响应式网页设计的指标之一，我们知道这样做扫描并不是特别完善，我们会继续改进。

Ø 浏览器检测。我们推荐使用功能检测而不是采用UA检测。这种做法首先是要判断浏览器或者设备是否支持某一特定特征，然后根据这个来选择最佳的体验去渲染。 你可能要通过框架执行特征检测来替代浏览器检测，例如通过： Modernizr 或者通过特征检测代码。详情参见：浏览器功能检测。

Ø 优化网页上的图片。越来越多的用户使用手机或者其他移动设备浏览网页，所以未优化或者未压缩的图片将大幅度地影响用户下载你网页的速度，极大影响用户体验和提高了跳出率。如果需要优化图片，可以使用https://kraken.io/ 来进行。

Ø HTML5输入类型。支持新HTML5输入类型的浏览器可以提供一个键盘布局，使之更好地配合那一区域（比如一封email）或者显示一个专用的控制（比如日期），这可以改善用户的体验。这可以帮助你的用户在填充时避免错误，以致加快进度。

Ø 预渲染+预提取。通过使用这些技术可以使你的用户能够体验更快的网站浏览，否则的话将会影响用户体验，提高网站的跳出率。

Ø 压缩内容。需要启用压缩机制来传输，这对于减少加载时间很重要，能让用户更快地加载你的网站，同样是基于用户体验的考虑。可以考虑使用gzip压缩或其他类似功能。

C. 利用Windows 8中的新特性。

这主要是建议攻城师童鞋们可以利用最新的Windows 8的新特性，比如触控浏览和“开始”屏幕网站磁贴。开发者可利用Windows的这些新功能，为用户提供更加个性化的浏览体验。

Ø 启用触控模式。现在已经不是PC的时代了，现在是移动的时代，是触控的时代。如果你的网站不能在触控模式下有着很好的体验，那么你将在未来的时间里流失大量的用户。对于一些网站，一个好的触摸体验仅仅需要注意一些最基本的东西，比如使用适当大小的按钮，避免鼠标悬停菜单。 你可以阅读我们如何确保触控用户有效地使用你网站的小技巧。如果为了更加丰富的触摸体验、给触控用户更加优秀的体验的话，可以启动笔势和专用的平移／缩放行为。更加可以考虑使用指针事件来支持更先进的互动，比如触摸、鼠标和笔。最近，微软已经向W3C提交了指针事件规格，这将使得网站的互动模式向互操作交互式触控的未来发展。

Ø Flip Ahead浏览。我们建议"prev"和 "next"链接关系。这两个属性可以帮助搜索引擎和浏览器更好地理解你网站内容的层次结构，而且可以启用一些新功能来改善你访问者的浏览体验。

<link rel="next" href="/next"/>

<link rel="prev" href="/prev"/>

Ø IE11 Tiles+通知。我们建议攻城师们在做web开发的时候创建一个Windows 8的开始屏幕上的Tile。一个开始屏幕Tile可以让你的网站标志与您的用户更加接近，用户可以将你的网站"钉"在Windows Store apps旁边，并可以直接打开。添加只需要下面两行代码而已：

<meta name="msapplication-TileColor" content="#123456"/>

<meta name="msapplication-square150x150logo" content="square.png"/>

如果需要创建更多的Tile的样式，参见这里。

D. 辅助功能的改进。

这一项主要是让网站可供具有各种不同的浏览习惯和身体缺陷的用户访问。

Ø 图片Alt属性。我们建议给img标记添加ALT属性（就是给图片加上简短的一个描述），仅需要几秒钟而已。不仅仅是因为这样能让搜索引擎能通过更多的方式搜索到你的网站，而且因为网络是开放给任何人的，任何人都应该能够享受它。比如有些残障人士需要使用屏幕阅读软件来阅读你的网站，那么只有你添加了ALT属性，他才能阅读你的图片。

Ø Aria属性。如果希望使网站可供具有各种不同的浏览习惯和身体缺陷的用户访问，我们建议添加aria-*属性。WAI-ARIA (Accessible Rich Internet Applications)这种方法提供了一些方式来定义你的动态Web内容和应用程序，以使具有残障人士能够识别并且成功与之交互。这是通过定义文档或应用程序结构的role，或通过定义部件角色、关系、状态或属性的aria-*属性来完成的。大量aria-*属性可使您的内容更容易导航和理解。 aria-labelledby, aria-level, aria-describedby, 和 aria-orientation等属性都使您的内容更容易理解。您可在ARIA声明和属性页上查阅更多相关信息。

2. RemoteIE

RemoteIE使用的是微软Azure的RemoteApp服务，使得攻城师童鞋们不再需要可以在任何设备任何地方测试你的网站是否在Windows 10最新版本的IE上是否能正常工作包括Windows、Mac OSX、iOS以及 Android。

非常简单的四个步骤：

A. 注册RemoteApp服务。https://remote.modern.ie/login

正常情况下，你很快就会收到微软的一封邮件，说你可以使用Remote IE了！

B. 下载安装RemoteApp

在你准备测试的设备上安装RemoteApp客户端，目前支持Windows、Mac OSX、iOS以及 Android。

Ø Microsoft Remote Desktop for Mac

Ø Microsoft Remote Desktop for iPhone and iPad

Ø Microsoft Remote Desktop for Android

Ø Microsoft Remote Desktop for Windows Phone 8.1

Ø Azure RemoteApp for Windows x86

Ø Azure RemoteApp for Windows x64

Ø Azure RemoteApp for Windows RT

C. 打开RemoteApp客户端并登录

打开RemoteApp，需要登陆微软的live id（啊，什么是live id），如果没有，到这里申请哈。记得这里登录的账号和你注册RemoteIE的账号需要一样的。

D. 从RemoteApp打开IE

如果你在应用列表里头没有看到IE Technical Preview，不要着急，再等一段时间尝试点击“App invitations”的按钮哈。当你看到下面的这个图的时候，你就大功告成了！

E. 输入网址测试网站

输入你的网址开始测试吧！

3. IE虚拟测试机

可以在你的开发环境上的运行IE的虚拟机来测试各版本的IE，无论你的机器是OS X，Linux还是Windows！

到这里下载吧：https://www.modern.ie/zh-cn/virtualization-tools

除此以外微软还和BrowserStack合作，通过BrowserStack，攻城师们无需下载任何的东西，直接就在BrowserStack的成百上千台虚拟机上测试你的网站，只要你有浏览器，能上网！

4. 兼容性检查工具

这是用来是一个基于JavaScript的测试工具，运行它会分析你的网站，扫描modern IE不再支持的代码。 兼容性检查工具监视会引起问题的交互模式并自动报告这些问题。这允许你迅速识别问题，不用去熟记一大批文档。我们是使用Sauce Labs的服务来做这个测试的，Sauce Labs会帮助我们创建一台虚拟机来运行兼容性检查，该虚拟机实例会被删除，没有人将可以访问它。如果想继续浏览，请注册一个免费账号 http://saucelabs.com/signup 即可访问100+的浏览器/设备/操作系统平台。

5. 浏览器截屏

BrowserStac的自动化截屏能够确保你的网站在各种设备和浏览器上正常浏览。利用BrowserStack自动化截屏，你将会得到即时视觉反馈。在modern.IE这，我们将向您展示你的网站在常见的9个浏览器和各设备上的截屏。你甚至可以下载这些截屏图片。想要更多的选择,请访问 http://browserstack.com/screenshots。

Modern.IE是一个非常好用的工具，快点试试吧https://www.modern.ie。

北京时间12号晚23点开始的Connect()活动上，微软发布了一系列激动人心的消息！

• .NET开源了！以后.NET将可在Linux和Mac OS平台上运行！
• VS免费了！！如果你是学生，个人开发者，初创企业，那么你将可以使用Visual Studio Community 2013！免费！
• Visual Studio 2015还自带了Android模拟器！可以告别那个渣爆了的原生Android模拟器了！
• Visual Studio的 Apache Cordova 插件CTP3.0发布！现在可以直接在VS里面debug部署到iOS模拟器或者真机上的应用程序！

链接：

1. Visual Studio 2013 Update 4(最新版): http://go.microsoft.com/fwlink/?linkid=390465

2. Visual Studio 2015 Preview : http://go.microsoft.com/fwlink/?linkid=517106

3. Visual Studio Community 2013 : http://go.microsoft.com/fwlink/?LinkId=518340

4. 各种开发者的免费福利： http://go.microsoft.com/fwlink/?LinkId=518339

5. 下载Apache Cordova CTP 3.0: http://www.microsoft.com/en-us/download/details.aspx?id=42675

咱们来瞅瞅这个Cordova CTP 3.0到底更新哪些东西：

这是CTP3.0的新的特性：

1. 更新了Ripple模拟器——实时更新Ripple!不用再重新编译就可以看到效果！

2. 可以在Visual Studio调试部署到iOS模拟器和真机上的iOS程序了！同时实时看到修改效果！（这个目前）

3. 提高remote iOS build agent的安全性以及让它更容易配置

4. 改善了Plugin的管理体验，更加方便地从Git或者自己的文件系统导入自定义的Plugin

5. config.xml界面重新设计，更加人性化

6. 支持Apache Cordova CLI 4.0.0，支持Windows Universal App！直接可以生成Windows 8.1和Windows Phone 8.1的应用！

要使用CTP 3.0，必须是2013 update 4或者2015版本：）

如果装过CTP 2.0的童鞋，在装CTP 3.0的时候可能会遇到下面的问题：

需要先卸载CTP 2.0，然后再安装CTP 3.0哈。参考

先去控制面板à程序à卸载程序，找到CTP2，卸载。

然后它会告诉你，成功卸载了，其实它是骗你的，完全没有好么。。。

用管理员模式运行cmd，输入：

"%ProgramData%\Package Cache\{dea88246-f74a-4171-ad6c-d9c978bf2973}\vs2013mda_0.1.exe" /uninstall /passive /force /burn.ignoredependencies={53d408db-eb91-43fb-9d8f-167681c19763};vsupdate_KB2829760

然后CTP的安装程序会跳出来，其实它在卸载，不要以为它在安装，时间略久一点，耐心等到进度条结束哟：）

然后就可以开始安装CTP 3.0了！

里面node, ant, android等东西如果已经安装过，就不要选了。

其实你也可以直接下载2015 preview版本，直接就内含了CTP 3.0。不用这么麻烦。

更新后的Ripple模拟器

添加一个工程后，选择Ripple，运行：

在Visual Studio可以看到Debug窗口已经打开：

定位到标题位置，准备修改：

修改完毕，焦点移到其他位置：

可以看到Ripple里头的标题栏已经改变！实时调试！不用重新编译！

在Visual Studio调试iOS程序：

调试iOS程序可以在Ripple模拟器里头，也可以在MAC的Simulator里面，或者直接跑在真机上。

我现在配置是MAC上跑了Parallels Desktop 10，推荐，不卡，非常好用。然后PD10上面我再跑了windows，windows 10上安装了visual studio。

你也可以不用这样，但是需要mac和你的pc是在一个内网里头。

现在MAC上安装vs-mda-remote:

然后启动vs-mda-remote：

可以看到有个PIN码，记下来。

回到windows里面的Visual Studio，在toolsàOptions里面，找到tools for Apache Cordova，然后配置好，mac的ip，端口以及PIN码。现在CTP 3.0多了PIN，保证安全性。

然后就可以开始调试了，选择Simulator，iphone 5或者iphone 6什么的：

同样在Visual Studio里面可以看到Debug的界面(目前只有VS 2015支持)

remote iOS build agent：

就刚才说的，添加了PIN码，保证安全性：

导入自定义的Plugin：

轻松导入各种Plugin：

支持Cordova CLI 4.0：

现在可以直接运行Windows Universal Apps的项目了，更多Cordova CLI 4.0的功能参见。

最后

赶紧动手开始吧~~