用户体验改善案例

A few months ago I watched a great talk from the Chrome Dev Summit about performance in slow devices.

几个月前，我观看了Chrome开发者峰会上有关慢速设备性能的精彩演讲。

It blew my mind all the work done by Facebook in identifying devices to create a better user experience. Fast-forward to now, and I've decided to study a bit more about the topic and see what I can do at Thinkific (the company I work for).

这让我震惊，Facebook在识别设备以创建更好的用户体验方面所做的所有工作。 快进到现在，我决定对这个主题进行更多研究，看看我在Thinkific (我工作的公司)可以做什么。

用户代理 (User agents)

User agents are well-known by developers. We use them to detect bots, redirect users to a specific version of our website or append CSS classes on our page so we can create different experiences.

用户代理是开发人员众所周知的。 我们使用它们来检测漫游器，将用户重定向到我们网站的特定版本或在页面上附加CSS类，以便我们可以创建不同的体验。

At Thinkific we already use the browser Ruby gem to parse the user-agent and get relevant info (bot detection for instance). So, I decided to persist the main info in a visitor_device table – here is the schema:

在Thinkific，我们已经使用浏览器Ruby gem来解析用户代理并获取相关信息(例如，机器人检测)。 因此，我决定将主要信息保留在visitor_device表中–这是模式：

You probably noticed that a few things there are not available in the UA string. Time for new JavaScript APIs:

您可能已经注意到UA字符串中没有一些可用的东西。 新JavaScript API的时间：

使用JavaScript获取硬件信息 (Getting hardware info using JavaScript)

As covered in the Chrome Dev Summit video, we can use JS to get this info.

如Chrome Dev Summit视频中所述，我们可以使用JS来获取此信息。

记忆 (Memory)

navigator.deviceMemory will return a floating-point number. There are things to consider here:

navigator.deviceMemory将返回一个浮点数。 这里有一些事情要考虑：

• It only works over HTTPS它只能在HTTPS上工作
• Support is quite limited (Chrome only basically)支持非常有限(基本上仅适用于Chrome)

More about it:

关于它的更多信息：

• Spec from W3C

  W3C的规格

• MDN Docs

  MDN文件

• Can I use deviceMemory

  我可以使用deviceMemory吗

处理器 (Processors)

navigator.hardwareConcurrency will return the number of logical cores of the user’s CPU. Support for this is decent.

navigator.hardwareConcurrency将返回用户CPU的逻辑核心数。 对此的支持是体面的 。

使用JavaScript检测连接信息 (Detecting connection info using JavaScript)

navigator.connection is a new API containing information about the system’s connection, such as the current bandwidth of the user’s device or whether the connection is metered. The support is quite limited (Chrome only basically) but things are promising.

navigator.connection是一个新的API，其中包含有关系统连接的信息，例如用户设备的当前带宽或是否对连接进行计量。 支持是非常有限的(基本上仅是Chrome)，但是前景很好。

More about it:

关于它的更多信息：

• Chrome example

  Chrome实例

• MDN Docs

  MDN文件

• Can I use Network Information API

  我可以使用网络信息API

检测设备型号 (Detecting the device model)

The user agent may return some information about the model name. userstack is a service that gives you information based on the user agent. It works well and it is easy to integrate, however, depending on your needs, they can’t help.

用户代理可能会返回有关型号名称的一些信息。 userstack是一项服务，可根据用户代理为您提供信息。 它运作良好且易于集成，但是根据您的需求，他们无济于事。

Take for instance iDevices. Their user agent is basically the same so you can’t differentiate an iPad Pro from an old iPad that runs the last iOS. For these cases, you may need a better detection based on resolution, pixel density and other hardware information exposed in the browser. I did some quick research on this and found 3 products so far: WURFL.io, DeviceAtlas and 51Degrees. I haven’t had time to try their products yet, but I am looking forward to doing it (and posting about it)

以iDevices为例。 他们的用户代理基本相同，因此您无法将iPad Pro与运行最后一个iOS的旧iPad区分开。 对于这些情况，您可能需要根据浏览器中显示的分辨率，像素密度和其他硬件信息进行更好的检测。 我对此进行了一些快速研究，到目前为止找到3种产品： WURFL.io ， DeviceAtlas和51Degrees 。 我还没有时间尝试他们的产品，但是我很期待这样做(并发布有关它的信息)

常问问题 (FAQ)

Question: Why not use Google Analytics / Mixpanel / Kibana / New Relic / your tool here?

问题：为什么不在这里使用Google Analytics(分析)/ Mixpanel / Kibana / New Relic /您的工具？

We could get browser info inside other tools. But as a SaaS product we don’t use our own Google Analytics property (customers add their own). Also, adblockers may block these third-party tools. Last but not least, by having this info in our side we can adapt better.

我们可以在其他工具中获取浏览器信息。 但是作为SaaS产品，我们不使用自己的Google Analytics(分析)媒体资源(客户添加自己的媒体资源)。 此外，adblocker可能会阻止这些第三方工具。 最后但并非最不重要的一点是，通过在我们这方面提供此信息，我们可以更好地进行调整。

Question: Do you have a list of low-end/high-end devices?

问题：您是否有低端/高端设备列表？

No. Maybe this can be built combining the number of processors and memory but I didn’t invest much time on this. In this project, my colleague created a Rails helper that would determine if the user would use the lite or default version of a website based on hardware. On this topic, it is important to mention that Facebook has a library for Android called Device Year Class.

不会。也许可以结合处理器和内存的数量来构建，但是我并没有为此花费很多时间。 在这个项目中，我的同事创建了一个Rails助手，该助手将确定用户是基于硬件还是使用Lite或默认版本的网站。 在这个主题上，重要的是要提到Facebook有一个Android的库，称为Device Year Class 。

Also posted on my blog. If you like this content, follow me on Twitter and GitHub.

也张贴在我的博客上 。 如果您喜欢此内容，请在Twitter和GitHub上关注我。

By the way - Thinkific is hiring for several positions if you are interested.

顺便说一句- Thinkific被聘请 为 几个位置 ，如果你有兴趣。

翻译自: https://www.freecodecamp.org/news/exploring-device-detection-for-better-user-experiences-in-2020/

用户体验改善案例