此页面由 Cloud Translation API 翻译。

Device Memory API

Philip Walton

如今，可连接到网络的设备的功能范围更广这比以往任何时候都高投放到高端设备的同一个 Web 应用桌面设备也可能投放到低功耗手机、手表或平板电脑而要打造引人入胜、无缝切换任何设备

Device Memory API 是一种新型旨在帮助网络开发者处理新型设备横向模式。它会向 navigator 对象添加一个只读属性， navigator.deviceMemory，用于返回设备在其中有多少 RAM GB，向下取整到最接近的二次方。该 API 还具有客户端提示标头， Device-Memory，报告相同的值。

Device Memory API 使开发者能够执行以下两项主要操作：

根据返回的设备内存值（例如，向设备提供应用的“精简版” 低内存设备）。
向分析服务报告此值，以便您更好地了解设备内存与用户行为、转化次数或其他指标对您的业务至关重要

根据设备内存动态定制内容

如果您运行的是自己的网络服务器，并且能够修改您可以有条件地响应包含 Device-Memory 客户端提示标头。

GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*

通过这种方法，您可以创建一个或多个应用版本脚本，并根据 Device-Memory 标头中设置的值。这些版本无需包含完全不同的代码（因为这样更难维护）。大多数情况下 “精简版”版本将仅排除那些费用可能很高且不重要的功能影响用户体验

使用客户端提示标头

如需启用 Device-Memory 标头，请添加客户端提示 <meta> 标记添加到文档的 <head> 中：

<meta http-equiv="Accept-CH" content="Device-Memory">

或包含“设备内存”在服务器的 Accept-CH 响应标头中：

HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width

这将指示浏览器发送 Device-Memory 标头以及所有子资源对当前网页的请求

也就是说，只要您针对如果用户在具有 0.5 GB RAM 的设备上访问来自此网页的 JavaScript 请求将包含 Device-Memory 标头，值设置为“0.5”，您的服务器就可以响应此类请求，无论。

例如，以下 Express 路由为 “精简版”脚本版本（如果设置了 Device-Memory 标头且其值为小于 1，如果浏览器不支持 Device-Memory 标头，或者其值为 1 或更大值：

app.get('/static/js/:scriptId', (req, res) => {
  // Low-memory devices should load the "lite" version of the component.
  // The logic below will set `scriptVersion` to "lite" if (and only if)
  // `Device-Memory` isn't undefined and returns a number less than 1.
  const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';

  // Respond with the file based on `scriptVersion` above.
  res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});

使用 JavaScript API

在某些情况下（例如使用静态文件服务器或 CDN），您将无法根据 HTTP 标头有条件地响应请求。在这些情况下可以使用 JavaScript API 在 JavaScript 代码中发出条件请求。

以下逻辑与上述 Express 路线类似，不同之处在于前者是动态的，确定客户端逻辑中的脚本网址：

// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';

const component = await import(`path/to/component.${componentVersion}.js`);
component.init();

同时，根据不同的 API 有条件地提供同一组件的不同版本，设备性能是一项很好的策略，有时甚至提供任何组件

在许多情况下，组件只是增强功能。也为它们增添了一些但对实现应用的核心功能而言并不是必需的。在在这些情况下，最好不要从一开始就加载此类组件。如果旨在改善用户体验的组件导致应用运行缓慢或无响应，则没有实现其目标

无论您做出的任何决定都会影响用户体验，并衡量其影响更重要的是，您必须清楚地了解。

了解设备内存与当前用户行为之间有何关联以便更好地了解需要采取的行动，为您提供了一个基准，以此衡量未来更改是否成功。

使用分析工具跟踪设备内存

Device Memory API 是新的，大多数分析服务提供商尚未对其进行跟踪默认情况。幸运的是，大多数分析服务提供商都提供了一种数据（例如，Google Analytics 有一项名为自定义维度的功能），您可以用于跟踪用户的设备内存设备。

使用自定义设备内存维度

在 Google Analytics 中使用自定义维度的过程分为两个步骤。

在 Google Analytics 中设置自定义维度。
将跟踪代码更新为 set 您刚刚创建的自定义维度的设备内存值。

创建自定义维度时，将其命名为“设备内存”然后选择范围为“会话” 因为该值在用户浏览会话过程中不会发生变化：

接下来，更新您的跟踪代码。其外观示例如下。请注意，对于不支持 Device Memory API 的浏览器，维度其值将显示为“(not set)”。

// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');

// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');

// Do any other other custom setup you want...

// Send the initial pageview.
ga('send', 'pageview');

报告设备内存数据

确定设备内存尺寸 set（位于跟踪器对象，您发送到 Google Analytics 的所有数据都将包含此值。这样，您就可以按设备细分所需的任何指标（例如，网页加载时间、目标完成率等）看看是否存在任何关联。

由于设备内存是自定义维度而不是内置维度，不会在任何标准报告中看到它。要访问这些数据，您必须创建自定义报告。例如，某个自定义报告的配置按可能如下所示：

它生成的报告可能如下所示：

收集设备内存数据并设定了用户您可以快速掌握尝试向不同的用户提供不同的资源（使用方法）。之后，您将能够查看看看效果是否有所提升。

总结

本博文概述了如何使用 Device Memory API 定制您的应用用户功能以及如何衡量从而提升这些用户的体验