تطبيقات أسرع في صفحات متعددة بفضل ميزة البث

في الوقت الحالي، تميل المواقع الإلكترونية أو تطبيقات الويب إذا كنت تفضّل ذلك إلى استخدام أحد مخططَي التنقّل:

• توفِّر متصفّحات نظام التنقّل بشكلٍ تلقائي - وهذا يعني أنّك تُدخِل عنوان URL في شريط عناوين المتصفّح ويعرض طلب التنقّل مستندًا كاستجابة. بعد ذلك، انقر على أحد الروابط، ما يؤدي إلى إلغاء تحميل المستند الحالي لمستند آخر، ad infinitum.
• نمط التطبيق المكوّن من صفحة واحدة، الذي يتضمن طلب تنقّل أولاً لتحميل هيكل التطبيق ويعتمد على JavaScript لتعبئة هيكل التطبيق بالترميز الذي يعرضه العميل والذي يتضمّن محتوى من واجهة برمجة تطبيقات خلفية لكل "تنقل".

تم الترويج لفوائد كل نهج من قِبل تأييدهم:

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

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

ما أهمية بث ردود HTML في مشغّل الخدمات؟

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

بالنسبة إلى عاملي الخدمة، يختلف البث قليلاً لأنه يستخدم Streams API بلغة JavaScript. أهم مهمة ينفّذها عامل الخدمات هي اعتراض الطلبات والردّ عليها، بما في ذلك طلبات التنقّل.

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

وهو نمط تم اختباره على مدار الوقت للترميز ويعمل بشكل جيد، ولكنه يساعد في تحقيق الموثوقية من حيث الوصول في وضع عدم الاتصال، غير أنه لا يوفر أي مزايا أداء متأصلة لطلبات التنقل التي تعتمد على استراتيجية الشبكة أولاً أو الشبكة فقط. هنا يأتي دور البث، وسنستكشف كيفية استخدام وحدة workbox-streams المستندة إلى Streams API في مشغّل خدمات Workbox لتسريع طلبات التنقّل على موقعك الإلكتروني المتعدد الصفحات.

تقسيم صفحة ويب عادية

من الناحية الهيكلية، تميل المواقع الإلكترونية إلى وجود عناصر مشتركة متوفّرة على كل صفحة. غالبًا ما يكون الترتيب النموذجي لعناصر الصفحة شيئًا مثل:

• العنوان
• المحتوى.
• تذييل.

باستخدام web.dev كمثال، يبدو تقسيم العناصر الشائعة على النحو التالي:

إن الهدف من تحديد أجزاء من الصفحة هو أننا نحدد ما يمكن تخزينه مؤقتًا واسترداده بدون الانتقال إلى الشبكة - وتحديدًا ترميز الرأس والتذييل المشترك في كل الصفحات - وجزء الصفحة الذي سننتقل إليه دائمًا إلى الشبكة أولاً، وهو المحتوى في هذه الحالة.

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

بعد ذلك، باستخدام Streams API عبر workbox-streams، يمكننا تجميع كل هذه الأجزاء معًا والاستجابة لطلبات التنقّل على الفور، مع طلب الحدّ الأدنى من الترميز اللازم من الشبكة.

إنشاء عامل خدمات بث

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

تقسيم موقعك الإلكتروني إلى أجزاء

قبل أن تتمكن من البدء في كتابة مشغّل خدمات البث، عليك تنفيذ ثلاثة إجراءات:

1. أنشئ ملفًا يحتوي على ترميز عنوان موقعك الإلكتروني فقط.
2. أنشئ ملفًا يحتوي على ترميز تذييل موقعك الإلكتروني فقط.
3. اسحب المحتوى الرئيسي لكل صفحة إلى ملف منفصل، أو اضبط الواجهة الخلفية لعرض محتوى الصفحة بشكل مشروط فقط استنادًا إلى عنوان طلب HTTP.

ملاحظة: ليس من الضروري أن تكون الملفات الجزئية الفردية بتنسيق HTML صالح. على سبيل المثال، قد يحتوي جزء العنوان على علامة HTML مفتوحة في نهايته. كل ما يهم هو أن يكون الردّ المجمّع النهائي هو HTML صالح.

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

