网站兼容性：无插件的浏览体验

无插件的浏览体验

欢迎大家来到我们 Modern Web ● 提升网站兼容性从这里开始 系列的无插件浏览体验的专题，随着移动互联网的发展，越来越多的浏览活动是发生在移动设备上的，而这些移动设备上的浏览器都不支持插件。同时，越来越多的现代浏览器宣布不支持插件技术，比如Microsoft Edge以及Google Chrome等等。向这些不使用插件浏览的用户提供优秀的网站体验，将是一项非常重要的工作。

利用HTML5，现代的浏览器和网站即使不用插件，也能提供优秀的消费者体验。比如，Microsoft Edge支持全新的无插件音频与视频流式处理技术，该技术基于最新的 Web 标准，并且依托于最新的操作系统媒体和电源管理功能而构建。Microsoft Edge中的媒体功能与 Windows 10 相互结合，实现了“专业品质的视频”，即无论对于个人视频还是优质的电视节目和电影，都具有同样出色表现的 Web 视频。如要体验，请在Microsoft Edge中打开：http://ie.microsoft.com/testdrive/html5/eme/。

                                                                                                    

1 使用dev.modern.ie网站检测:

点击链接https://dev.windows.com/zh-cn/microsoft-edge/tools/staticscan/在输入框输入网站URL，点击查询即可检测网站问题：

 

如果出现“过时的插件和功能”问题，如下图标记处（如果错误应该为红色）所示：

 

 

2 常见插件及对应替换：

 

 “插件”泛指使用浏览器的底层接口运行本地客户端代码的浏览器扩展。例如，在IE 里对应的就是ActiveX 控件和浏览器辅助对象（Browser Helper Object）。网站使用各种各样的插件，ActiveX以及Flash就是最常见的插件之一。而且大多数的现代浏览器都已经不支持插件技术，这就表示你的网站采用插件技术的话将不能在大多数的现代浏览器中得到很好的体验。

表A-8概述了插件最常见的用法、基于传统插件的技术示例，以及 HTML5中基于标准的等效技术。

 

功能	基于插件的技术示例	基于标准的等效技术	详细信息
视频和音频	Flash、Apple QuickTime、Silverlight	HTML5 视频 和音频	视频、 音频
图形	Flash、Apple QuickTime、Silverlight、Java 小程序	HTML5 Canvas 、可缩放的向量图形 (SVG)、级联样式表级别 3 (CSS3) 过渡 和动画、CSS 转换、WebGL	Canvas、SVG、过渡、动画、转换、WebGL
脱机存储	Flash、Java 小程序和 Google Gears	Web 存储、文件 API、IndexedDB 和应用程序缓存 API	Web 存储、文件 API、IndexedDB 和应用程序缓存 API
网络通信、资源共享和文件上载	Flash 和 Java 小程序	HTML5 Web 消息传递和跨源资源共享 (CORS)	通道消息传递、XMLHttpRequest

表 A‑8 常见的插件

从本质上，基于标准的无插件网站带来以下好处：

用户能够有更好的浏览体验、更长的移动设备电池寿命，以及增强的安全性、隐私和可靠性；而开发人员能够轻松使得在不同的浏览器和设备上都有一致的用户体验、轻松完成前向的兼容性以及使得能够更方便地进行站点维护。

强烈建议先测试基于标准的功能是否可用，然后只在必要的时候用插件进行降级，用户体验会更好。例如，表A-9是使用XMLHttpRequest 进行功能检测的错误示范和正确示范：

 

错误	//错误示范，极不推荐 var xhr = window.ActiveXObject ? new    ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
正确	//正确示范，推荐做法 if (window.XMLHttpRequest) {     // 如果是IE7+, Gecko, WebKit：使用本地对象     var xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) {     // ...如果不是，尝试ActiveX 控件     var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else {     // 没有XMLHTTPRequest 机制可用。 }

表 A‑9 使用XMLHttpRequest 进行功能检测的错误示范和正确示范

这里强调一点，优雅地降级对于用户来说非常重要，这能够使得用户在非现代浏览器上也能够获得同样优秀的用户体验。有些网站只根据User Agent 字符串或其他特定浏览器的属性提供降级，然而这种短期解决方案无法适应浏览器和用户浏览方式的变化。强烈建议是通过功能检测的方式，检测到某项标准功能不可用之后，再进行降级，而不是简单通过User Agent来判断。

HTML5 的能力使得用户可以在更多设备上体验到优秀的Web网站。对于Web 开发人员来说，这意味着有更多机会可以让用户访问他们的网站，使得他们更有动力让网站在没有插件的情况下也有出色的表现。

 

Appendix：

下面的一些网站链接介绍如何使用改善网站的兼容性供大家参考：

§Web App Platform:  http://dev.windows.com  

§Microsoft Edge开发者博客:  http://blogs.windows.com/msedgedev/   

§F12开发者工具使用:  http://aka.ms/mva-f12 

§微软技术培训： http://aka.ms/feature-detection   

同时，我们提供了微信版本的dev.modern.ie工具，扫描下方二维码，轻松测试网站。

网站兼容性测试（微信版）

http://modernie.china

cloudsites.cn/