現今可連線至網路的裝置涵蓋範圍更廣 前所未見 也可能會在低階手機、手錶或平板電腦 要創造引人入勝且有效運用的體驗並不容易 順暢無阻地與任何裝置搭配使用
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">
或加入「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 的裝置上造訪網站、所有圖片、CSS 和
這個網頁發出的 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();
雖然有條件地提供同一元件的不同版本 裝置功能固然很好 但實際上是提供元件
在許多情況下,元件都是單純強化。還能增添趣味 但這並非應用程式核心功能的必要元件。於 在此情況下,最好不要先載入這類元件。 如果有某個元件是為了改善使用者體驗,導致應用程式變得緩慢 或沒有回應,代表廣告無法達成目標
對於任何影響使用者體驗的決定 衡量其影響您也必須清楚瞭解 目前成效。
瞭解裝置記憶體與目前使用者行為的關聯 的應用程式版本,較能準確告知需要採取的行動 ,可做為衡量未來變化成效的基準。
透過數據分析追蹤裝置記憶體
Device Memory 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 適用於回報裝置功能的任何 API 網路條件。
隨著裝置螢幕的環境持續擴張,最重要的是 網頁程式開發人員會根據所有使用者 都會影響他們的體驗