تقدير مساحة التخزين المتاحة

Jeff Posnick

النص المختصر

يعرض الإصدار 61 من Chrome، الذي يتوفر لاحقًا مزيد من المتصفحات، تقديرًا لحجم مساحة التخزين التي يستخدمها تطبيق الويب ومقدار المساحة المتاحة عبر:

if ('storage' in navigator && 'estimate' in navigator.storage) {
  navigator.storage.estimate().then(({usage, quota}) => {
    console.log(`Using ${usage} out of ${quota} bytes.`);
  });
}

تطبيقات الويب الحديثة وتخزين البيانات

عندما تفكر في احتياجات التخزين لتطبيق ويب حديث، فمن المفيد تقسيم البيانات التي يتم تخزينها إلى فئتَين: البيانات الأساسية اللازمة لتحميلها تطبيق الويب والبيانات اللازمة لتفاعل المستخدم الهادف مرة واحدة تم تحميل التطبيق.

يتكون النوع الأول من البيانات، المطلوب لتحميل تطبيق الويب، من ملفات HTML، أو JavaScript وCSS وربما بعض الصور. عاملي الخدمات، إلى جانب ذاكرة التخزين المؤقت لواجهة برمجة التطبيقات، وتوفير البنية الأساسية اللازمة لحفظ هذه الموارد الأساسية ثم استخدام لاحقًا لتحميل تطبيق الويب بسرعة، ومن الأفضل تجاوز الشبكة بالكامل. (الأدوات التي تتكامل مع عملية إنشاء تطبيق الويب، مثل الأداة الجديدة مكتبات Workbox أو الإصدارات الأقدم sw-precache، تتمكن من أتمتة عملية تخزين وتحديث واستخدام هذا النوع من data.)

ولكن ماذا عن النوع الآخر من البيانات؟ هذه هي الموارد التي لا تحتاج إلى تحميل تطبيق الويب، ولكنها قد تلعب دورًا مهمًا في تحميل المستخدم. إذا كنت تكتب مثلاً تطبيق ويب لتعديل الصور، يمكنك يريدون حفظ نسخة محلية واحدة أو أكثر من الصورة، ما يسمح للمستخدمين بالتبديل بين المراجعات والتراجع عن عملها. أو إذا كنت تقوم بتطوير وسائط غير متصلة تجربة تشغيل، سيكون حفظ ملفات الصوت أو الفيديو محليًا أمرًا بالغ الأهمية الجديدة. يحتاج كل تطبيق ويب يمكن تخصيصه إلى توفير بعض نوع معلومات عن الحالة كيف تعرف مقدار المساحة المتوفرة لهذا النوع من التخزين في بيئة التشغيل، وماذا يحدث عند نفاد المساحة؟

الماضي: window.webkitStorageInfo وnavigator.webkitTemporaryStorage

عملت المتصفحات في السابق على استخدام هذا النوع من التأمل الداخلي عن طريق استخدام بادئة مثل الواجهات القديمة جدًا (والمتوقفة نهائيًا) window.webkitStorageInfo، وليس قديمًا تمامًا، ولكنه لا يزال غير عادي navigator.webkitTemporaryStorage وعلى الرغم من أن هذه الواجهات توفر معلومات مفيدة، لا تحتوي على المستقبل كمعايير الويب.

هذا هو السبب في أنّ معيار مساحة تخزين whatWG إلى الدخول إلى الصورة.

المستقبل: navigator.storage

في إطار جهودنا المتواصلة لتطوير Storage Living Standard، تم تطوير واجهتَي برمجة تطبيقات مفيدتَين إلى StorageManager التي تظهر للمتصفحات navigator.storage مثل العديد من واجهات برمجة تطبيقات الويب الحديثة الأخرى، navigator.storage لا يتوفر إلا على واجهات برمجة التطبيقات الآمنة (يتم عرضها عبر HTTPS أو مضيف محلي).

في العام الماضي، قدمنا navigator.storage.persist() التي تسمح لتطبيق الويب لديك بطلب تخزين مساحة التخزين إعفاؤها من عملية التنظيف التلقائي.

ويتم الآن ضمها باستخدام الطريقة navigator.storage.estimate()، التي تعمل بديل حديث لـ navigator.webkitTemporaryStorage.queryUsageAndQuota(). تعرض الدالة estimate() معلومات مماثلة، ولكنها تعرض قائمة على الوعود وهو ما يتوافق مع واجهات برمجة التطبيقات الحديثة غير المتزامنة الأخرى. الوعد بأن تتم معالجة إرجاع الدالة estimate() باستخدام كائن يحتوي على سمتَين: usage، يمثل عدد وحدات البايت المستخدمة حاليًا، وquota، الذي يمثل الحد الأقصى لوحدات البايت التي يمكن تخزينها بواسطة المصدر. (ومثل أي شيء آخر متعلق بالتخزين، يتم تطبيق الحصة على مستوى origin.)

