Device Memory API (API bộ nhớ của thiết bị)

Philip Walton

Ngày nay, các thiết bị có thể kết nối với web có phạm vi rộng hơn bao giờ hết. Ứng dụng web tương tự được phân phát cho máy tính để bàn cao cấp cũng có thể được phân phát đến điện thoại, đồng hồ hoặc máy tính bảng công suất thấp và việc tạo ra những trải nghiệm hấp dẫn hoạt động liền mạch trên mọi thiết bị có thể là điều cực kỳ khó khăn.

Device Memory API (API Bộ nhớ thiết bị) là một tính năng mới của nền tảng web nhằm giúp các nhà phát triển web xử lý bối cảnh thiết bị hiện đại. Thao tác này thêm thuộc tính chỉ có thể đọc vào đối tượng navigator, navigator.deviceMemory. Thuộc tính này sẽ trả về dung lượng RAM mà thiết bị có tính bằng gigabyte, được làm tròn xuống luỹ thừa gần nhất của 2. API này cũng có Tiêu đề Gợi ý của ứng dụng, Device-Memory, báo cáo cùng một giá trị.

API Bộ nhớ thiết bị cho phép nhà phát triển làm hai việc chính:

  • Đưa ra quyết định về những tài nguyên sẽ phân phát trong thời gian chạy dựa trên giá trị bộ nhớ thiết bị được trả về (ví dụ: phân phát phiên bản "rút gọn" của ứng dụng cho người dùng trên thiết bị có bộ nhớ thấp).
  • Báo cáo giá trị này cho dịch vụ phân tích để bạn có thể hiểu rõ hơn về mối tương quan giữa bộ nhớ thiết bị với hành vi của người dùng, lượt chuyển đổi hoặc các chỉ số khác quan trọng đối với công việc kinh doanh của bạn.

Tự động điều chỉnh nội dung dựa trên bộ nhớ thiết bị

Nếu đang chạy máy chủ web của riêng mình và có thể sửa đổi logic phân phát tài nguyên, bạn có thể phản hồi có điều kiện cho các yêu cầu chứa Device-Memory Tiêu đề Gợi ý của ứng dụng.

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

Với kỹ thuật này, bạn có thể tạo một hoặc nhiều phiên bản tập lệnh ứng dụng và phản hồi các yêu cầu từ ứng dụng theo điều kiện dựa trên giá trị được đặt trong tiêu đề Device-Memory. Các phiên bản này không cần phải chứa mã hoàn toàn khác (vì mã này khó duy trì hơn). Trong hầu hết trường hợp, phiên bản "rút gọn" sẽ chỉ loại trừ các tính năng có thể tốn kém và không quan trọng đối với trải nghiệm người dùng.

Sử dụng tiêu đề Gợi ý của ứng dụng

Để bật tiêu đề Device-Memory, hãy thêm thẻ Gợi ý của ứng dụng <meta> vào <head> của tài liệu:

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

Hoặc bao gồm "Device-Memory" trong tiêu đề phản hồi Accept-CH của máy 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

Thuộc tính này sẽ yêu cầu trình duyệt gửi tiêu đề Device-Memory cùng với tất cả các yêu cầu về tài nguyên phụ cho trang hiện tại.

Nói cách khác, sau khi bạn đã triển khai một trong các tuỳ chọn ở trên cho trang web của mình, nếu người dùng truy cập trên thiết bị có 0, 5 GB RAM, thì tất cả các yêu cầu hình ảnh, CSS và JavaScript từ trang này sẽ bao gồm tiêu đề Device-Memory với giá trị được đặt là "0,5" và máy chủ của bạn có thể phản hồi các yêu cầu đó theo cách bạn thấy phù hợp.

