Device Memory API

Philip Walton

今日、ウェブに接続できるデバイスの機能の幅が広がりました かつてないほど進化していますハイエンド アプリケーション向けと同じウェブ アプリケーション 低消費電力のスマートフォン、ウォッチ、タブレットに 配信されることもあります このような魅力的なエクスペリエンスの創出は シームレスに利用できます

Device Memory API は、 ウェブ デベロッパーが最新のデバイスに対応できるよう支援することを目的としたプラットフォーム機能 見ていきますnavigator オブジェクトに読み取り専用プロパティを追加します。 navigator.deviceMemory: デバイスの RAM 容量を返します。 2 の累乗で切り捨てられます。この API には Client Hints Header Device-Memory の場合、同じ値を報告します。

Device Memory API を使用すると、デベロッパーは主に次の 2 つのことを行えます。

  • 返されたリソースに基づいて、提供するリソースを実行時に決定する デバイスメモリ値（たとえば、Android 9.0 のユーザーに 使用しないでください。
  • この値を分析サービスに報告すると、 デバイスのメモリとユーザー行動、コンバージョン、その他の指標との関連性 把握するのに役立ちます

デバイスのメモリに基づいてコンテンツを動的に調整

独自のウェブサーバーを運用していて、リクエストするロジックを変更できる場合は、 リソースを提供する場合は、その属性を含むリクエストに条件付きで Device-Memory Client Hints Header。

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

この手法では、アプリケーションの 1 つ以上のバージョンを作成できます。 生成された条件に基づいて、クライアントからの要求に Device-Memory ヘッダーで設定された値。これらのバージョンには、コンテナ イメージの まったく異なるコードを使用します（維持するのが難しいからです）。ほとんどの場合、 「lite」高コストで重要ではない機能が除外されるだけです。 重視しています

Client Hints ヘッダーの使用

Device-Memory ヘッダーを有効にするには、Client Hints の <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 ルートでは 「lite」スクリプトのバージョン（Device-Memory ヘッダーが設定され、その値が または「フルスケール」のブラウザが 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 ルートと似ていますが、 によって、クライアントサイドのロジックでスクリプト URL が決定されます。

// 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 アナリティクスにはカスタム ディメンションと呼ばれる機能があります）。 ユーザーのデバイスメモリを追跡するためにできます。

カスタム デバイスメモリ ディメンションの使用

Google アナリティクスでカスタム ディメンションを使用するには、2 段階の手順を行います。

  1. Google アナリティクスでカスタム ディメンションを設定します。
  2. トラッキング コードを set に更新してください。 作成したカスタム ディメンションのデバイスメモリ値

カスタム ディメンションを作成する際に、「デバイスのメモリ」という名前を付けます。[ 「session」の scope この値はユーザーのブラウジング セッション中に変更されないためです。

<ph type="x-smartling-placeholder">
</ph> Google アナリティクスでデバイスのメモリのカスタム ディメンションを作成する <ph type="x-smartling-placeholder">
</ph> Google アナリティクスでデバイスのメモリのカスタム ディメンションを作成する

次に、トラッキング コードを更新します。次に例を示します。 なお、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 アナリティクスに送信するすべてのデータにこの値が含まれます。 これにより、必要な指標（例: ページの読み込み時間、目標完了率）をデバイス別に分類できます。 相関があるかどうかを確認します。

デバイスのメモリは組み込みディメンションではなくカスタム ディメンションであるため、 標準レポートには表示されませんこのデータにアクセスするには、次の操作を行う必要があります。 カスタム レポートを作成します。 たとえば、カスタム レポートの構成で、各指標で読み込み時間を比較する デバイスメモリは次のようになります。

<ph type="x-smartling-placeholder">
</ph> Google アナリティクスでデバイスのメモリに関するカスタム レポートを作成する <ph type="x-smartling-placeholder">
</ph> Google アナリティクスでデバイスのメモリに関するカスタム レポートを作成する

生成されるレポートは次のようになります。

<ph type="x-smartling-placeholder">
</ph> デバイスのメモリレポート <ph type="x-smartling-placeholder">
</ph> デバイスのメモリレポート

デバイスのメモリデータを収集し、ユーザーの行動に関するベースラインを確立したら、 メモリスペクトルのあらゆる範囲でアプリケーションを体験できるのであれば、 ユーザーごとに異なるリソースを提供するテスト（ （上記のセクションで説明した手法）で利用可能です。その後は 改善されたかどうかを確認します

まとめ

この投稿では、Device Memory API を使用してアプリケーションをカスタマイズする方法について説明します。 ユーザーの能力に応じてまた、デバイスがどのように変化し、 アプリのエクスペリエンスを改善できます

この投稿では Device Memory API に焦点を当てていますが、ほとんどの手法は ここで説明する API は、デバイスの機能や性能をレポートする ネットワーク状態を確認します。

デバイスを取り巻く環境が拡大し続ける中、 ウェブ デベロッパーは、ユーザーの興味 / 関心に 影響します