أصبحت الآن مجموعة كبيرة من إمكانيات الأجهزة التي يمكنها الاتصال بالويب. عن أي وقت مضى. هو تطبيق الويب ذاته الذي يتم تقديمه إلى هواتف متطورة قد يتم أيضًا عرض جهاز كمبيوتر مكتبي على هاتف أو ساعة أو جهاز لوحي منخفض الطاقة، وقد يكون من الصعب جدًا ابتكار تجارب مقنعة تفيد بسلاسة على أي جهاز.
Device Memory API هي صفحة ويب جديدة.
تهدف إلى مساعدة مطوري الويب في التعامل مع الأجهزة الحديثة
منظر طبيعي. تضيف سمة للقراءة فقط إلى الكائن navigator،
navigator.deviceMemory، الذي يعرض مقدار ذاكرة الوصول العشوائي (RAM) المتوفّر على الجهاز
غيغابايت، مقرَّبةً إلى أقرب أسّ اثنين. تتميز واجهة برمجة التطبيقات أيضًا
Client Hints Header،
Device-Memory، تعرض القيمة نفسها.
تتيح Device Memory API للمطوّرين تنفيذ أمرين أساسيَّين:
- يمكنك اتخاذ قرارات في وقت التشغيل بشأن الموارد المطلوب عرضها استنادًا إلى الموارد قيمة ذاكرة الجهاز (مثل عرض إصدار "مبسّط" من تطبيق للمستخدمين على الأجهزة منخفضة الذاكرة).
- يمكنك إبلاغ إحدى خدمات الإحصاءات بهذه القيمة حتى تتمكّن من فهم كيفية إجراء ذلك بشكل أفضل. ارتباط ذاكرة الجهاز بسلوك المستخدم أو الإحالات الناجحة أو المقاييس الأخرى الأكثر أهمية لنشاطك التجاري.
تخصيص المحتوى ديناميكيًا استنادًا إلى ذاكرة الجهاز
وإذا كنت تقوم بتشغيل خادم الويب الخاص بك ويمكنك تعديل المنطق الذي
الموارد، فيمكنك الاستجابة بشكل مشروط للطلبات التي تحتوي على
Device-Memory عنوان حقول العميل.
GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*
باستخدام هذا الأسلوب، يمكنك إنشاء إصدار واحد أو أكثر من تطبيقك
النصوص البرمجية والاستجابة للطلبات الواردة من العميل بشكل مشروط استنادًا إلى
تم تحديدها في عنوان Device-Memory. لا يلزم أن تحتوي هذه الإصدارات على
تعليمة برمجية مختلفة تمامًا (لأنها تصعب صيانتها). في معظم الأوقات،
"مبسّط" فقط الميزات التي قد تكون باهظة الثمن وغير مهمة
على تجربة المستخدم.
استخدام عنوان Client Hints
لتفعيل عنوان Device-Memory، عليك إضافة العلامة <meta> لتلميحات العميل.
إلى <head> من المستند:
<meta http-equiv="Accept-CH" content="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 مع كل الموارد الفرعية.
الصفحة الحالية.
بمعنى آخر، بمجرد تنفيذ أحد الخيارات المذكورة أعلاه
الموقع الإلكتروني، إذا زار أحد المستخدمين جهازًا يتضمّن ذاكرة وصول عشوائي (RAM) بسعة 0.5 غيغابايت، وجميع الصور وملفات CSS
ستتضمّن طلبات JavaScript من هذه الصفحة العنوان Device-Memory مع
يتم تعيين القيمة على "0.5"، ويمكن للخادم الاستجابة لهذه الطلبات بأي طريقة
انظر مناسبًا.
على سبيل المثال، يخدم المسار السريع التالي
"مبسّط" نسخة من النص البرمجي في حال ضبط العنوان 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
في بعض الحالات (كما هو الحال باستخدام خادم ملف ثابت أو شبكة توصيل المحتوى)، لن تتمكن من الاستجابة للطلبات بشكل مشروط بناءً على عنوان 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" من خلال خطوتَين.
- إعداد السمة المخصّصة في "إحصاءات Google".
- تحديث رمز التتبّع إلى
setقيمة ذاكرة الجهاز للبُعد المخصّص الذي أنشأته للتو.
عند إنشاء السمة المخصّصة، أدخِل الاسم "ذاكرة الجهاز". واختَر نطاق "الجلسة" لأنّ القيمة لن تتغيّر أثناء جلسة تصفُّح المستخدم:
بعد ذلك، يجب تحديث رمز التتبع. فيما يلي مثال على الشكل الذي قد يبدو عليه. يُرجى العلم أنّه بالنسبة إلى المتصفّحات التي لا تتيح استخدام 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" هذه القيمة.
سيتيح لك ذلك تقسيم أي مقياس تريده (على سبيل المثال، أوقات تحميل الصفحات ومعدّل إكمال الأهداف وما إلى ذلك) حسب الجهاز.
السابقة لمعرفة ما إذا كانت هناك أي ارتباطات.
بما أن ذاكرة الجهاز هي بُعد مخصص وليس بُعدًا مدمجًا، لن تراه في أي من التقارير العادية. للوصول إلى هذه البيانات، سيتعين عليك إنشاء تقرير مخصّص على سبيل المثال، ضبط تقرير مخصص يقارن بين أوقات التحميل حسب قد تبدو ذاكرة الجهاز كما يلي:
وقد يبدو التقرير الذي تنشئه كما يلي:
بعد أن تقوم بجمع بيانات ذاكرة الجهاز ويكون لديك أساس لكيفية قيام المستخدمين تطبيقك عبر جميع نطاقات أطياف الذاكرة، يمكنك تجربة عرض موارد مختلفة للمستخدمين المختلفين (باستخدام الأساليب الموضحة في القسم أعلاه). بعد ذلك، ستتمكن من إلقاء نظرة على النتائج ومعرفة ما إذا كانت قد تحسنت.
ملخص
توضّح هذه المشاركة كيفية استخدام Device Memory API لتخصيص تطبيقك. بقدرات المستخدمين الأجهزة، وتوضح كيفية قياس مدى تجربة هؤلاء المستخدمين لتطبيقك.
وبينما تركز هذه المشاركة على واجهة برمجة تطبيقات ذاكرة الجهاز، إلا أن معظم الأساليب كما هو موضح هنا على أي واجهة برمجة تطبيقات تعرض إمكانات الجهاز أو حالات الشبكة
ومع استمرار اتساع نطاق الأجهزة، أصبح من المهم أكثر من أي وقت مضى يأخذ مطورو الويب في الاعتبار مجموعة المستخدمين الكاملة عند اتخاذ القرارات التي تؤثر في تجربتهم.