Ví dụ: tuyến Express sau đây phân phát phiên bản "rút gọn" của tập lệnh nếu tiêu đề Device-Memory được đặt và giá trị của tiêu đề này nhỏ hơn 1 hoặc tuyến này phân phát phiên bản "đầy đủ" nếu trình duyệt không hỗ trợ tiêu đề Device-Memory hoặc giá trị là 1 hoặc lớn hơn:

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`);
});

Sử dụng API JavaScript

Trong một số trường hợp (chẳng hạn như với máy chủ tệp tĩnh hoặc CDN), bạn sẽ không thể phản hồi có điều kiện các yêu cầu dựa trên tiêu đề HTTP. Trong những trường hợp như vậy, bạn có thể sử dụng API JavaScript để đưa ra các yêu cầu có điều kiện trong mã JavaScript của mình.

Logic sau đây tương tự như tuyến Express ở trên, ngoại trừ việc logic này xác định URL tập lệnh một cách linh động trong logic phía máy khách:

// 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();

Mặc dù việc phân phát có điều kiện các phiên bản khác nhau của cùng một thành phần dựa trên khả năng của thiết bị là một chiến lược hay, nhưng đôi khi vẫn tốt hơn nếu không phân phát thành phần nào.

Trong nhiều trường hợp, các thành phần chỉ đơn thuần là tính năng nâng cao. Các thành phần này bổ sung một số điểm nhấn thú vị cho trải nghiệm, nhưng không bắt buộc đối với chức năng cốt lõi của ứng dụng. Trong những trường hợp này, bạn không nên tải các thành phần như vậy ngay từ đầu. Nếu một thành phần nhằm cải thiện trải nghiệm người dùng khiến ứng dụng hoạt động chậm hoặc không phản hồi, thì thành phần đó sẽ không đạt được mục tiêu.

Với bất kỳ quyết định nào ảnh hưởng đến trải nghiệm người dùng, bạn đều cần phải đo lường tác động của quyết định đó. Một điều quan trọng nữa là bạn phải nắm rõ hiệu suất hiện tại của ứng dụng.

Việc hiểu được mối tương quan giữa bộ nhớ thiết bị với hành vi của người dùng phiên bản ứng dụng hiện tại sẽ cho bạn biết rõ hơn về việc cần thực hiện hành động nào, đồng thời cung cấp cho bạn một đường cơ sở để đo lường mức độ thành công của các thay đổi trong tương lai.

Theo dõi bộ nhớ thiết bị bằng số liệu phân tích

Device Memory API (API Bộ nhớ thiết bị) còn mới và hầu hết các nhà cung cấp dịch vụ phân tích đều không theo dõi API này theo mặc định. May mắn là hầu hết các nhà cung cấp dịch vụ phân tích đều cung cấp cho bạn một cách theo dõi dữ liệu tuỳ chỉnh (ví dụ: Google Analytics có một tính năng tên là Phương diện tuỳ chỉnh). Bạn có thể dùng tính năng này để theo dõi bộ nhớ thiết bị của thiết bị của người dùng.

Sử dụng phương diện bộ nhớ tuỳ chỉnh của thiết bị

Việc sử dụng thứ nguyên tùy chỉnh trong Google Analytics là quá trình gồm hai bước.

  1. Thiết lập phương diện tuỳ chỉnh trong Google Analytics.
  2. Cập nhật mã theo dõi của bạn thành set giá trị bộ nhớ của thiết bị cho thứ nguyên tùy chỉnh bạn vừa tạo.

Khi tạo thứ nguyên tùy chỉnh, hãy đặt tên cho thứ nguyên này là "Bộ nhớ thiết bị" và chọn phạm vi "phiên" vì giá trị sẽ không thay đổi trong suốt phiên duyệt web của người dùng:

Tạo phương diện tuỳ chỉnh Bộ nhớ thiết bị trong Google Analytics
Tạo phương diện tuỳ chỉnh Bộ nhớ thiết bị trong Google Analytics

Tiếp theo, hãy cập nhật mã theo dõi của bạn. Sau đây là một ví dụ về hình thức xuất hiện của URL này. Lưu ý rằng đối với các trình duyệt không hỗ trợ Device Memory API (API Bộ nhớ thiết bị), giá trị kích thước sẽ là "(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');

Báo cáo về dữ liệu Bộ nhớ của thiết bị

Khi phương diện bộ nhớ của thiết bị là set trên đối tượng công cụ theo dõi, tất cả dữ liệu bạn gửi đến Google Analytics sẽ bao gồm giá trị này. Điều này sẽ cho phép bạn chia nhỏ bất kỳ chỉ số nào bạn muốn (ví dụ: thời gian tải trang, tỷ lệ hoàn thành mục tiêu, v.v.) theo bộ nhớ thiết bị để xem có mối tương quan nào không.

Vì bộ nhớ thiết bị là phương diện tuỳ chỉnh chứ không phải phương diện tích hợp sẵn, nên bạn sẽ không thấy phương diện này trong bất kỳ báo cáo chuẩn nào. Để truy cập vào dữ liệu này, bạn phải tạo một báo cáo tuỳ chỉnh. Ví dụ: cấu hình cho một báo cáo tuỳ chỉnh so sánh thời gian tải theo bộ nhớ thiết bị có thể có dạng như sau:

Tạo báo cáo tuỳ chỉnh về Bộ nhớ thiết bị trong Google Analytics
Tạo báo cáo tuỳ chỉnh về Bộ nhớ thiết bị trong Google Analytics

Và báo cáo mà công cụ này tạo ra có thể trông giống như sau:

Báo cáo về bộ nhớ của thiết bị
Báo cáo về bộ nhớ của thiết bị

Sau khi thu thập dữ liệu bộ nhớ của thiết bị và có đường cơ sở về cách người dùng trải nghiệm ứng dụng trên mọi dải phổ bộ nhớ, bạn có thể thử nghiệm việc phân phát nhiều tài nguyên cho nhiều người dùng (sử dụng các kỹ thuật được mô tả trong phần trên). Sau đó, bạn có thể xem kết quả và xem chúng có được cải thiện hay không.

Kết thúc

Bài đăng này trình bày cách sử dụng Device Memory API (API Bộ nhớ của thiết bị) để điều chỉnh ứng dụng cho phù hợp với khả năng trên thiết bị của người dùng, đồng thời hướng dẫn cách đo lường trải nghiệm của những người dùng này trên ứng dụng.

Mặc dù bài đăng này tập trung vào API Bộ nhớ thiết bị, nhưng hầu hết các kỹ thuật mô tả ở đây đều có thể áp dụng cho mọi API báo cáo tính năng của thiết bị hoặc điều kiện mạng.

Khi bối cảnh thiết bị tiếp tục mở rộng, điều quan trọng hơn bao giờ hết là các nhà phát triển web phải xem xét toàn bộ người dùng khi đưa ra những quyết định ảnh hưởng đến trải nghiệm của họ.