إذا حاول أحد تطبيقات الويب التخزين — باستخدام، على سبيل المثال، IndexedDB أو Cache Storage API: هي بيانات كبيرة بما يكفي لنقل مصدر معيّن إلى الحصة المتاحة، سيفشل الطلب QuotaExceededError .

تقديرات مساحة التخزين

تعتمد كيفية استخدام estimate() بالضبط على نوع البيانات التي يحتاج تطبيقك إليها. المتجر. على سبيل المثال، يمكنك تعديل عنصر تحكّم في واجهتك للسماح للمستخدمين معرفة حجم المساحة المستخدمة بعد اكتمال كل عملية تخزين. ومن المفترض أن توفر بعد ذلك واجهة تسمح للمستخدمين بتنظيف البيانات يدويًا لم يعد هناك حاجة إليها. يمكنك كتابة التعليمات البرمجية على طول سطور:

// For a primer on async/await, see
// https://developers.google.com/web/fundamentals/getting-started/primers/async-functions
async function storeDataAndUpdateUI(dataUrl) {
  // Pro-tip: The Cache Storage API is available outside of service workers!
  // See https://googlechrome.github.io/samples/service-worker/window-caches/
  const cache = await caches.open('data-cache');
  await cache.add(dataUrl);

  if ('storage' in navigator && 'estimate' in navigator.storage) {
    const {usage, quota} = await navigator.storage.estimate();
    const percentUsed = Math.round(usage / quota * 100);
    const usageInMib = Math.round(usage / (1024 * 1024));
    const quotaInMib = Math.round(quota / (1024 * 1024));

    const details = `${usageInMib} out of ${quotaInMib} MiB used (${percentUsed}%)`;

    // This assumes there's a <span id="storageEstimate"> or similar on the page.
    document.querySelector('#storageEstimate').innerText = details;
  }
}

ما مدى دقة التقدير؟

ومن الصعب أن تفوِّت حقيقة أن البيانات التي تحصل عليها من الدالة تقديرًا للمساحة التي يستخدمها الأصل. إنه هناك مباشرةً في الدالة اسم! ليس الغرض من القيم usage أو quota أن تكون مستقرة، ولذلك ننصحك بمراعاة ما يلي:

• يعكس usage عدد وحدات البايت التي يستخدمها مصدر معيّن بشكل فعّال نفس المصدر التي قد تتأثر بدورها بأساليب الضغط الداخلية وحجرات التخصيص ذات الحجم الثابت التي قد تتضمن مساحة غير مُستخدَمة من "tombstone" السجلّات التي قد يتم إنشاؤها مؤقتًا بعد الحذف. لمنع التسرّب من معلومات الحجم الدقيقة، والمصادر المشتركة، المصادر غير الواضحة قد تساهم القيم المحفوظة محليًا في زيادة وحدات بايت المساحة المتروكة في إجمالي usage.
• يعكس quota مقدار المساحة المحجوزة حاليًا للمصدر. تشير رسالة الأشكال البيانية على بعض العوامل الثابتة مثل حجم التخزين الكلي، ولكن أيضًا عدد العوامل التي يُحتمَل أن تكون متقلّبة، بما في ذلك حجم مساحة التخزين غير مستخدمة حاليًا. ولذلك مثلما الحال مع التطبيقات الأخرى على الجهاز، تكتب أو تحذف البيانات، ومقدار المساحة التي يرغب المتصفح في تخصيصها للويب من المحتمل أن يتغير مصدر التطبيق.

العرض: اكتشاف الميزات والإجراءات الاحتياطية

يتم تفعيل estimate() تلقائيًا بدءًا من إصدار Chrome 61. Firefox هو سنجري تجارب على "navigator.storage"، ولكن اعتبارًا من آب (أغسطس) 2017، لم يتم مفعَّلة تلقائيًا عليك إجراء ما يلي: تفعيل خيار "dom.storageManager.enabled" المفضّل من أجل اختباره.

عند استخدام وظائف غير متوافقة بعد في جميع المتصفحات، اكتشاف الميزات أمرًا لا بد منه. يمكنك الجمع بين اكتشاف الميزات برنامج تضمين مستند إلى الوعد، بالإضافة إلى navigator.webkitTemporaryStorage الأقدم لتوفير واجهة متسقة على غرار:

function storageEstimateWrapper() {
  if ('storage' in navigator && 'estimate' in navigator.storage) {
    // We've got the real thing! Return its response.
    return navigator.storage.estimate();
  }

  if ('webkitTemporaryStorage' in navigator &&
      'queryUsageAndQuota' in navigator.webkitTemporaryStorage) {
    // Return a promise-based wrapper that will follow the expected interface.
    return new Promise(function(resolve, reject) {
      navigator.webkitTemporaryStorage.queryUsageAndQuota(
        function(usage, quota) {resolve({usage: usage, quota: quota})},
        reject
      );
    });
  }

  // If we can't estimate the values, return a Promise that resolves with NaN.
  return Promise.resolve({usage: NaN, quota: NaN});
}