什么是渐进增强

by Praveen Dubey

通过Praveen Dubey

什么是渐进增强，为何如此重要 (What is Progressive Enhancement, and why it matters)

Progressive Enhancement (PE) is a powerful methodology for developing web applications.

渐进增强(PE)是用于开发Web应用程序的强大方法。

Here is a formal definition:

这是一个正式定义：

Progressive enhancement is a strategy for web design that emphasizes core web page content first. This strategy then progressively adds more nuanced and technically rigorous layers of presentation and features on top of the content as the end-user’s browser/Internet connection allow. — Wikipedia

渐进增强是Web设计的一种策略，它首先强调核心网页内容。 然后，此策略会在最终用户的浏览器/ Internet连接允许的情况下，在内容之上逐步添加更细致和技术严格的表示和功能层。 —维基百科

The proposed benefits of this strategy are that it allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.

此策略的建议优点是，它允许每个人使用任何浏览器或Internet连接访问网页的基本内容和功能，同时还为使用更高级的浏览器软件或更大带宽的用户提供网页的增强版本。

And in a nutshell…

简而言之...

…it gives us basic user experience and cross compatibility across browsers to ensure stability.

…它为我们提供了基本的用户体验以及跨浏览器的交叉兼容性，以确保稳定性。

let PE = "Progressive Enhancement";

The PE strategy consists of the following core principles:

PE策略包括以下核心原则 ：

• Basic content should be accessible to all web browsers

  基本内容应可供所有Web浏览器访问

• Basic functionality should be accessible to all web browsers

  所有网络浏览器都应可以访问基本功能

• Sparse, semantic markup contains all content
  稀疏，语义标记包含所有内容
• Enhanced layout is provided by externally linked CSS
  外部链接CSS提供了增强的布局
• Enhanced behavior is provided by unobtrusive, externally linked JavaScript
  简洁的外部链接JavaScript提供了增强的行为
• End-user web browser preferences are respected
  尊重最终用户的Web浏览器首选项

So when you build your next website with next-generation JavaScript / CSS frameworks which work only in the most favorable environment for your code and it breaks when it does not get it…. this is not a Progressive Enhancement strategy.

因此，当您使用下一代JavaScript / CSS框架构建下一个网站时，该框架仅在最适合您代码的环境中工作 ，而在无法获取代码的情况下便会崩溃……。 这不是渐进增强策略。

Instead, have a goal where development should start with providing basic features, stability across all browsers and devices, and a seamless experience to the user before introducing complexity.

取而代之的是，开发应该从提供基本功能，跨所有浏览器和设备的稳定性以及在引入复杂性之前为用户提供无缝体验开始。

PE实例 (PE Examples)

Let’s look at some of the examples which show how the PE strategy works.

让我们看一些显示PE策略如何工作的示例。

网络字体 (Web Fonts)

Web fonts are amazing and beautiful, but when the user is on a slow network with a heavy site, they surely degrades the user experience. Even in this situation, System font should be used as the fallback to render content and can be changed to a web font as and when they are loaded.

Web字体令人叹为观止，而且美观，但是当用户使用慢速网络访问繁重站点时，它们肯定会降低用户体验。 即使在这种情况下，也应使用系统字体作为后退来呈现内容，并且可以在加载时将其更改为Web字体。

Showing content is better than waiting for web fonts — or getting nothing.

显示内容比等待Web字体好-什么也没做。

初始HTML (Initial HTML)

Sites are loaded with script. It could be Angular, React or some other framework. When these scripts are responsible for initial content display, your user will be seeing the blank page on the browser or device when something went wrong with scripts or when the user is on the slow network.

网站已加载脚本。 它可以是Angular，React或其他框架。 当这些脚本负责初始内容显示时，如果脚本出现问题或用户处在缓慢的网络中，则用户将在浏览器或设备上看到空白页。

It’s always good to consider loading initial content from HTML to provide a better user experience, rather than completely relying on scripts which are yet to load.

考虑从HTML加载初始内容以提供更好的用户体验，而不是完全依赖尚未加载的脚本，始终是一件好事。

功能检查 (Feature Check)

Good sites always does this part. When using a feature which is not supported based on different browsers or devices, always make sure to check if feature is available in the browser before using it in your JavaScript.

好的网站总是在做这部分。 当使用不同的浏览器或设备不支持的功能时，请始终确保在JavaScript中使用该功能之前，先检查该浏览器是否可用。

Modernizr is one popular library for feature detection which can help you.

Modernizr是一个流行的功能检测库，可以为您提供帮助。

You can load additional scripts to load fallback support only when it’s not available in the browser or device. This way you can avoid loading extra scripts when they are not required.

仅当浏览器或设备中不提供后备支持时，您才能加载其他脚本以加载后备支持。 这样，您可以避免在不需要额外脚本时加载它们。

现在，为什么要使用PE？ (Now, Why PE ?)

Important reasons to focus on the PE strategy before building your next application:

在构建下一个应用程序之前，专注于PE策略的重要原因：

强大的基础 (Strong Foundation)

PE focuses on the start of your project using only the very basic web technologies before introducing some of the very complex features. So in all cases, you have the foundation to back your complex features to make sure they work.

在介绍一些非常复杂的功能之前，PE专注于仅使用最基本的Web技术启动项目。 因此，在所有情况下，您都具有支持复杂功能以确保它们起作用的基础。

Once the team is confident that the core-experience of the site is stable, and will work without heavily relying on network speed, browser, and device, then you can start introducing layers of more complex features or sci-fi stuff.

