توجيه صندوق العمل

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

workbox-routing هي وحدة تسهّل "التوجيه" هذه الطلبات إلى الدوال المختلفة التي تقدم الردود.

كيفية إجراء التوجيه

عندما يتسبب طلب شبكة في حدث جلب عامل الخدمة، workbox-routing الرد على الطلب باستخدام المسارات والمعالجات المتوفرة.

في ما يلي بعض النقاط الأساسية التي يجب أخذها في الاعتبار:

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

• ترتيب تسجيل المسار مهم. في حالة وجود مسارات متعددة المسجل الذي يمكنه معالجة أحد الطلبات، فإن المسار الذي يتم تسجيله أولاً سيتم استخدامهما للرد على الطلب.

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

المطابقة والمناولة في المسارات

"المسار" في مربع العمل ليس أكثر من دالتين: دالة "المطابقة" الوظيفة لتحديد ما إذا كان المسار يجب أن يتطابق مع طلب و"طلب معالجة" الوظيفة، الذي ينبغي أن يتعامل مع الطلب ويستجيب بالرد.

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

حاسمة مطابقة دالة معاودة الاتصال تم تجاوز ExtendableEvent، Request، و عنصرURL يمكنك تطابق من خلال عرض قيمة حقيقة. لمثال بسيط، يمكنك المطابقة مع عنوان URL محدد مثل:

const matchCb = ({url, request, event}) => {
  return url.pathname === '/special/url';
};

يمكن تغطية معظم حالات الاستخدام من خلال فحص / اختبار إما url أو request

حاسمة دالة معاودة الاتصال بالمعالج على نفس ExtendableEvent، Request، كائنURL بالإضافة إلى القيمة params، وهي القيمة التي تعرضها قيمة "المطابقة" الأخرى.

const handlerCb = async ({url, request, event, params}) => {
  const response = await fetch(request);
  const responseBody = await response.text();
  return new Response(`${responseBody} <!-- Look Ma. Added Content. -->`, {
    headers: response.headers,
  });
};

يجب أن يُرجع معالج البيانات وعدًا ينتهي إلى Response. في هذه الدورة، على سبيل المثال، نستخدم async وawait الخيارات المتقدمة، سيتم تضمين قيمة Response التي تمّ إرجاعها في وعد.

يمكنك تسجيل عمليات معاودة الاتصال هذه على النحو التالي:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb);

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

عادةً ما يكون "المعالج" سيستخدم معاودة الاتصال إحدى الاستراتيجيات المتوفرة باستخدام استراتيجيات صندوق العمل على النحو التالي:

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(matchCb, new StaleWhileRevalidate());

في هذه الصفحة، سنركّز على workbox-routing، ولكن يمكنك مزيد من المعلومات عن هذه الاستراتيجيات حول استراتيجيات مربّعات العمل

كيفية تسجيل مسار التعبير العادي

من الممارسات الشائعة استخدام تعبير عادي بدلاً من "match" معاودة الاتصال. ويسهل Workbox تنفيذ ذلك مثل:

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('/styles/.*\\.css'), handlerCb);

بالنسبة للطلبات من المصدر نفسه هذا التعبير العادي سيطابق ما دام عنوان URL للطلب يطابق التعبير العادي.

• https://example.com/styles/main.css
• https://example.com/styles/nested/file.css
• https://example.com/nested/styles/directory.css

ومع ذلك، بالنسبة إلى الطلبات الواردة من عدّة مصادر، يمكن استخدام التعبيرات العادية يجب أن تتطابق مع بداية عنوان URL. السبب في ذلك هو من غير المرجّح أن يحدث ذلك باستخدام التعبير العادي new RegExp('/styles/.*\\.css'). التي تقصدها لمطابقة ملفات CSS التابعة لجهات خارجية.

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

إذا كنت تريد هذا السلوك، كل ما عليك هو التأكد من أن القيمة العادية يتطابق هذا التعبير مع بداية عنوان URL. إذا أردنا مطابقة طلبات لـ https://cdn.third-party-site.com فيمكننا استخدام النموذج التعبير new RegExp('https://cdn\\.third-party-site\\.com.*/styles/.*\\.css').

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

