Halaman ini diterjemahkan oleh Cloud Translation API.

Device Memory API

Philip Walton

Kini, cakupan kemampuan perangkat yang dapat terhubung ke web jauh lebih luas daripada sebelumnya. Aplikasi web yang sama yang disajikan ke komputer komputer desktop juga dapat disajikan ke ponsel, jam tangan, atau tablet bertenaga rendah, dan itu bisa sangat menantang untuk menciptakan pengalaman menarik yang berhasil lancar di perangkat apa pun.

Device Memory API adalah web baru fitur platform yang bertujuan membantu developer web menangani perangkat modern lanskap. Metode ini menambahkan properti hanya baca ke objek navigator, navigator.deviceMemory, yang menampilkan jumlah RAM yang dimiliki perangkat gigabita, dibulatkan ke bawah pangkat dua terdekat. API ini juga memiliki Header Client Hint, Device-Memory, yang melaporkan nilai yang sama.

Device Memory API memberi developer kemampuan untuk melakukan dua hal utama:

Buat keputusan runtime tentang resource yang akan ditayangkan berdasarkan resource yang ditampilkan nilai memori perangkat (mis. menayangkan versi "lite" aplikasi kepada pengguna di perangkat dengan memori rendah).
Laporkan nilai ini ke layanan analisis agar Anda dapat lebih memahami cara memori perangkat berkolerasi dengan perilaku pengguna, konversi, atau metrik lainnya penting bagi bisnis Anda.

Menyesuaikan konten secara dinamis berdasarkan memori perangkat

Jika Anda menjalankan server web Anda sendiri dan dapat mengubah logika yang yang melayani resource, Anda dapat secara kondisional merespons permintaan yang berisi Device-Memory Header Petunjuk Klien.

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

Dengan teknik ini, Anda dapat membuat satu atau beberapa versi aplikasi skrip dan menanggapi permintaan dari klien secara bersyarat berdasarkan nilai yang ditetapkan di header Device-Memory. Versi ini tidak perlu berisi kode yang sama sekali berbeda (karena lebih sulit dikelola). Seringkali, "ringan" hanya akan mengecualikan fitur yang mungkin mahal dan tidak kritis mengenai pengalaman pengguna.

Menggunakan Header Client Hints

Untuk mengaktifkan header Device-Memory, tambahkan tag <meta> Petunjuk Klien ke <head> pada dokumen Anda:

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

Atau sertakan "Memori Perangkat" di header respons Accept-CH server Anda:

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

Tindakan ini akan memberi tahu browser untuk mengirim header Device-Memory dengan semua sub-resource untuk halaman saat ini.

Dengan kata lain, setelah Anda menerapkan salah satu opsi di atas untuk jika pengguna berkunjung di perangkat dengan RAM 0, 5 GB, semua gambar, CSS, dan Permintaan JavaScript dari halaman ini akan menyertakan header Device-Memory dengan nilai yang diatur ke "0.5", dan server Anda dapat merespons permintaan tersebut jika cocok.

Misalnya, rute Ekspres berikut melayani rute "ringan" versi skrip jika header Device-Memory disetel dan nilainya adalah kurang dari 1, atau menayangkan "penuh" jika browser tidak mendukung Header Device-Memory atau nilainya adalah 1 atau lebih besar:

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

Menggunakan JavaScript API

Dalam beberapa kasus (seperti dengan server file statis atau CDN), Anda tidak dapat merespons permintaan berdasarkan header HTTP secara bersyarat. Dalam kasus ini, Anda dapat menggunakan JavaScript API untuk membuat permintaan kondisional dalam kode JavaScript Anda.

Logika berikut mirip dengan rute Express di atas, tetapi logika ini secara dinamis menentukan URL skrip dalam logika sisi klien:

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

Meskipun menyajikan secara kondisional versi yang berbeda dari komponen yang sama berdasarkan kemampuan perangkat adalah strategi yang baik, terkadang lebih baik untuk tidak menyajikan komponen sama sekali.

