پیش کش کردن یکی از رایج ترین کارهایی است که شما در یک سرویس دهنده انجام می دهید، و Workbox انعطاف پذیری زیادی را در نحوه انجام این وظیفه مهم، صرف نظر از اینکه کدام یک از ابزارهای ساخت Workbox را انتخاب می کنید، ارائه می دهد. در این راهنما، نحوه پیش کش کردن دارایی ها با استفاده از generateSW و injectManifest و همچنین اینکه کدام یک از این روش ها ممکن است برای پروژه شما مناسب باشد را خواهید آموخت.

پیش کش با generateSW

generateSW ساده ترین راه برای پیش کش کردن دارایی ها در Workbox است. نکته مهمی که باید در مورد generateSW به خاطر بسپارید این است که شما سرویس کارگر خود را نمی‌نویسید، بلکه از Workbox می‌خواهید که یکی برای شما ایجاد کند. با این حال، می‌توانید از طریق گزینه‌های پیکربندی مختلف بر رفتار آن تأثیر بگذارید.

generateSW به طور پیش فرض بسته به ابزار ساختی که استفاده می کنید، کارهای مختلفی انجام می دهد. هنگام استفاده از workbox-webpack-plugin ، لازم نیست هیچ گزینه پیکربندی را مشخص کنید. به‌طور پیش‌فرض، افزونه همه چیزهایی را که پک وب در نمودار وابستگی خود گنجانده است، پیش کش می‌کند و یک سرویس‌کار به نام service-worker.js را در فهرستی که توسط output.path مشخص شده است، می‌نویسد.

از سوی دیگر، اگر workbox-build یا workbox-cli استفاده می‌کنید، فقط دارایی‌های HTML، CSS و جاوا اسکریپت که از سیستم فایل محلی خوانده می‌شوند به‌طور پیش‌فرض از پیش ذخیره می‌شوند. از لحاظ پیکربندی، باید swDest و گزینه globDirectory را در پیکربندی generateSW برای پیش کش کردن مشخص کنید. به احتمال زیاد، می‌خواهید گزینه‌های دیگری را نیز پیکربندی کنید که بر رفتار کارکنان خدماتی شما تأثیر می‌گذارد، بنابراین نگاهی به مستندات بیندازید.

پیش کش با injectManifest

استفاده از injectManifest به آسانی استفاده از generateSW نیست، اما برای انعطاف‌پذیری بیشتر، سهولت استفاده را عوض می‌کنید. در جایی که generateSW کل نسل سرویس‌کار را برای شما مدیریت می‌کند، injectManifest یک سرویس‌کار را که شما می‌نویسید را به عنوان منبع خود می‌گیرد و فهرستی از URLها را برای پیش کش تزریق می‌کند، در حالی که بقیه سرویس‌کار شما را همانطور که هست رها می‌کند.

هنگامی که injectManifest استفاده می کنید، شما مسئول سیم کشی منطق پیش کش هستید. هنگامی که injectManifest کارمند سرویس ورودی شما را بررسی می کند، به دنبال یک متغیر self.__WB_MANIFEST و آن را با مانیفست پیش کش جایگزین می کند. اگر این متغیر وجود نداشته باشد، injectManifest یک خطا ایجاد می کند.

فهرست ورودی‌های مانیفست پیش کش را می‌توان با گزینه‌های پیکربندی اضافی بهینه‌سازی کرد.

مقایسه کنار هم

برای مقایسه استفاده از متدهای generateSW و injectManifest روی هر یک از تب های زیر کلیک کنید:

از آنجایی که generateSW یک سرویس‌کار تولید می‌کند، شما فقط باید یک پیکربندی را مشخص کنید. در زیر مثالی با استفاده از workbox-build آورده شده است:

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

سپس Service Worker را می توان در خط فرمان با Node ساخت:

node build-sw.js

از آنجایی که injectManifest به یک منبع سرویس کار نیاز دارد، یک مثال حداقل قابل دوام به یک فایل سرویس کار منبع نیاز دارد. اگر تنها چیزی که نیاز است پیش کش است، این کارمند سرویس ورودی ممکن است چیزی شبیه به این باشد:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

به رشته self.__WB_MANIFEST توجه کنید. این یک مکان نگهدار است که Workbox آن را با مانیفست پیش کش جایگزین می کند. در زیر یک پیکربندی معتبر برای این مورد استفاده وجود دارد:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

اگر نیازمندی‌های پیچیده‌ای مانند مسیریابی پیشرفته، استراتژی‌های ذخیره سفارشی ذخیره‌سازی سفارشی، یا موارد دیگری که توسط گزینه‌های generateSW پوشش داده نمی‌شوند، injectManifest داده می‌شود.

نتیجه گیری

پیش کش در Workbox بسیار ساده تر از زمانی است که شما مجبور باشید پیش کش را به تنهایی مدیریت کنید، به خصوص در مواردی که دارایی های نسخه بندی شده کامپایل شده توسط باندلرها مربوط می شود. با این حال، پیش کش کردن تنها کاری نیست که احتمالاً در یک کارگر خدماتی انجام خواهید داد. همانطور که ادامه می دهید، تکنیک های دیگری مانند کش در زمان اجرا را یاد خواهید گرفت.