إذا أردت مطابقة كلٍ من الجهات المحلية والجهات الخارجية، يمكنك استخدام حرف بدل. في بداية التعبير العادي، ولكن يجب إجراء ذلك بحذر للتأكد من أنها لا تتسبب في حدوث سلوك غير متوقع في تطبيق الويب.

كيفية تسجيل مسار تنقل

إذا كان موقعك الإلكتروني عبارة عن تطبيق من صفحة واحدة، يمكنك استخدام NavigationRoute إلى إرجاع رد محدد لجميع طلبات التنقّل.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler);
registerRoute(navigationRoute);

وعندما ينتقل المستخدم إلى موقعك في المتصفح، فإن طلب الوصول إلى الصفحة طلب تنقُّل وسيتم عرض الصفحة المخزّنة مؤقتًا /app-shell.html له. (ملاحظة: من المفترض أن يتم تخزين الصفحة مؤقتًا عبر workbox-precaching أو من خلال خطوة التثبيت الخاصة بك.)

وبشكلٍ تلقائي، سيؤدي هذا الإجراء إلى الاستجابة لجميع طلبات التنقّل. إذا كنت ترغب في حصره للاستجابة لمجموعة فرعية من عناوين URL، يمكنك استخدام allowlist وdenylist خيار لتقييد الصفحات التي ستتطابق مع هذا المسار.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler, {
  allowlist: [new RegExp('/blog/')],
  denylist: [new RegExp('/blog/restricted/')],
});
registerRoute(navigationRoute);

يُرجى العِلم أنّ مؤشر denylist سيفوز إذا كان عنوان URL مضمّنًا في كلتا العلامتين. allowlist وdenylist.

ضبط معالج تلقائي

إذا كنت تريد توفير "معالج" عن الطلبات التي لا تتطابق مع المسار، تعيين معالج افتراضي.

import {setDefaultHandler} from 'workbox-routing';

setDefaultHandler(({url, event, params}) => {
  // ...
});

تعيين معالج التقاط

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

import {setCatchHandler} from 'workbox-routing';

setCatchHandler(({url, event, params}) => {
  ...
});

تحديد مسار للطلبات التي لا يتم تلقّيها

من المفترض أن تكون جميع المسارات مخصّصة لطلبات GET.

إذا أردت توجيه طلبات أخرى، مثل طلب POST، يجب لتحديد الطريقة عند تسجيل المسار، كما يلي:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb, 'POST');
registerRoute(new RegExp('/api/.*\\.json'), handlerCb, 'POST');

تسجيل جهاز التوجيه

يجب أن تكون قادرًا على تحديد تدفق الطلب باستخدام السجلات من workbox-routing الذي سيحدِّد عناوين URL التي تتم معالجتها من خلال Workbox.

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

الاستخدام المتقدّم

إذا كنت تريد الحصول على مزيد من التحكّم في وقت منح "جهاز توجيه مربع العمل" الطلبات، فيمكنك إنشاء طلباتك الخاصة مثيل Router والمكالمة الساعة الآن handleRequest() متى أردت استخدام الموجه للرد على طلب.

import {Router} from 'workbox-routing';

const router = new Router();

self.addEventListener('fetch', event => {
  const {request} = event;
  const responsePromise = router.handleRequest({
    event,
    request,
  });
  if (responsePromise) {
    // Router found a route to handle the request.
    event.respondWith(responsePromise);
  } else {
    // No route was found to handle the request.
  }
});

عند استخدام Router مباشرةً، عليك أيضًا استخدام الفئة Route، أو أي من الفئات الموسعة لتسجيل المسارات.

import {Route, RegExpRoute, NavigationRoute, Router} from 'workbox-routing';

const router = new Router();
router.registerRoute(new Route(matchCb, handlerCb));
router.registerRoute(new RegExpRoute(new RegExp(...), handlerCb));
router.registerRoute(new NavigationRoute(handlerCb));

workbox-routing.registerRoute(
  capture: string | RegExp | RouteMatchCallback | Route,
  handler?: RouteHandler,
  method?: HTTPMethod,
)

workbox-routing.setCatchHandler(
  handler: RouteHandler,
)

workbox-routing.setDefaultHandler(
  handler: RouteHandler,
)