🧝🏻 👩🏿‍🎤 ⛵️ تخزين الويب 🐾 🔕 🐟

يوم جيد يا اصدقاء.

أقدم لكم ترجمة مقال "التخزين للويب" بقلم بيت ليباج.

هناك العديد من التقنيات لتخزين البيانات في المتصفح. أيهما أفضل؟

قد يكون الاتصال بالإنترنت ضعيفًا أو حتى غائبًا في أماكن معينة. لذلك ، يعد الدعم في وضع عدم الاتصال أحد الميزات الرئيسية لتطبيقات الويب التقدمية . حتى مع الاتصال عالي السرعة ، من الحكمة استخدام التخزين المؤقت وتقنيات أخرى لتحسين تجربة المستخدم. هناك عدة طرق لحفظ الملفات (HTML و JavaScript و CSS والصور وما إلى ذلك) والبيانات (بيانات المستخدم والمقالات الإخبارية وما إلى ذلك). ولكن ما هو الحل الأفضل للاختيار؟ وكيف تضمن متانتها؟

ماذا تستخدم؟

يمكنني أن أنصح بما يلي:

بالنسبة إلى موارد الشبكة اللازمة للتطبيق للعمل وعرض المحتوى ، استخدم Cache Storage API (جزء من عمال الخدمة ).
بالنسبة للبيانات الأخرى ، استخدم IndexedDB (مع التفاف من الوعود ).

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

ماذا عن الآليات الأخرى؟

يحتوي المتصفح أيضًا على آليات تخزين البيانات الأخرى ، ولكن لها قيود معينة ويمكن أن تؤدي إلى مشاكل في الأداء.

SessionStorage . , , , IndexedDB. , , . 5 ( ), - -.
LocalStorage . 5 ( ), - -.
Cookies . HTTP-, . , -, .
File System API FileWriter API . , , , Chrome.
Native File System API . . .
WebSQL , IndexedDB. . W3C 2010 .
Application Cache , - Cache API. .

?

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

يتيح لك Chrome استخدام ما يصل إلى 60٪ من مساحة القرص. يمكنك استخدام StorageManager API لتحديد الحد (الحصة).
يمكن لـ Internet Explorer 10 والإصدارات الأحدث تخزين ما يصل إلى 250 ميغابايت من البيانات.
يتيح لك Firefox تخزين ما يصل إلى 2 غيغابايت من البيانات. يمكنك استخدام StorageManager API لتحديد الحد.
يتيح لك Safari (سطح المكتب والجوّال) تخزين ما يصل إلى 1 غيغابايت من البيانات. عند بلوغ الحد ، يطلب Safari من المستخدم الإذن لزيادة الحصة بمقدار 200 ميغابايت.

في الماضي ، عندما تم الوصول إلى حد التخزين ، طلبت المستعرضات إذن المستخدم لزيادة حجم الذاكرة. على سبيل المثال ، عند الوصول إلى حد 50 ميجا بايت ، طلب المتصفح إذن المستخدم لزيادة الحصة إلى 100 ميجا بايت ، وهكذا كل 50 ميجا بايت.

اليوم ، لا تفعل معظم المتصفحات ، مما يزيد تلقائيًا من مساحة التخزين داخل الحصة. الاستثناء هو Safari ، الذي ، عند الوصول إلى 750 ميغابايت ، يطلب إذن المستخدم لزيادة الحد إلى 1.1 غيغابايت. ستنتهي محاولة تجاوز الحصة.

كيفية التحقق من رصيد الحد؟

لهذا ، في العديد من المتصفحات ، يمكنك استخدام StorageManager API. يعرض إجمالي عدد وحدات البايت المستخدمة من قبل IndexedDB و Cache API ، مما يسمح لك بحساب الباقي.

if(navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate()
  // quota.usage ->   
  // quota.quota ->   
  const percentageUsed = (quota.usage / quota.quota) * 100
  console.log(`  ${ percentageUsed}% `)
  const remaining = quota.quota - quota.usage
  console.log(`   ${remaining} `)
}