ملاحظة: بما أنّ مشغّل خدمات البثّ عبارة عن تحسين تدريجي، من الضروري أن يعمل موقعك الإلكتروني كتجربة عادية متعدّدة الصفحات بدون إنشاء تجربة.

إنشاء عامل في خدمات البث

إذا لم تثبِّت وحدة "workbox-streams"، عليك تثبيت هذه الوحدة بالإضافة إلى أيّ وحدات من Workspace تمّ تثبيتها حاليًا. بالنسبة إلى هذا المثال المحدد، يتضمن ذلك الحزم التالية:

npm i workbox-navigation-preload workbox-strategies workbox-routing workbox-precaching workbox-streams --save

من هنا، تتمثل الخطوة التالية في إنشاء مشغّل الخدمات الجديد وتخزين أجزاء من الرأس والتذييل مؤقتًا بشكل مسبق.

التخزين المؤقت للأجزاء الجزئية

أول ما عليك تنفيذه هو إنشاء مشغّل خدمات في جذر مشروعك باسم sw.js (أو أي اسم ملف تفضّله). وستبدأ فيه بما يلي:

// sw.js
import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute} from 'workbox-routing';
import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
import {strategy as composeStrategies} from 'workbox-streams';

// Enable navigation preload for supporting browsers
navigationPreload.enable();

// Precache partials and some static assets
// using the InjectManifest method.
precacheAndRoute([
  // The header partial:
  {
    url: '/partial-header.php',
    revision: __PARTIAL_HEADER_HASH__
  },
  // The footer partial:
  {
    url: '/partial-footer.php',
    revision: __PARTIAL_FOOTER_HASH__
  },
  // The offline fallback:
  {
    url: '/offline.php',
    revision: __OFFLINE_FALLBACK_HASH__
  },
  ...self.__WB_MANIFEST
]);

// To be continued...

يفعل هذا الرمز أمرين:

1. لتفعيل التحميل المسبق للتنقّل للمتصفّحات المتوافقة.
2. يتم تخزين ترميز الرأس والتذييل مؤقتًا بشكل مسبق. وهذا يعني أنه سيتم استرداد ترميز الرأس والتذييل لكل صفحة على الفور، حيث لن تحظر الشبكة هذه البيانات.
3. يتم تخزين الأصول الثابتة مؤقتًا في العنصر النائب __WB_MANIFEST الذي يستخدم الإجراء injectManifest.

ملاحظة: يُرجى ملاحظة العناصر النائبة __PARTIAL_HEADER_HASH__ و__PARTIAL_FOOTER_HASH__ و__OFFLINE_FALLBACK_HASH__. يرجع السبب في هذه العناصر النائبة إلى أنّ منطق Workbox الذي يعمل في ذاكرة التخزين المؤقت لإصدار مواد العرض بدون تجزئة في اسم الملف. يعتمد رمز مشغّل الخدمات في هذا المثال على السمة workbox-webpack-plugin ومكوّن إضافي لاستبدال النص. لا يتوافق هذا الإعداد مع خيار templatedUrls المتوفّر في workbox-build، ما يبسّط إنشاء التجزئة لمواد العرض التي لم يتم إصدار نسخة منها.

عرض الردود تدريجيًا

إن جعل مشغّل الخدمات لديك يبث الردود المتسلسلة هو الجزء الأكبر من هذه الجهود برمتها. ومع ذلك، يجعل تطبيق Workbox وworkbox-streams التابع له هذه المسألة موجزة أكثر مما لو اضطررت إلى تنفيذ كل ذلك بمفردك:

// sw.js
import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute} from 'workbox-routing';
import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
import {strategy as composeStrategies} from 'workbox-streams';

// ...
// Prior navigation preload and precaching code omitted...
// ...

