Nowadays the web has become more important and more powerful than ever. One of the important aspects we try to achieve when building a website is providing a good user experience.

如今，网络比以往任何时候都变得更加重要和强大。 建立网站时，我们试图实现的重要方面之一就是提供良好的用户体验。

Thankfully, today we can build web apps with native browser features that have been added over the years by the main browser vendors. Browsers have improved significantly that some features we used to code with JavaScript or import with third-party libraries are no more needed because they become native!

值得庆幸的是，今天，我们可以使用本机浏览器功能构建Web应用程序，这些功能是主要浏览器供应商多年来添加的。 浏览器已得到显着改进，因为不再需要使用JavaScript进行编码或使用第三方库导入的某些功能，因为它们已成为本地功能！

There are a lot of powerful JS APIs, but today I’m bringing to light my 4 favorite APIs to enhance the user experience since he or she is your client and got to be happy and satisfied with visiting your website.

有很多强大的JS API，但是今天我要介绍我最喜欢的4种API，以增强用户体验，因为他或她是您的客户，并且对访问您的网站感到高兴和满意。

Ready? let’s go (╯°□°)╯

准备？ 我们去吧(╯°□°)╯

网络API (Network API)

One of the painful moments is when you have a terrible network connection and can’t access properly to the website you want, right? You probably end up giving up the website and getting annoyed with the network connection. It will be so cool if we can still browse the content of the website in a “lighter version”. The good thing is that there is already an API that can give you all the information you need about the user network quality without coding it yourself. Thus, display a lighter version of your website in need.

痛苦的时刻之一是，您的网络连接糟糕，无法正确访问所需的网站，对吗？ 您可能最终放弃了该网站，并且对网络连接感到恼火。 如果我们仍然能够以“精简版本”浏览网站内容，那就太酷了。 好消息是，已经有了一个API，可以为您提供有关用户网络质量的所有所需信息，而无需您自己编写。 因此，显示需要的网站的较浅版本。

• Example of how it works:

  工作方式示例：

页面可见度 (Page Visibility)

When I discovered this API, I thought about a lot of funny things we can do with it, to make a website alive and smarter. This API power is that it tells you when the user is on your website. It means when the current tab that he’s browsing is your website. Fantastic, right?

当我发现此API时，我想到了许多可以使用它进行有趣的操作，以使网站更加生动有趣。 API的强大功能在于它可以告诉您用户何时在您的网站上。 这意味着当他正在浏览的当前标签页是您的网站时。 太好了吧？

We can imagine a lot of things such as an animation that gets dancing or looking to the user when he’s on the website, and when not, sleeping? or showing a message telling the user that your website is smart and knows that you came back to navigate on it… etc. There is a lot of possibilities to make your website alife and smart. Thus, improving the user experience.

我们可以想象很多事情，例如动画，当用户在网站上时，它会跳舞或看着用户，而当用户不在时，它会睡觉吗？ 或显示一条消息，告诉用户您的网站很聪明，并且知道您回来浏览了该网站……等等。有很多可能性可以使您的网站更加生动有趣。 因此，改善了用户体验。

• Example of how it works:

  工作方式示例：

通知API (Notification API)

Notification is nowadays so important in a web application. To confirm something, display a form error, display contact information in case of a problem ..etc. Anyway, it’s your way of communicating with the user.

如今，在Web应用程序中，通知是如此重要。 要确认某件事，显示格式错误，出现问题时显示联系信息等。 无论如何，这是您与用户交流的方式。

The good news is that there is a native and built-in notification API for you to use without extra code!

好消息是，有一个本机内置的通知API，供您使用而无需额外的代码！

• Example of how it works:

  工作方式示例：

对话API (Dialog API)

Dialogues have become so common in modern web apps. But, when it comes to building them manually, you know all the CSS stuff and JS behind to make it responsive and charming to the user. Well, HTML 5.2 spec has introduced an official dialog element currently supported in modern browsers.

对话在现代Web应用程序中变得如此普遍。 但是，在手动构建它们时，您知道所有CSS内容和JS背后的内容，以使其对用户具有响应性和吸引力。 好吧，HTML 5.2规范引入了当前在现代浏览器中支持的官方对话框元素。

• Example of how it works:

  工作方式示例：

Dear readers and friends, hope you enjoyed reading this article. Follow me on Medium and Linkedin for more interesting articles.

尊敬的读者和朋友，希望您喜欢阅读本文。 跟随我在 Medium 和 Linkedin上 获得更多有趣的文章。

See you soon (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

很快见(ﾉ◕ヮ◕)ﾉ *：･ ﾟ✧

FAM

FAM

翻译自: https://medium.com/swlh/enhance-your-user-experience-with-the-modern-browser-javascript-apis-7ab70464e695