當今可連線至網路的裝置功能也比以往更廣泛。與高階桌上型電腦相同的網頁應用程式也可能在低耗電的手機、智慧手錶或平板電腦上放送,而且要創造引人入勝的體驗,讓各種裝置順暢運作,無比困難。
Device Memory API 是全新的網路平台功能,旨在協助網頁開發人員因應新型裝置環境。這會將唯讀屬性新增至 navigator
物件 navigator.deviceMemory
,以傳回裝置具備的 GB 量 (以 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
回應標頭中加入「Device-Memory」:
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 的裝置來造訪這個頁面,這個網頁中的所有圖片、CSS 和 JavaScript 要求都會包含 Device-Memory
標頭,並將值設為「0.5」,而您的伺服器可以配合這類要求做出回應。
舉例來說,如果已設定 Device-Memory
標頭且值小於 1,下列 Express 路徑會提供「精簡版」指令碼,如果瀏覽器不支援 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();
雖然根據裝置功能以條件方式提供相同元件的不同版本是不錯的策略,但有時甚至最好完全不提供元件。
在許多情況下,元件都只是強化,它們為體驗增添了良好的效果,但並非應用程式核心功能的必要元素。在這種情況下,最好不要一開始就載入這類元件。如果用於改善使用者體驗的元件會導致應用程式延遲或沒有回應,就無法實現目標。
無論您所做的決策影響使用者體驗,請務必評估其影響。您也必須清楚掌握應用程式目前的表現。
瞭解裝置記憶體與目前應用程式版本使用者行為之間的關聯,您就能更準確地判斷自己需要採取什麼動作,同時提供一個基準,方便您評估日後變更是否成功。
運用數據分析追蹤裝置記憶體
Device Memory API 為全新產品,且大多數分析服務供應商預設不會追蹤此 API。幸好,大部分的分析服務供應商都可讓您追蹤自訂資料 (例如 Google Analytics (分析) 提供「自訂維度」功能),可用來追蹤使用者裝置的裝置記憶體。
使用自訂裝置記憶體維度
在 Google Analytics (分析) 中使用自訂維度的程序包含兩個步驟。
建立自訂維度時,請為其命名「裝置記憶體」,並選擇「工作階段」範圍,因為該值在使用者的瀏覽工作階段中不會改變:
接下來,請更新追蹤程式碼。以下是可能的樣式範例。 請注意,如果瀏覽器不支援 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,根據使用者裝置的功能自訂應用程式,以及如何評估這些使用者體驗應用程式的情形。
雖然本文主要探討 Device Memory API,但本文提及的大部分技巧都可用於回報裝置功能或網路狀況的任何 API。
隨著裝置環境持續擴張,網頁程式開發人員在做出會影響使用體驗的決策時,比以往更加重要。