يرجى ملاحظة أن StorageManager API غير مدعوم من قبل جميع المتصفحات. ومع ذلك ، حتى إذا كان مدعومًا ، يجب توفير معالج الأخطاء. في بعض الحالات ، قد تتجاوز الحصة السعة التخزينية الفعلية.

تفتيش

أثناء التطوير ، يمكنك استخدام أدوات المتصفح لتتبع حالة المستودعات المختلفة وتنظيفها.

أثناء العمل على هذه المقالة ، كتبت هذه الأداة البسيطة للاختبار السريع لقدرات التخزين. هذه طريقة سريعة وسهلة لتجربة آليات التخزين المختلفة ومعرفة ما يحدث عند تجاوز الحصة.

كيف تعالج الأخطاء؟

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

يقوم IndexedDB و Cache API برمي حصة DOMErrorExceededError عند تجاوز الحصة.

إندسيب

عند بلوغ الحد ، ستفشل محاولة كتابة البيانات إلى IndexedDB. سيتم استدعاء طريقة onabort () مع الحدث كوسيطة. سيحتوي الحدث على DOMException في خاصية الخطأ. سيؤدي التحقق من اسم الخطأ إلى إرجاع QuotaExceededError.

const transaction = idb.transaction(['entries'], 'readwrite')
transaction.onabort = function(event) {
    const error = event.target.error // DOMException
    if(error.name === 'QuotaExceededError') {
        // ...
    }
}

واجهة برمجة تطبيقات ذاكرة التخزين المؤقت

سيتم رفض محاولة كتابة البيانات إلى Cache API عند الوصول إلى الحد الأقصى باستخدام QuotaExceededError DOMException.

try {
    const cache = await caches.open('my-cache')
    await cache.add(new Request('/sample1.jpg'))
} catch (error) {
    if(error.name = 'QuotaExceededError') {
        // ...
    }
}

كيف يعمل تنظيف التخزين؟

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

بشكل افتراضي ، يتم تصنيف مخازن الويب (IndexedDB و Cache API وما إلى ذلك) على أنها قائمة بذاتها ، مما يعني أنه إذا لم يتم تثبيت التحكم اليدوي ، يمكن للمتصفح مسح التخزين بشكل مستقل في ظروف معينة ، على سبيل المثال ، عند التعبئة.

شروط تنظيف التخزين هي كما يلي:

عند امتلاء مساحة التخزين ، يحذف Chrome البيانات ، بدءًا من الأقل طلبًا (الأقدم في وقت الاستخدام) ، حتى يتم حل مشكلة التدفق الزائد.
لا يقوم IE 10+ بمسح التخزين ، ولكنه يمنع القدرة على كتابة البيانات.
يقوم فايرفوكس بنفس عمل Chrome.
لم يقم Safari بمسح الخزنة من قبل ، ولكن تمت إضافة فترة الاحتفاظ بالبيانات لمدة سبعة أيام مؤخرًا.

بدءًا من iOS و iPad 13.4 و Safari 13.1 على macOS ، هناك فترة الاحتفاظ بالبيانات لمدة سبعة أيام. هذا يعني أنه إذا لم يصل المستخدم إلى البيانات في غضون سبعة أيام ، فسيتم حذفها. لا تنطبق هذه السياسة على التطبيقات المضافة إلى الشاشة الرئيسية.

المكافأة: الوعد التفاف على مؤشر مفهرس

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

استنتاج

غرقت أوقات التخزين المحدود وطلبات إذن المستخدم لزيادة الحد إلى النسيان. يمكن للمواقع تخزين جميع الموارد والبيانات التي تحتاجها للعمل بشكل فعال. باستخدام واجهة برمجة تطبيقات StorageManager ، يمكنك تحديد مقدار الذاكرة المستخدمة ومقدار المساحة المتبقية. وبوضع التخزين في وضع التحكم اليدوي ، يمكنك حماية البيانات من الحذف.

ملحوظة لكل.:

هنا يمكنك أن ترى كيفية كتابة تطبيق للملاحظات باستخدام idb.
هنا يمكنك أن ترى كيف يعمل عمال الخدمة.

شكرا لك على وقتك. آمل أن يكون قد تم إنفاقه بشكل جيد.

تخزين الويب