// The strategy for retrieving content partials from the network:
const contentStrategy = new NetworkFirst({
  cacheName: 'content',
  plugins: [
    {
      // NOTE: This callback will never be run if navigation
      // preload is not supported, because the navigation
      // request is dispatched while the service worker is
      // booting up. This callback will only run if navigation
      // preload is _not_ supported.
      requestWillFetch: ({request}) => {
        const headers = new Headers();

        // If the browser doesn't support navigation preload, we need to
        // send a custom `X-Content-Mode` header for the back end to use
        // instead of the `Service-Worker-Navigation-Preload` header.
        headers.append('X-Content-Mode', 'partial');

        // Send the request with the new headers.
        // Note: if you're using a static site generator to generate
        // both full pages and content partials rather than a back end
        // (as this example assumes), you'll need to point to a new URL.
        return new Request(request.url, {
          method: 'GET',
          headers
        });
      },
      // What to do if the request fails.
      handlerDidError: async ({request}) => {
        return await matchPrecache('/offline.php');
      }
    }
  ]
});

// Concatenates precached partials with the content partial
// obtained from the network (or its fallback response).
const navigationHandler = composeStrategies([
  // Get the precached header markup.
  () => matchPrecache('/partial-header.php'),
  // Get the content partial from the network.
  ({event}) => contentStrategy.handle(event),
  // Get the precached footer markup.
  () => matchPrecache('/partial-footer.php')
]);

// Register the streaming route for all navigation requests.
registerRoute(({request}) => request.mode === 'navigate', navigationHandler);

// Your service worker can end here, or you can add more
// logic to suit your needs, such as runtime caching, etc.

ويتكون هذا الرمز من ثلاثة أجزاء رئيسية تستوفي المتطلبات التالية:

1. يتم استخدام استراتيجية NetworkFirst لمعالجة طلبات أجزاء المحتوى الجزئية. وباستخدام هذه الاستراتيجية، يتم تحديد اسم ذاكرة تخزين مؤقت مخصص لـ content لكي يتضمن أجزاء من المحتوى، بالإضافة إلى مكوِّن إضافي مخصص يعالج ما إذا كان سيتم ضبط عنوان طلب X-Content-Mode للمتصفّحات التي لا تتيح التحميل المسبق للتنقل (وبالتالي لا يتم إرسال الرأس Service-Worker-Navigation-Preload). يحدد هذا المكون الإضافي أيضًا ما إذا كان سيتم إرسال آخر نسخة مخبأة من المحتوى بشكل جزئي، أو إرسال صفحة احتياطية بلا اتصال في حالة عدم تخزين نسخة مخبأة للطلب الحالي.
2. تُستخدم الطريقة strategy في workbox-streams (المعروفة باسم composeStrategies هنا) لإجراء تسلسل للأجزاء الجزئية للرأس والتذييل التي تم تخزينها مؤقتًا مع المحتوى الجزئي المطلوب من الشبكة.
3. تم تنفيذ المخطط بالكامل عبر registerRoute لطلبات التنقل.

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

إذا كان موقعك الإلكتروني يتضمّن خلفية

ستتذكّر أنّه عند تفعيل التحميل المُسبق للتنقّل، يرسل المتصفّح عنوان Service-Worker-Navigation-Preload بقيمة true. ومع ذلك، في نموذج الرمز أعلاه، أرسلنا عنوانًا مخصّصًا لـ X-Content-Mode في عملية التحميل المُسبق للتنقّل في الحدث غير المتوافقة في المتصفّح. في النهاية، يمكنك تغيير الاستجابة بناءً على وجود هذه العناوين. وفي الواجهة الخلفية للغة PHP، قد يبدو الأمر كما يلي لصفحة معينة:

<?php
// Check if we need to render a content partial
$navPreloadSupported = isset($_SERVER['HTTP_SERVICE_WORKER_NAVIGATION_PRELOAD']) && $_SERVER['HTTP_SERVICE_WORKER_NAVIGATION_PRELOAD'] === 'true';
$partialContentMode = isset($_SERVER['HTTP_X_CONTENT_MODE']) && $_SERVER['HTTP_X_CONTENT_MODE'] === 'partial';
$isPartial = $navPreloadSupported || $partialContentMode;

// Figure out whether to render the header
if ($isPartial === false) {
  // Get the header include
  require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/site-header.php');

  // Render the header
  siteHeader();
}