一旦团队确信站点的核心体验是稳定的，并且可以在不严重依赖网络速度，浏览器和设备的情况下工作，那么您就可以开始引入更复杂的功能或科幻内容了。

稳定性 (Stability)

Quality Team : “ Search Icon is not working in Safari for Offers page ”

Quality Team ：“搜索图标在Safari的“优惠”页面中不起作用”

Dev Team : “ Well it works on my machine, clear cache, reload or die ”

Dev Team ：“它可以在我的机器上正常工作，清除缓存，重新加载或消失”

Quality Team (from heaven) : “ Still does not work, you are checking on Chrome, it’s breaking on Safari ”

Quality Team (来自天堂)：“仍然无法正常工作，您正在使用Chrome进行检查，但在Safari上却无法使用”

Dev Team : “ When did we start supporting Safari ? wait…. patching patching………”

Dev Team ：“我们何时开始支持Safari？ 等待…。 修补…………”

if(getBrowsers() == 'safari') {

Patch.magicHelpers.searchIconMagic()

}

Patch.magicHelpers = {

searchIconMagic: function() {

// Can't share magic, doing something

}};

“after 1 hour…… check now ”.

“一小时后……现在检查”。

Quality Team: “ Working fine for Chrome and Safari but broke for Mozilla now…Ahhhhh !!!!!”

Quality Team ：“在Chrome和Safari上可以正常工作，但现在在Mozilla上可以使用了……嗯！！！！”

Well, we all have been in this situation at least once.

好吧，我们所有人都至少遇到过一次这种情况。

Cost for Stability and Maintenance of a project also depends on how the project starts. Setting up a project with frameworks and patching it will not work for the long term.

项目的稳定性和维护成本还取决于项目的开始方式。 从长远来看，使用框架设置项目并对其进行修补是行不通的。

The PE strategy helps you build a strong foundation for your project where your HTML, CSS, and JS are aligned and aim to provide fallbacks. They try to make sure you’re not heavily relying only on browser specific features.

PE策略可帮助您为HTML，CSS和JS保持一致并旨在提供后备项目的项目打下坚实的基础。 他们试图确保您不会严重依赖浏览器特定的功能。

SEO和可访问性 (SEO and Accessibility)

Everyone wants to get their application listed in the first page of the search engine, but it takes consistent work and planning to build such amazing applications. The strong foundation for your project makes sure your application is focusing on the content-first approach.

每个人都希望将他们的应用程序列在搜索引擎的第一页中，但是要构建如此出色的应用程序，需要进行一致的工作和计划 。 项目的坚实基础确保您的应用程序专注于内容优先的方法。

Pages built with the PE strategy make sure basic content is always accessible for the search engine spider and is ready to be indexed. Avoid any dynamic content rendering that may hinder the spider crawling your content.

使用PE策略构建的页面可确保搜索引擎蜘蛛始终可以访问基本内容 ，并可以对其进行索引。 避免任何可能阻碍蜘蛛爬网内容的动态内容呈现。

Progressive Web Apps (PWA) are made to work for all users, regardless of their browser choice, because they’re built with progressive enhancement as a core principle.

渐进式Web应用 (PWA)适用于所有用户，无论他们使用何种浏览器，都是因为它们以渐进式增强为核心原理而构建。

总结思想 (Closing thoughts)

The PE strategy focuses on a strong foundation for your project. This strong foundation helps you in your vision for your product for a long term plan.

PE策略专注于为您的项目打下坚实的基础。 强大的基础可以帮助您制定长期计划的产品愿景。

It’s easy to hook into a new JavaScript / CSS framework for your new project and start coding, but that may lead to Graceful Degradation. You will keep on patching your code with fallbacks for browsers or devices which do not support frameworks.

可以很容易地为您的新项目挂接到新JavaScript / CSS框架并开始编码，但这可能会导致Graceful Degradation。 对于不支持框架的浏览器或设备，您将继续使用备用代码来修补代码。

Although the PE strategy takes a bit more planning in the initial stages, it makes sure your user is able to experience at least basic functionality in the worst case also. PE is not workable in situations that rely heavily on JavaScript to achieve certain user interface presentations or behavior, but for a long-term project, it’s worth considering certain aspects of PE strategy.

尽管PE策略在初始阶段需要进行更多规划，但它可以确保您的用户在最坏的情况下也能够至少体验基本功能。 PE在严重依赖JavaScript来实现某些用户界面表示或行为的情况下不可行，但是对于一个长期项目，值得考虑PE策略的某些方面。

Hopes this gave an overview of the Progressive Enhancement Strategy.

希望这能概述渐进增强策略。

Feel free to drop a comment below.

随时在下面发表评论。

Thank you for reading this article! If you have any questions, send me an email (praveend806 [at] gmail [dot] com).

感谢您阅读本文！ 如果您有任何疑问，请给我发送电子邮件(praveend806 [at] gmail [dot] com)。

Resources which talk about more about PE and case studies:

有关PE和案例研究的资源更多：

Designing with Progressive Enhancement: Building the Web that Works for EveryoneProgressive enhancement is an approach to web development that aims to deliver the best possible experience to the…www.oreilly.comUnboring.net | Workflow: Applying Progressive Enhancement on a WebVR projectHow I made an interactive content to be embedded on weather.comunboring.net

渐进式增强功能设计：构建适合所有人的Web 渐进式增强功能是一种Web开发方法，旨在向……提供最佳体验 。www.oreilly.com Unboring.net | 工作流程：在WebVR项目上应用渐进增强功能 如何将交互式内容嵌入到weather.com上 unboring.net

翻译自: https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/

什么是渐进增强