Dalam banyak kasus, komponen sepenuhnya merupakan peningkatan kualitas. Mereka menambahkan beberapa sentuhan bagus pada pengalaman, tetapi tidak diwajibkan untuk fungsi inti aplikasi. Di beberapa kasus ini, mungkin lebih baik untuk tidak memuat komponen itu sejak awal. Jika komponen yang dimaksudkan untuk meningkatkan pengalaman pengguna membuat aplikasi menjadi lambat atau tidak responsif, komputer tidak mencapai tujuannya.

Apa pun keputusan yang Anda buat yang mempengaruhi pengalaman pengguna, Anda harus benar-benar mengukur dampaknya. Penting juga bagi Anda untuk memiliki gambaran yang jelas tentang bagaimana performa aplikasi Anda hari ini.

Memahami bagaimana memori perangkat berkolerasi dengan perilaku pengguna untuk saat ini aplikasi Anda akan menginformasikan dengan lebih baik tindakan yang perlu diambil, dan akan memberi dasar bagi Anda untuk mengukur keberhasilan perubahan di masa depan.

Melacak memori perangkat dengan analisis

Device Memory API masih baru, dan sebagian besar penyedia analisis tidak melacaknya secara {i>default<i}. Untungnya, sebagian besar penyedia analitik memberi Anda cara untuk melacak (misalnya, Google Analytics memiliki fitur yang disebut Dimensi Kustom), yang dapat Anda untuk melacak memori perangkat bagi pengguna Anda perangkat.

Menggunakan dimensi memori perangkat kustom

Menggunakan dimensi kustom di Google Analytics adalah proses dua langkah.

Siapkan dimensi kustom di Google Analytics.
Perbarui kode pelacakan Anda ke set nilai memori perangkat untuk dimensi kustom yang baru saja Anda buat.

Saat membuat dimensi kustom, beri nama "Memori Perangkat" dan pilih cakupan "sesi" karena nilainya tidak akan berubah selama sesi penjelajahan pengguna:

Membuat dimensi kustom Memori Perangkat di Google Analytics

Selanjutnya, perbarui kode pelacakan Anda. Berikut adalah contoh tampilannya. Perhatikan bahwa untuk browser yang tidak mendukung Device Memory API, nilainya akan menjadi "(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');

Pelaporan data Memori Perangkat

Setelah dimensi memori perangkat set di pelacak, semua data yang Anda kirim ke Google Analytics akan menyertakan nilai ini. Laporan ini akan memungkinkan Anda mengelompokkan metrik apa pun yang Anda inginkan (mis. waktu muat halaman, rasio sasaran tercapai, dll.) menurut perangkat memori untuk melihat apakah ada korelasi.

Karena memori perangkat adalah dimensi kustom, bukan dimensi bawaan, Anda tidak akan melihatnya di laporan standar. Untuk mengakses data ini, Anda harus membuat laporan kustom. Misalnya, konfigurasi untuk laporan kustom yang membandingkan waktu pemuatan dengan memori perangkat akan terlihat seperti ini:

Membuat laporan kustom Memori Perangkat di Google Analytics

Laporan yang dihasilkan akan terlihat seperti ini:

Setelah Anda mengumpulkan data memori perangkat dan memiliki dasar pengukuran tentang menggunakan aplikasi di semua rentang spektrum memori, Anda dapat bereksperimen dengan menyajikan sumber daya yang berbeda kepada pengguna yang berbeda (menggunakan teknik yang dijelaskan di atas). Setelah itu, Anda akan dapat melihat hasilnya dan lihat apakah hasilnya telah meningkat.

Menyelesaikan

Postingan ini menguraikan cara menggunakan Device Memory API untuk menyesuaikan aplikasi Anda dengan kemampuan pengguna perangkat seluler, dan menunjukkan cara mengukur seberapa pengguna saat menggunakan aplikasi Anda.

Meskipun postingan ini berfokus pada Device Memory API, sebagian besar teknik yang dijelaskan di sini dapat diterapkan untuk API apa pun yang melaporkan kemampuan perangkat atau kondisi jaringan.

Ketika lanskap perangkat terus melebar, kita menjadi semakin penting untuk pengembang web mempertimbangkan seluruh spektrum pengguna ketika membuat keputusan yang mempengaruhi pengalaman mereka.