// Get the content include
require_once('./content.php');

// Render the content
content($isPartial);

// Figure out whether to render the footer
if ($isPartial === false) {
  // Get the footer include
  require_once($_SERVER['DOCUMENT_ROOT'] . '/includes/site-footer.php');

  // Render the footer
  siteFooter();
}
?>

في المثال أعلاه، يتم استدعاء العناصر الجزئية للمحتوى كدوال، والتي تستخدم قيمة $isPartial لتغيير كيفية عرض العناصر الجزئية. على سبيل المثال، قد تتضمن دالة العرض content ترميزًا معيّنًا في الشروط عند استردادها جزئيًا، وهي وظيفة ستتم تغطيتها خلال وقت قصير.

الاعتبارات

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

تعديل عناصر الصفحة عند التنقل

أصعب جزء في هذا النهج هو أن بعض الأشياء ستحتاج إلى تحديث على العميل. على سبيل المثال، يعني ترميز العناوين عن طريق التخزين المؤقت مسبقًا أنّ الصفحة ستتضمّن المحتوى نفسه في العنصر <title>، أو حتى إدارة حالات التفعيل/الإيقاف لعناصر التنقّل يجب تعديلها في كل عملية تنقّل. قد يجب تحديث هذه الأشياء - وغيرها - على العميل لكل طلب تنقل.

للتغلب على هذا الأمر، يمكن إضافة عنصر <script> مضمّن إلى المحتوى الجزئي الذي يأتي من الشبكة لتعديل بعض العناصر المهمة:

<!-- The JSON below contains information about the current page. -->
<script id="page-data" type="application/json">'{"title":"Sand Wasp &mdash; World of Wasps","description":"Read all about the sand wasp in this tidy little post."}'</script>
<script>
  const pageData = JSON.parse(document.getElementById('page-data').textContent);

  // Update the page title
  document.title = pageData.title;
</script>
<article>
  <!-- Page content omitted... -->
</article>

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

التعامل مع الشبكات البطيئة

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

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

ويمكنك إجراء ذلك من خلال CSS. لنفترض أنّ جزء من العنوان ينتهي بعنصر <article> افتتاحي فارغًا إلى أن يصل الجزء الجزئي من المحتوى لتعبئته. يمكنك كتابة قاعدة CSS مشابهة لما يلي:

article:empty::before {
  text-align: center;
  content: 'Loading...';
}

يعمل هذا الإجراء بنجاح، ولكنه سيعرض رسالة جارٍ التحميل على البرنامج بغض النظر عن سرعة الشبكة. إذا أردت تجنّب وميضًا من الرسائل الغريبة، يمكنك تجربة هذه الطريقة حيث يتم دمج أداة الاختيار في المقتطف أعلاه ضمن فئة slow:

.slow article:empty::before {
  text-align: center;
  content: 'Loading...';
}

من هنا، يمكنك استخدام JavaScript في رأسك بشكل جزئي لقراءة نوع الاتصال الفعال (على الأقل في متصفحات Chromium) لإضافة الفئة slow إلى العنصر <html> في أنواع الاتصال المحددة:

<script>
  const effectiveType = navigator?.connection?.effectiveType;

  if (effectiveType !== '4g') {
    document.documentElement.classList.add('slow');
  }
</script>

سيضمن ذلك أنّ أنواع الاتصال الفعّالة الأبطأ من النوع 4g ستتلقّى رسالة تحميل. أما في القسم "جزء من المحتوى"، فيمكنك وضع عنصر <script> مضمّن لإزالة الفئة slow من ترميز HTML للتخلص من رسالة التحميل:

<script>
  document.documentElement.classList.remove('slow');
</script>

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

توفير استجابة احتياطية

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

ويتم عرض الرمز المطلوب لتحقيق استجابة احتياطية في عيّنات التعليمات البرمجية السابقة. تتطلّب هذه العملية خطوتَين:

1. التخزين المؤقت لاستجابة احتياطية بلا اتصال بالإنترنت
2. يمكنك إعداد handlerDidError معاودة الاتصال في المكوّن الإضافي لاستراتيجية الشبكة أولاً، وذلك من أجل التحقّق من ذاكرة التخزين المؤقت لآخر نسخة تم الوصول إليها من الصفحة. إذا لم يتم الوصول إلى الصفحة مطلقًا، سيكون عليك استخدام الطريقة matchPrecache من وحدة workbox-precaching لاسترداد الاستجابة الاحتياطية من ذاكرة التخزين المؤقت المسبقة.

التخزين المؤقت وشبكات توصيل المحتوى (CDN)

إذا كنت تستخدم نمط البث هذا في مشغّل الخدمات، يُرجى تقييم ما إذا كان ما يلي ينطبق على حالتك:

• استخدام شبكة توصيل للمحتوى (CDN) أو أي نوع آخر من ذاكرة التخزين المؤقت المتوسطة/العامة.
• لقد حددت عنوان Cache-Control مع توجيهات max-age و/أو s-maxage غير صفرية جنبًا إلى جنب مع التوجيه public.

إذا كان كلا الأمرين ينطبق عليك، فقد تحتفظ ذاكرة التخزين المؤقت الوسيطة باستجابات طلبات التنقل. ومع ذلك، تذكر أنه عند استخدام هذا النمط، قد تعرض إجابتين مختلفتين لأي عنوان URL معين:

• الاستجابة الكاملة التي تتضمن ترميز الرأس والمحتوى والتذييل.
• الرد الجزئي الذي يتضمن المحتوى فقط.

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

للتغلب على هذه المشكلة، عليك الاعتماد على العنوان Vary الذي يؤثر في سلوك التخزين المؤقت من خلال توصيل الاستجابات القابلة للتخزين المؤقت إلى عنوان واحد أو أكثر كان مضمَّنًا في الطلب. بما أنّنا نغيّر الردود على طلبات التنقّل استنادًا إلى عناوين طلبات Service-Worker-Navigation-Preload وX-Content-Mode المخصّصة، يجب تحديد رأس Vary هذا في الاستجابة:

Vary: Service-Worker-Navigation-Preload,X-Content-Mode

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

النتيجة

يتم اختصار معظم نصائح الأداء في وقت التحميل إلى "عرض ما حصلت عليه"، فلا تتردد ولا تنتظر حتى تحصل على كل شيء قبل أن تعرض على المستخدم أي شيء.

"جيك أرشيبالد" في فيديو Fun Hacks for Faster Content

تتفوق المتصفحات في التعامل مع الاستجابات لطلبات التنقل، حتى مع نصوص استجابة HTML الضخمة. تبث المتصفّحات تلقائيًا الترميز وتعالجه تدريجيًا في أجزاء تتجنّب المهام الطويلة، وهو أمر جيد لأداء بدء التشغيل.

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

• سيتم غالبًا تقليل الوقت المستغرق حتى أول بايت (TTFB) بشكل كبير، حيث يكون البايت الأول من الاستجابة لطلب التنقّل فوريًا.
• ستكون سرعة سرعة عرض المحتوى على الصفحة (FCP) جدًّا، لأنّ ترميز العنوان المخزن مؤقتًا سيحتوي على إشارة إلى ورقة أنماط مخزّنة مؤقتًا، ما يعني أنّه سيتم عرض محتوى الصفحة بسرعة كبيرة جدًا.
• وفي بعض الحالات، يمكن زيادة سرعة سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)، لا سيما في حال كان العنصر الأكبر على الشاشة متاحًا من خلال عنوان نسخة مخبأة بشكل جزئي للعنوان. ومع ذلك، فإنّ عرض شيء ما من ذاكرة التخزين المؤقت لمشغِّل الخدمات في أسرع وقت ممكن جنبًا إلى جنب مع حمولات ترميز أصغر قد يؤدي إلى تحسين سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP).

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

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

المراجِع

• هذا ما أسميه بعاملي الخدمة.
• حمولات HTML أصغر حجمًا مع مشغّلي الخدمات
• تطبيقات أخرى غير تطبيقات الصفحة الواحدة: بُنى بديلة لتطبيق PWA (مؤتمر Google I/O لعام 2018)