如今,可连接到网络的设备的功能范围更广 这比以往任何时候都高投放到高端设备的同一个 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 中创建设备内存自定义维度](https://developer.chrome.google.cn/static/blog/device-memory/image/creating-device-memory-c-109ba2212b2a9.png?authuser=5&hl=nb)
接下来,更新您的跟踪代码。其外观示例如下。 请注意,对于不支持 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 的所有数据都将包含此值。
这样,您就可以按设备细分所需的任何指标(例如,网页加载时间、目标完成率等)
看看是否存在任何关联。
由于设备内存是自定义维度而不是内置维度, 不会在任何标准报告中看到它。要访问这些数据,您必须 创建自定义报告。 例如,某个自定义报告的配置按 可能如下所示:
![在 Google Analytics 中创建设备内存自定义报告](https://developer.chrome.google.cn/static/blog/device-memory/image/creating-device-memory-c-c446b651392e8.png?authuser=5&hl=nb)
它生成的报告可能如下所示:
![设备内存报告](https://developer.chrome.google.cn/static/blog/device-memory/image/device-memory-report-6607be7fb3de.png?authuser=5&hl=nb)
收集设备内存数据并设定了用户 您可以快速掌握 尝试向不同的用户提供不同的资源(使用 方法)。之后,您将能够查看 看看效果是否有所提升。
总结
本博文概述了如何使用 Device Memory API 定制您的应用 用户功能以及如何衡量 从而提升这些用户的体验
虽然这篇博文重点介绍 Device Memory API,但大部分技术 可应用于任何报告设备功能或 网络状况。
随着设备格局不断变宽,变得前所未有地重要 Web 开发者在做出与所有广告主相关的决策时, 影响着他们的体验