Trang này được dịch bởi Cloud Translation API.

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

Philip Walton

Hiện nay, những thiết bị có thể kết nối web có nhiều chức năng hơn hơn bao giờ hết. Cùng một ứng dụng web được phân phối cho ứng dụng web cao cấp máy tính để bàn 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ó hiệu suất pin yếu, và có thể cực kỳ khó khăn khi tạo ra những trải nghiệm hấp dẫn một cách liền mạch trên mọi thiết bị.

Device Memory API (API Bộ nhớ thiết bị) là một phiên bản web mới nhằm giúp các nhà phát triển web đối phó với thiết bị hiện đại ngang. Hàm này thêm thuộc tính chỉ có thể đọc vào đối tượng navigator, navigator.deviceMemory: trả về dung lượng RAM mà thiết bị có gigabyte, được làm tròn xuống luỹ thừa gần nhất bằng 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ị.

Device Memory API (API Bộ nhớ của thiết bị) cho phép nhà phát triển thực hiện hai việc chính:

Đưa ra quyết định trong thời gian chạy về những tài nguyên sẽ phân phát dựa trên tài nguyên được trả về giá trị bộ nhớ của thiết bị (ví dụ: phân phối phiên bản "rút gọn" của ứng dụng cho người dùng trên thiết bị còn ít bộ nhớ).
Hãy báo cáo giá trị này cho một dịch vụ phân tích để bạn có thể hiểu rõ hơn bộ nhớ thiết bị tương quan 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 doanh nghiệp của bạn.

Điều chỉnh nội dung một cách linh hoạt dựa trên bộ nhớ thiết bị

Nếu bạn đ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 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 ứng dụng và phản hồi các yêu cầu từ ứng dụng khách một cách có điều kiện dựa trên giá trị đã đặt trong tiêu đề Device-Memory. Các phiên bản này không cần chứa mã hoàn toàn khác (vì khó duy trì hơn). Thông thường, việc "rút gọn" phiên bản hiện tại sẽ chỉ loại trừ các tính năng có thể tốn kém và không quan trọng 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 ý ứ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 "Bộ nhớ thiết bị" 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

Thao tác này sẽ yêu cầu trình duyệt gửi tiêu đề Device-Memory kèm theo tất cả tài nguyên phụ cho trang hiện tại.

Nói cách khác, 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 một thiết bị có RAM 0,5 GB, thì tất cả hình ảnh, CSS và Các yêu cầu JavaScript từ trang này sẽ bao gồm tiêu đề Device-Memory có giá trị được đặt thành "0.5" và máy chủ của bạn có thể phản hồi các yêu cầu đó theo bất kỳ cách nào phù hợp.

Ví dụ: tuyến Express sau đây phân phát "rút gọn" phiên bản của một tập lệnh nếu tiêu đề Device-Memory được đặt và giá trị của tiêu đề đó là ít hơn 1 hoặc phục vụ "đầy đủ" nếu trình duyệt không hỗ trợ Tiêu đề Device-Memory hoặc giá trị từ 1 trở lê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 này, bạn có thể sử dụng API JavaScript để đưa ra yêu cầu có điều kiện trong mã JavaScript của bạn.

Logic sau đây tương tự như tuyến Express ở trên, ngoại trừ việc tự động xác định URL của tập lệnh 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();

Trong khi 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, đôi khi có thể tốt hơn nữa nếu không phân phát một thành phần nào cả.

Trong nhiều trường hợp, các thành phần chỉ đơn thuần là các tính năng nâng cao. Chúng thêm một số chi tiết đẹp mắt trải nghiệm, nhưng chúng không bắt buộc đối với chức năng cốt lõi của ứng dụng. Ngang bằ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 làm cho ứng dụng bị chậm hoặc không phản hồi, nghĩa là 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 nhất thiết phải đo lường tác động của sản phẩm. Ngoài ra, bạn cũng cần hiểu rõ về cách ứng dụng của bạn hoạt động ngày hôm nay.

Tìm hiểu mối tương quan giữa bộ nhớ thiết bị và hành vi của người dùng đối với hiện tại của ứng dụng sẽ cho biết rõ hơn về hành động cần được thực hiện và cung cấp cho bạn đườ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ị) là API mới và hầu hết các nhà cung cấp phân tích 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 phân tích đều cho bạn cách theo dõi dữ liệu (ví dụ: Google Analytics có một tính năng gọi là Phương diện tùy chỉnh), mà bạn có thể để theo dõi bộ nhớ thiết bị cho người dùng của bạn. thiết bị.

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

Sử dụng thứ nguyên tùy chỉnh trong Google Analytics là quy trình hai bước.

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

Khi tạo phương diện tuỳ chỉnh, hãy đặt tên cho phương diện này là "Bộ nhớ thiết bị" và chọn phạm vi của "phiên hoạt động" 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

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 hiển thị của quảng cáo. Lưu ý rằng đối với các trình duyệt không hỗ trợ Device Memory API, phương diện này sẽ được sử dụng sẽ là "(chưa đặt)".

// 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ớ thiết bị

Sau khi kích thước bộ nhớ của thiết bị là set trên đối tượng trình 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 thiết bị bộ nhớ để xem liệu có bất kỳ 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 mục 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 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 Bộ nhớ thiết bị trong Google Analytics

Báo cáo do công cụ này tạo ra có thể có dạng như sau:

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

Kết thúc

Bài đăng này trình bày cách dùng Device Memory API (API Bộ nhớ của thiết bị) để điều chỉnh ứng dụng của bạn vào khả năng của người dùng thiết bị và chỉ báo cách đo lường những người dùng này trải nghiệm ứng dụng của bạn.

Mặc dù bài đăng này tập trung vào Device Memory API (API Bộ nhớ của thiết bị), nhưng hầu hết các kỹ thuật được mô tả ở đây có thể được áp dụng cho bất kỳ API nào báo cáo khả 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à điều quan trọng hơn bao giờ hết các nhà phát triển web xem xét toàn bộ phạm vi người dùng khi đưa ra quyết định ảnh hưởng đến trải nghiệm của họ.