تتمثل إحدى ميزات مشغّلي الخدمات في القدرة على حفظ مجموعة من الملفات في ذاكرة التخزين المؤقت عندما يكون مشغّل الخدمات مثبّتًا. يُشار إلى ذلك غالبًا باسم "التخزين المؤقت"، نظرًا لأنك تخزن المحتوى مؤقتًا قبل استخدام عامل الخدمة.
والسبب الرئيسي للقيام بذلك هو أنّه يمنح المطورين إمكانية التحكم في ذاكرة التخزين المؤقت، بمعنى أنه يمكنهم تحديد وقت ومدة تخزين الملف فضلًا عن عرضه للمتصفح دون الانتقال إلى الشبكة، وهو ما يعني أنه يمكن استخدامه لإنشاء تطبيقات ويب تعمل بلا اتصال بالإنترنت.
يتطلب Workbox الكثير من الأعباء الشاقة من التخزين المؤقت من خلال تبسيط واجهة برمجة التطبيقات وضمان تنزيل الأصول بكفاءة.
طريقة عمل التخزين المؤقت لمربعات العمل
عند تحميل تطبيق ويب للمرة الأولى، سيفحص workbox-precaching
كل مواد العرض التي تريد تنزيلها، وسيزيل أي نُسخ مكررة، واربط أحداث مشغّلي الخدمات ذات الصلة لتنزيل مواد العرض وتخزينها. إنّ عناوين URL التي تتضمن حاليًا معلومات عن الإصدارات (مثل تجزئة المحتوى) يتم استخدامها كمفاتيح ذاكرة تخزين مؤقت بدون إجراء أي تعديل آخر. تشتمل عناوين URL التي لا تتضمّن معلومات حول تحديد الإصدارات على مَعلمة طلب بحث إضافية لعنوان URL مُلحقة بمفتاح ذاكرة التخزين المؤقت الخاص بها والتي تمثّل تجزئة للمحتوى الذي ينشئه Workbox في وقت الإصدار.
ينفّذ "workbox-precaching
" كل هذه الإجراءات خلال
فعالية install
التي ينظّمها مشغّل الخدمات.
عندما يعيد المستخدم الانتقال إلى تطبيق الويب لاحقًا ويكون لديك عامل خدمات جديد يحتوي
على مواد عرض مختلفة مخزَّنة مؤقتًا بشكل مسبق، سيفحص "workbox-precaching
" القائمة الجديدة
ويحدّد مواد العرض الجديدة بالكامل وأي مواد العرض الحالية
التي تحتاج إلى التعديل، استنادًا إلى المراجعات التي يجريها. ستتم إضافة أي مواد عرض جديدة أو مراجعات معدّلة إلى ذاكرة التخزين المؤقت أثناء حدث install
لعامل الخدمة الجديد.
لن يتم استخدام مشغّل الخدمات الجديد هذا للردّ على الطلبات إلا بعد بدء حدث activate
. في حدث activate
، سيتحقق workbox-precaching
من أي مواد عرض مخزَّنة مؤقتًا لم تعُد متاحة في
قائمة عناوين URL الحالية، وسيزيلها من
ذاكرة التخزين المؤقت.
سينفّذ workbox-precaching
هذه الخطوات في كل مرة يتم فيها تثبيت مشغّل الخدمات وتفعيله،
لضمان حصول المستخدم على أحدث الأصول، وأنّه ينزّل
الملفات التي تم تغييرها فقط.
عرض استجابات التخزين المؤقت مسبقًا
سيؤدي طلب
precacheAndRoute()
أو
addRoute()
إلى إنشاء مسار يطابق
طلبات عناوين URL المخزّنة مسبقًا.
استراتيجية الاستجابة المستخدمة في هذا المسار هي ذاكرة التخزين المؤقت أولاً: سيتم استخدام الاستجابة المخزّنة مؤقتًا، ما لم تكن تلك الاستجابة المخزّنة مؤقتًا غير متوفّرة (بسبب خطأ غير متوقَّع)، وفي هذه الحالة سيتم استخدام استجابة الشبكة بدلاً من ذلك.
الترتيب الذي تتصل به precacheAndRoute()
أو addRoute()
مهم.
عادةً ما تحتاج إلى الاتصال به في وقت مبكر في ملف مشغّل الخدمات، قبل
تسجيل أي مسارات إضافية باستخدام
registerRoute()
.
إذا اتصلت بـ registerRoute()
أولاً، وكان هذا المسار يطابق طلبًا واردًا، فسيتم استخدام أي استراتيجية حدّدتها في ذلك المسار الإضافي للاستجابة، بدلاً من استراتيجية ذاكرة التخزين المؤقت أولاً التي يستخدمها workbox-precaching
.
شرح قائمة التخزين المؤقت
يتوقع workbox-precaching
مصفوفة من العناصر باستخدام السمة url
وrevision
. يُشار أحيانًا إلى هذه الصفيفة باسم بيان التخزين المؤقت المسبق:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute([
{url: '/index.html', revision: '383676'},
{url: '/styles/app.0c9a31.css', revision: null},
{url: '/scripts/app.0d5770.js', revision: null},
// ... other entries ...
]);
تشير هذه القائمة إلى مجموعة من عناوين URL، يحتوي كل منها على معلومات "المراجعة" الخاصة به.
بالنسبة إلى الكائن الثاني والثالث في المثال أعلاه، تم ضبط السمة revision
على null
. ويرجع ذلك إلى أنّ معلومات المراجعة مضمّنة في عنوان URL نفسه، ويُعتبر هذا بشكل عام من أفضل الممارسات بالنسبة إلى مواد العرض الثابتة.
يضبط الكائن الأول (/index.html
) بشكل صريح سمة مراجعة، وهي تجزئة يتم إنشاؤها تلقائيًا لمحتويات الملف. وعلى عكس موارد JavaScript وCSS، لا يمكن لملفات HTML عمومًا تضمين معلومات المراجعة في عناوين URL الخاصة بها، وإلا فإن الروابط المؤدية إلى هذه الملفات على الويب قد تتعطّل في أي وقت يتغيّر فيه محتوى الصفحة.
من خلال تمرير خاصية المراجعة إلى precacheAndRoute()
، يمكن لـ Workbox معرفة وقت تغيير الملف وتحديثه وفقًا لذلك.
يتضمّن Workbox أدوات للمساعدة في إنشاء هذه القائمة:
workbox-build
: هذه حزمة عقدة يمكن استخدامها في مهمة gulp أو كنص برمجي للتشغيل npm.workbox-webpack-plugin
: يمكن لمستخدمي حزمة الويب استخدام هذا المكوّن الإضافي.workbox-cli
: يمكن استخدام واجهة سطر الأوامر أيضًا لإنشاء قائمة الأصول وإضافتها إلى مشغّل الخدمات.
الطلبات الواردة للملفات المخزنة مؤقتًا بشكل مسبق
سينفّذ workbox-precaching
عملية غير تقليدية لمعالجة طلبات الشبكة الواردة لمحاولة مطابقة الملفات المخزّنة مؤقتًا مسبقًا. يستوعب ذلك الممارسات الشائعة على الويب.
على سبيل المثال، عادةً ما يتم قبول طلب /
من خلال الملف المتوفّر على
/index.html
.
يمكنك الاطّلاع أدناه على قائمة بعمليات التلاعب التي ينفّذها workbox-precaching
تلقائيًا،
وكيفية تغيير ذلك السلوك.
تجاهُل مَعلمات عناوين URL
يمكن تعديل الطلبات التي تتضمّن معلَمات بحث لإزالة قيم معيّنة أو إزالة كل القيم.
تتمّ تلقائيًا إزالة مَعلمات البحث التي تبدأ بـ utm_
أو التي تتطابق تمامًا مع fbclid
،
ما يعني أنّه سيتم تنفيذ طلب /about.html?utm_campaign=abcd
من خلال إدخال مخزَّن مؤقتًا بشكل مسبق لـ /about.html
.
يمكنك تجاهل مجموعة مختلفة من مَعلمات البحث باستخدام ignoreURLParametersMatching
:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(
[
{url: '/index.html', revision: '383676'},
{url: '/styles/app.0c9a31.css', revision: null},
{url: '/scripts/app.0d5770.js', revision: null},
],
{
// Ignore all URL parameters.
ignoreURLParametersMatching: [/.*/],
}
);
فهرس الدليل
ستتم تلقائيًا مطابقة الطلبات التي تنتهي بـ /
مع الإدخالات التي أضيفت index.html
في نهايتها. يعني هذا أنّه يمكن تلقائيًا معالجة أي طلب وارد لـ /
باستخدام الإدخال /index.html
المُخزَّن مؤقتًا بشكل مسبق.
ويمكنك تعديل ذلك إلى شيء آخر، أو إيقافه تمامًا، من خلال ضبط directoryIndex
:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(
[
{url: '/index.html', revision: '383676'},
{url: '/styles/app.0c9a31.css', revision: null},
{url: '/scripts/app.0d5770.js', revision: null},
],
{
directoryIndex: null,
}
);
محو عناوين URL
وإذا لم يتطابق الطلب مع ذاكرة التخزين المؤقت المسبق، سنضيف .html
إلى نهايته لتوفير عناوين URL "النظيفة" (المعروفة أيضًا باسم عناوين URL "pretty"). يعني هذا أنّه ستتم معالجة طلب مثل /about
من خلال الإدخال المخزن مؤقتًا بشكل مسبق لـ /about.html
.
يمكنك إيقاف هذا السلوك من خلال ضبط سياسة cleanUrls
:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
cleanUrls: false,
});
أساليب معالجة مخصّصة
إذا أردت تحديد تطابقات مخصّصة من الطلبات الواردة إلى مواد العرض المخزّنة مؤقتًا مسبقًا،
يمكنك استخدام الخيار urlManipulation
. يجب أن يكون هذا استدعاء يعرض
مجموعة من التطابقات المحتملة.
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(
[
{url: '/index.html', revision: '383676'},
{url: '/styles/app.0c9a31.css', revision: null},
{url: '/scripts/app.0d5770.js', revision: null},
],
{
urlManipulation: ({url}) => {
// Your logic goes here...
return [alteredUrlOption1, alteredUrlOption2];
},
}
);
الاستخدام المتقدّم
استخدام PrecacheController مباشرةً
ستعمل ميزة "workbox-precaching
" تلقائيًا على إعداد أداتَي الاستماع "install
" و"activate
" نيابةً عنك.
بالنسبة إلى المطوّرين الذين على دراية بمقدّمي الخدمات، قد لا يكون هذا الإجراء مرغوبًا إذا كانوا بحاجة إلى المزيد من التحكّم.
وبدلاً من استخدام عملية التصدير التلقائية، يمكنك استخدام PrecacheController
مباشرةً لإضافة عناصر إلى ذاكرة التخزين المؤقت المسبق وتحديد وقت تثبيت مواد العرض هذه ووقت إزالة البيانات.
import {PrecacheController} from 'workbox-precaching';
const precacheController = new PrecacheController();
precacheController.addToCacheList([
{url: '/styles/example-1.abcd.css', revision: null},
{url: '/styles/example-2.1234.css', revision: null},
{url: '/scripts/example-1.abcd.js', revision: null},
{url: '/scripts/example-2.1234.js', revision: null},
]);
precacheController.addToCacheList([{
url: '/index.html',
revision: 'abcd',
}, {
url: '/about.html',
revision: '1234',
}]);
self.addEventListener('install', (event) => {
// Passing in event is required in Workbox v6+
event.waitUntil(precacheController.install(event));
});
self.addEventListener('activate', (event) => {
// Passing in event is required in Workbox v6+
event.waitUntil(precacheController.activate(event));
});
self.addEventListener('fetch', (event) => {
const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
event.respondWith(caches.match(cacheKey).then(...));
});
قراءة مواد العرض المخزنة مؤقتًا بشكل مباشر
وقد تحتاج أحيانًا إلى قراءة مادة عرض مخزَّنة مؤقتًا بشكل مسبق مباشرةً خارج سياق التوجيه الذي يمكن أن ينفذه workbox-precaching
تلقائيًا.
على سبيل المثال، قد ترغب في التخزين المؤقت لنماذج HTML الجزئية التي تحتاج بعد ذلك إلى استردادها واستخدامها عند إنشاء استجابة كاملة.
بشكل عام، يمكنك استخدام واجهة برمجة التطبيقات Cache Storage API للحصول على عناصر Response
المخزّنة مؤقتًا، ولكن هناك مشكلة واحدة: قد يحتوي مفتاح ذاكرة التخزين المؤقت لعنوان URL الذي تحتاج إلى استخدامه عند استدعاء cache.match()
على معلَمة تحديد إصدارات ينشئها workbox-precaching
تلقائيًا ويحافظ عليها.
للحصول على مفتاح ذاكرة التخزين المؤقت الصحيح، يمكنك استدعاء
getCacheKeyForURL()
،
وتمرير عنوان URL الأصلي، ثم استخدام النتيجة لإجراء
cache.match()
على ذاكرة التخزين المؤقت المناسبة.
import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';
const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));
بدلاً من ذلك، إذا كان كل ما تحتاجه هو كائن Response
المخزن مؤقتًا بشكل مسبق، يمكنك استدعاء
matchPrecache()
،
الذي سيستخدم تلقائيًا مفتاح ذاكرة التخزين المؤقت الصحيح والبحث في ذاكرة التخزين المؤقت
الصحيحة:
import {matchPrecache} from 'workbox-precaching';
const response = await matchPrecache('/precached-file.html');
تنظيف ذاكرة التخزين المؤقت القديمة
تحتفظ معظم إصدارات Workbox بالتنسيق نفسه لتخزين البيانات المخزنة مؤقتًا ويمكن استخدام ذاكرة التخزين المؤقت المسبق التي تم إنشاؤها بواسطة الإصدارات الأقدم من Workbox كما هي في الإصدارات الأحدث. ومع ذلك، نادرًا ما يحدث تغيير يؤدي إلى حدوث تغيير في التخزين المؤقت المسبق يتطلب من المستخدمين الحاليين إعادة تنزيل كل شيء، والذي يعرض بيانات قديمة (حدث مثل هذا التغيير بين إصداري Workbox v3 وWorkbox v4).
من المفترض ألا تتداخل هذه البيانات القديمة مع العمليات العادية، ولكنها تساهم
في زيادة حصة سعة التخزين الإجمالية، ويمكن أن تكون أكثر ملاءمة للمستخدمين
أن يحذفوها صراحةً. يمكنك إجراء ذلك من خلال إضافة cleanupOutdatedCaches()
إلى مشغّل الخدمات أو ضبط cleanupOutdatedCaches: true
إذا كنت تستخدم إحدى أدوات تصميم Workbox لإنشاء مشغّل الخدمات.
استخدام ميزة "تكامل المورد الفرعي"
قد يرغب بعض المطوّرين في الحصول على الضمانات الإضافية التي يقدّمها فرض سلامة الموارد الفرعية عند استرداد عناوين URL المخزّنة مسبقًا من الشبكة.
يمكن إضافة خاصية إضافية اختيارية تُسمى integrity
إلى أي إدخال في بيان التخزين المؤقت المسبق. وفي حال توفيرها، سيتم استخدامها باعتبارها قيمة integrity
عند إنشاء Request
المستخدَمة لتعبئة ذاكرة التخزين المؤقت. وإذا كان هناك عدم تطابق،
فإن عملية التخزين المؤقت ستفشل.
إن تحديد إدخالات بيان التخزين المؤقت المسبق التي يجب أن تحتوي على خصائص integrity
،
واكتشاف القيم المناسبة التي يجب استخدامها، يقع خارج نطاق أدوات التصميم في Workspace. بدلاً من ذلك، على المطوّرين الذين يريدون تفعيل هذه الوظيفة تعديل بيان التخزين المؤقت الذي ينشئه تطبيق Workbox لإضافة المعلومات المناسبة بأنفسهم. يمكن أن يساعد الخيار manifestTransform
في إعدادات
أدوات إنشاء Workbox في ما يلي:
const ssri = require('ssri');
const integrityManifestTransform = (originalManifest, compilation) => {
const warnings = [];
const manifest = originalManifest.map(entry => {
// If some criteria match:
if (entry.url.startsWith('...')) {
// This has to be a synchronous function call, for example:
// compilation will be set when using workbox-webpack-plugin.
// When using workbox-build directly, you can read the file's
// contents from disk using, e.g., the fs module.
const asset = compilation.getAsset(entry.url);
entry.integrity = ssri.fromData(asset.source.source()).toString();
// Push a message to warnings if needed.
}
return entry;
});
return {warnings, manifest};
};
// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.
الأنواع
CleanupResult
أماكن إقامة
-
deletedCacheRequests
سلسلة[]
InstallResult
أماكن إقامة
-
notUpdatedURLs
سلسلة[]
-
updatedURLs
سلسلة[]
PrecacheController
يتم إجراء تخزين مسبق فعّال للأصول.
أماكن إقامة
-
الدالة الإنشائية
void
أنشئ وحدة تحكّم جديدة في PrecacheController.
تبدو الدالة
constructor
على النحو التالي:(options?: PrecacheControllerOptions) => {...}
-
الخيارات
PrecacheControllerOptions اختياري
-
returns
-
-
الألعاب الاستراتيجية
الاستراتيجية
-
تفعيل
void
لحذف مواد العرض التي لم تعُد متوفرة في بيان ذاكرة التخزين المؤقت الحالي عليك استدعاء هذه الطريقة من حدث تفعيل مشغّل الخدمات.
ملاحظة: تستدعي هذه الطريقة
event.waitUntil()
من أجلك، لذا لن تحتاج إلى استدعائها بنفسك في معالِجات الأحداث.تبدو الدالة
activate
على النحو التالي:(event: ExtendableEvent) => {...}
-
event
ExtendableEvent
-
returns
Promise<CleanupResult>
-
-
addToCacheList
void
ستضيف هذه الطريقة عناصر إلى قائمة التخزين المؤقت المسبق، وتزيل التكرارات والتأكد من صلاحية المعلومات.
تبدو الدالة
addToCacheList
على النحو التالي:(entries: (string | PrecacheEntry)[]) => {...}
-
الإدخالات
(سلسلة | PrecacheEntry)[]
مصفوفة من الإدخالات المطلوب تخزينها مؤقتًا
-
-
createHandlerBoundToURL
void
تعرض دالة تبحث عن
url
في ذاكرة التخزين المؤقت (مع أخذ معلومات مراجعة الحساب في الاعتبار)، وتعرضResponse
المقابلة.تبدو الدالة
createHandlerBoundToURL
على النحو التالي:(url: string) => {...}
-
url
سلسلة
تمثّل هذه السمة عنوان URL المخزن مسبقًا الذي سيتم استخدامه للبحث عن
Response
.
-
returns
-
-
getCacheKeyForURL
void
تعرض مفتاح ذاكرة التخزين المؤقت المستخدَم لتخزين عنوان URL معيّن. إذا تم تغيير إصدار عنوان URL هذا، مثل `/index.html'، فسيكون مفتاح ذاكرة التخزين المؤقت هو عنوان URL الأصلي مع إلحاق معلمة بحث به.
تبدو الدالة
getCacheKeyForURL
على النحو التالي:(url: string) => {...}
-
url
سلسلة
عنوان URL الخاص به الذي تريد البحث عن مفتاح ذاكرة التخزين المؤقت الخاص به
-
returns
سلسلة
هو عنوان URL ذي إصدارة يتوافق مع مفتاح ذاكرة التخزين المؤقت لعنوان URL الأصلي، أو غير محدّد إذا لم يكن عنوان URL مخزَّنًا مؤقتًا بشكل مسبق.
-
-
getCachedURLs
void
تعرض قائمة بجميع عناوين URL التي خزنها عامل الخدمة الحالي في ذاكرة التخزين المؤقت.
تبدو الدالة
getCachedURLs
على النحو التالي:() => {...}
-
returns
سلسلة[]
عناوين URL المخزنة مؤقتًا بشكل مسبق.
-
-
getIntegrityForCacheKey
void
تبدو الدالة
getIntegrityForCacheKey
على النحو التالي:(cacheKey: string) => {...}
-
cacheKey
سلسلة
-
returns
سلسلة
سلامة المورد الفرعي المرتبط بمفتاح ذاكرة التخزين المؤقت، أو غير محددة إذا لم يتم تعيينها.
-
-
getURLsToCacheKeys
void
تعرض تعيين عنوان URL المخزن مؤقتًا لمفتاح ذاكرة التخزين المؤقت المقابل، مع مراعاة معلومات المراجعة الخاصة بعنوان URL.
تبدو الدالة
getURLsToCacheKeys
على النحو التالي:() => {...}
-
returns
خريطة<stringstring>
عنوان URL لتخزين المفتاح مؤقتًا.
-
-
عملية تثبيت
void
يتم تخزين مواد العرض الجديدة والمحدّثة مؤقتًا في ذاكرة التخزين المؤقت. عليك استدعاء هذه الطريقة من حدث تثبيت مشغّل الخدمات لمشغّل الخدمات.
ملاحظة: تستدعي هذه الطريقة
event.waitUntil()
من أجلك، لذا لن تحتاج إلى استدعائها بنفسك في معالِجات الأحداث.تبدو الدالة
install
على النحو التالي:(event: ExtendableEvent) => {...}
-
event
ExtendableEvent
-
returns
Promise<InstallResult>
-
-
matchPrecache
void
يُعد هذا بديلاً أساسيًا عن نطاق
cache.match()
مع الاختلافات التالية:- وهو يعرف ما هو اسم ذاكرة التخزين المؤقت، ويتحقق فقط من ذلك.
- تسمح لك هذه الطريقة بتمرير عنوان URL "أصلي" بدون معلمات تحديد الإصدارات، وستبحث تلقائيًا عن مفتاح ذاكرة التخزين المؤقت الصحيح للمراجعة النشطة حاليًا لعنوان URL هذا.
على سبيل المثال: سيعثر
matchPrecache('index.html')
على الاستجابة الصحيحة المخزَّنة مؤقتًا لمشغِّل الخدمات النشط حاليًا، حتى إذا كان مفتاح ذاكرة التخزين المؤقت الفعلي هو'/index.html?__WB_REVISION__=1234abcd'
.تبدو الدالة
matchPrecache
على النحو التالي:(request: string | Request) => {...}
-
طلب
سلسلة | طلب
المفتاح (بدون معلمات المراجعة) للبحث في التخزين المؤقت المسبق.
-
returns
وعد<الرد>
-
التخزين المؤقت المسبق
void
إضافة عناصر إلى قائمة التخزين المؤقت، وإزالة أي تكرارات، وتخزين الملفات في ذاكرة التخزين المؤقت" عندما يثبّت عامل الخدمة.
يمكن استدعاء هذه الطريقة عدة مرات.
تبدو الدالة
precache
على النحو التالي:(entries: (string | PrecacheEntry)[]) => {...}
-
الإدخالات
(سلسلة | PrecacheEntry)[]
-
PrecacheEntry
أماكن إقامة
-
صحة البيانات
سلسلة اختيارية
-
مراجعة
سلسلة اختيارية
-
url
سلسلة
PrecacheFallbackPlugin
تتيح لك علامة PrecacheFallbackPlugin
تحديد استجابة "احتياطي بلا اتصال بالإنترنت"
لاستخدامها عندما يتعذّر على استراتيجية معيّنة إنشاء رد.
ويتم ذلك عن طريق اعتراض استدعاء المكوّن الإضافي handlerDidError
وعرض استجابة مخزّنة مؤقتًا بشكل مسبق، مع أخذ مَعلمة المراجعة المتوقّعة في الحساب تلقائيًا.
ما لم يتم تمرير مثيل PrecacheController
صراحةً إلى الدالة الإنشائية،
سيتم استخدام المثيل التلقائي. بشكل عام، سيستخدم معظم
المطورين في النهاية الإعداد الافتراضي.
أماكن إقامة
-
الدالة الإنشائية
void
تنشئ هذه الدالة PrecacheFallbackPlugin جديدة مع عنوان URL الاحتياطي المرتبط.
تبدو الدالة
constructor
على النحو التالي:(config: object) => {...}
-
config
عنصر
-
fallbackURL
سلسلة
عنوان URL تم تخزينه مؤقتًا لاستخدامه كعنصر احتياطي إذا لم تتمكن الإستراتيجية ذات الصلة من إنشاء رد.
-
precacheController
PrecacheController اختياري
-
-
returns
-
PrecacheRoute
هي فئة فرعية من workbox-routing.Route
تأخذ مثيل workbox-precaching.PrecacheController
وتستخدمها لمطابقة الطلبات الواردة والتعامل مع عمليات جلب الردود من ذاكرة التخزين المؤقت المسبق.
أماكن إقامة
-
الدالة الإنشائية
void
تبدو الدالة
constructor
على النحو التالي:(precacheController: PrecacheController, options?: PrecacheRouteOptions) => {...}
-
precacheController
مثيل
PrecacheController
يُستخدم لكلٍ من طلبات المطابقة والاستجابة لأحداث الاسترجاع -
الخيارات
PrecacheRouteOptions اختيارية
-
returns
-
-
catchHandler
RouteHandlerObject اختيارية
-
المعالج
-
مطابقة
-
method
HTTPMethod
-
setCatchHandler
void
تبدو الدالة
setCatchHandler
على النحو التالي:(handler: RouteHandler) => {...}
-
المعالج
دالة رد اتصال تقوم بإرجاع حل الوعد إلى استجابة
-
PrecacheRouteOptions
أماكن إقامة
-
cleanURLs
منطقية اختيارية
-
directoryIndex
سلسلة اختيارية
-
ignoreURLParametersMatching
التعبير العادي[] اختياري
-
urlManipulation
urlManipulation اختيارية
PrecacheStrategy
تطبيق workbox-strategies.Strategy
مصمّم خصيصًا للعمل مع workbox-precaching.PrecacheController
لكل من مواد العرض المخزَّنة مؤقتًا وجلبها.
ملاحظة: يتم إنشاء مثيل من هذه الفئة تلقائيًا عند إنشاء PrecacheController
، وليس من الضروري بشكل عام إنشاء ذلك بنفسك.
أماكن إقامة
-
الدالة الإنشائية
void
تبدو الدالة
constructor
على النحو التالي:(options?: PrecacheStrategyOptions) => {...}
-
الخيارات
PrecacheStrategyOptions اختيارية
-
returns
-
-
cacheName
سلسلة
-
fetchOptions
RequestInit اختياري
-
matchOptions
CacheQueryOptions اختياري
-
مكونات إضافية
-
copyRedirectedCacheableResponsesPlugin
-
defaultPrecacheCacheabilityPlugin
-
_aانتظار الإكمال
void
تبدو الدالة
_awaitComplete
على النحو التالي:(responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
responseDone
وعد<الرد>
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
Promise<void>
-
-
_getResponse
void
تبدو الدالة
_getResponse
على النحو التالي:(handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}
-
المعالج
-
طلب
الطلب
-
event
ExtendableEvent
-
returns
وعد<الرد>
-
-
_handleFetch
void
تبدو الدالة
_handleFetch
على النحو التالي:(request: Request, handler: StrategyHandler) => {...}
-
طلب
الطلب
-
المعالج
-
returns
وعد<الرد>
-
-
_handleInstall
void
تبدو الدالة
_handleInstall
على النحو التالي:(request: Request, handler: StrategyHandler) => {...}
-
طلب
الطلب
-
المعالج
-
returns
وعد<الرد>
-
-
اسم الحساب
void
نفِّذ استراتيجية طلب وعرض علامة
Promise
التي ستتم معالجتها باستخدام عنصرResponse
، ما يؤدي إلى استدعاء جميع استدعاءات المكوّنات الإضافية ذات الصلة.عند تسجيل مثيل استراتيجية في Workbox
workbox-routing.Route
، يتم استدعاء هذه الطريقة تلقائيًا عندما يتطابق المسار.ويمكن أيضًا استخدام هذه الطريقة في مستمع
FetchEvent
مستقل من خلال تمريرها إلىevent.respondWith()
.تبدو الدالة
handle
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
وعد<الرد>
-
-
handleAll
void
على غرار
workbox-strategies.Strategy~handle
، ولكن بدلاً من عرض عنصرPromise
يؤدّي إلىResponse
، فإنّه سيعرض مجموعة من الوعود[response, done]
، حيث تساوي القيمة الأولى (response
) ما يعرضهhandle()
، والثاني عبارة عن وعد سيتم حله بعد اكتمال أي وعود تمت إضافتها إلىevent.waitUntil()
كجزء من تنفيذ الاستراتيجية.يمكنك انتظار وعود "
done
" لضمان اكتمال أي جهد إضافي تؤديه الاستراتيجية (عادةً ما يتم تخزين الردود في ذاكرة التخزين المؤقت).تبدو الدالة
handleAll
على النحو التالي:(options: FetchEvent | HandlerCallbackOptions) => {...}
-
الخيارات
FetchEvent | HandlerCallbackOptions
تمثّل هذه السمة
FetchEvent
أو عنصر يتضمّن الخصائص المدرَجة أدناه.
-
returns
[Promise<Response>, Promise<void>]
يَعد صف [Response, Done] الذي يمكن استخدامه لتحديد وقت حل الاستجابة وكذلك الوقت الذي أكمل فيه المعالج جميع عمله.
-
urlManipulation()
workbox-precaching.urlManipulation(
{ url }: object,
)
النوع
الوظيفة
المَعلمات
-
{ عنوان url }
عنصر
-
url
عنوان URL
-
المرتجعات
-
عنوان URL[]
الطُرق
addPlugins()
workbox-precaching.addPlugins(
plugins: WorkboxPlugin[],
)
تعمل هذه السياسة على إضافة مكوّنات إضافية إلى استراتيجية التخزين المُسبَق.
المَعلمات
-
مكونات إضافية
addRoute()
workbox-precaching.addRoute(
options?: PrecacheRouteOptions,
)
أضِف أداة معالجة fetch
إلى مشغّل الخدمات الذي سيستجيب
[طلبات الشبكة]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests
باستخدام مواد عرض مخزَّنة مؤقتًا بشكل مسبق.
طلبات الحصول على مواد العرض غير المخزّنة مؤقتًا بشكل مسبق، لن يتم الردّ على FetchEvent
، ما يؤدي إلى وصول الحدث إلى مستمعي فعاليات fetch
الآخرين.
المَعلمات
-
الخيارات
PrecacheRouteOptions اختيارية
cleanupOutdatedCaches()
workbox-precaching.cleanupOutdatedCaches()
تتم إضافة أداة معالجة حدث activate
لإزالة ذاكرة التخزين المؤقت غير المتوافقة
التي تم إنشاؤها بواسطة الإصدارات الأقدم من Workbox.
createHandlerBoundToURL()
workbox-precaching.createHandlerBoundToURL(
url: string,
)
دالة مساعد تستدعي
PrecacheController#createHandlerBoundToURL
على مثيل
PrecacheController
التلقائي.
إذا كنت تنشئ دالة PrecacheController
الخاصة بك، عليك استدعاء الدالة PrecacheController#createHandlerBoundToURL
على هذا المثال، بدلاً من استخدام هذه الدالة.
المَعلمات
-
url
سلسلة
تمثّل هذه السمة عنوان URL المخزن مسبقًا الذي سيتم استخدامه للبحث عن
Response
.
المرتجعات
getCacheKeyForURL()
workbox-precaching.getCacheKeyForURL(
url: string,
)
تأخذ عنوان URL وتعرض عنوان URL المقابل الذي يمكن استخدامه للبحث عن الإدخال في ذاكرة التخزين المؤقت.
إذا تم توفير عنوان URL نسبي، سيتم استخدام موقع ملف مشغّل الخدمات كقاعدة.
وبالنسبة إلى الإدخالات المخزنة مؤقتًا بشكل مسبق بدون معلومات المراجعة، سيكون مفتاح ذاكرة التخزين المؤقت هو نفسه عنوان URL الأصلي.
بالنسبة إلى الإدخالات المخزنة مؤقتًا بشكل مسبق التي تحتوي على معلومات عن النسخة السابقة، سيكون مفتاح ذاكرة التخزين المؤقت هو عنوان URL الأصلي مع إضافة معلمة طلب بحث يتم استخدامها لتتبع معلومات النسخة السابقة.
المَعلمات
-
url
سلسلة
عنوان URL الذي تريد البحث عن مفتاح ذاكرة التخزين المؤقت الخاص به
المرتجعات
-
سلسلة | غير محددة
مفتاح ذاكرة التخزين المؤقت المتوافق مع عنوان URL هذا.
matchPrecache()
workbox-precaching.matchPrecache(
request: string | Request,
)
دالة مساعد تستدعي
PrecacheController#matchPrecache
على مثيل
PrecacheController
التلقائي.
إذا كنت بصدد إنشاء PrecacheController
الخاصة بك، عليك استدعاء
PrecacheController#matchPrecache
على هذا المثال،
بدلاً من استخدام هذه الدالة.
المَعلمات
-
طلب
سلسلة | طلب
المفتاح (بدون معلمات المراجعة) للبحث في التخزين المؤقت المسبق.
المرتجعات
-
Promise<Response | undefined>
precache()
workbox-precaching.precache(
entries: (string | PrecacheEntry)[],
)
إضافة عناصر إلى قائمة التخزين المؤقت، وإزالة أي تكرارات، وتخزين الملفات في ذاكرة التخزين المؤقت" عندما يثبّت عامل الخدمة.
يمكن استدعاء هذه الطريقة عدة مرات.
ملاحظة: لن تعرض هذه الطريقة أيًا من الملفات المخزَّنة مؤقتًا لك.
وهي تخزن الملفات بشكل مسبق فقط. للرد على طلب شبكة الاتصال، يمكنك الاتصال بـ
workbox-precaching.addRoute
.
إذا كان لديك مصفوفة واحدة من الملفات تريد تخزينها مؤقتًا بشكل مسبق، ما عليك سوى طلب الرمز
workbox-precaching.precacheAndRoute
.
المَعلمات
-
الإدخالات
(سلسلة | PrecacheEntry)[]
precacheAndRoute()
workbox-precaching.precacheAndRoute(
entries: (string | PrecacheEntry)[],
options?: PrecacheRouteOptions,
)
ستضيف هذه الطريقة إدخالات إلى قائمة التخزين المؤقت المسبق وتضيف مسارًا للاستجابة لأحداث الجلب.
هذه طريقة ملائمة يمكن من خلالها استدعاء
workbox-precaching.precache
و
workbox-precaching.addRoute
في مكالمة واحدة.
المَعلمات
-
الإدخالات
(سلسلة | PrecacheEntry)[]
مصفوفة من الإدخالات المطلوب تخزينها مؤقتًا
-
الخيارات
PrecacheRouteOptions اختيارية