جعبه کار-پیش کش

یکی از ویژگی‌های سرویس‌کار این است که می‌توانند مجموعه‌ای از فایل‌ها را در حافظه پنهان هنگام نصب سرویس‌کار ذخیره کنند. این اغلب به عنوان "precaching" نامیده می شود، زیرا شما در حال ذخیره محتوا قبل از سرویس دهنده مورد استفاده هستید.

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

Workbox با ساده کردن API و اطمینان از بارگیری کارآمد دارایی‌ها، بار سنگینی را از پیش کش برداشته است.

نحوه کار با جعبه پیش کش

هنگامی که یک برنامه وب برای اولین بار بارگیری می شود، workbox-precaching به تمام دارایی هایی که می خواهید بارگیری کنید نگاه می کند، هر گونه تکراری را حذف می کند و رویدادهای مربوطه مربوط به سرویس کارگر را برای دانلود و ذخیره دارایی ها متصل می کند. نشانی‌های اینترنتی که قبلاً شامل اطلاعات نسخه‌سازی هستند (مانند هش محتوا) به عنوان کلیدهای حافظه پنهان بدون هیچ تغییر دیگری استفاده می‌شوند. نشانی‌های اینترنتی که اطلاعات نسخه‌سازی را شامل نمی‌شوند، یک پارامتر درخواست URL اضافی به کلید حافظه پنهان خود اضافه می‌کنند که نشان‌دهنده هش محتوای آنها است که Workbox در زمان ساخت تولید می‌کند.

workbox-precaching همه این کارها را در طول رویداد install سرویس‌کار انجام می‌دهد.

وقتی کاربر بعداً از برنامه وب شما بازدید مجدد می‌کند و شما یک سرویس‌کار جدید با دارایی‌های از پیش ذخیره‌شده مختلف دارید، workbox-precaching به فهرست جدید نگاه می‌کند و بر اساس بازبینی آن‌ها مشخص می‌کند کدام دارایی‌ها کاملاً جدید هستند و کدام یک از دارایی‌های موجود نیاز به به‌روزرسانی دارند. هر گونه دارایی جدید، یا ویرایش‌های به‌روزرسانی شده، در طول رویداد install سرویس‌کار جدید به حافظه پنهان اضافه می‌شود.

این سرویس‌کار جدید تا زمانی که رویداد activate آن فعال نشده باشد، برای پاسخ به درخواست‌ها استفاده نخواهد شد. در صورت activate است که workbox-precaching دارایی‌های ذخیره‌شده‌ای را که دیگر در فهرست URLهای فعلی وجود ندارند، بررسی می‌کند و آن‌ها را از حافظه پنهان حذف می‌کند.

workbox-precaching این مراحل را هر بار که سرویس‌کارگر شما نصب و فعال می‌شود انجام می‌دهد و مطمئن می‌شود که کاربر آخرین دارایی‌ها را دارد و فقط فایل‌های تغییر یافته را دانلود می‌کند.

ارائه پاسخ های از پیش ذخیره شده

فراخوانی precacheAndRoute() یا addRoute() مسیری ایجاد می کند که با درخواست های URL های پیش کش مطابقت دارد.

استراتژی پاسخی که در این مسیر استفاده می‌شود ، ابتدا حافظه پنهان است: پاسخ از پیش ذخیره‌شده استفاده می‌شود، مگر اینکه پاسخ ذخیره‌شده در حافظه پنهان وجود نداشته باشد (به دلیل برخی خطاهای غیرمنتظره)، در این صورت به جای آن از یک پاسخ شبکه استفاده می‌شود.

ترتیب فراخوانی precacheAndRoute() یا addRoute() مهم است. معمولاً قبل از ثبت هر مسیر اضافی با registerRoute() می‌خواهید آن را در ابتدا در فایل Service Worker خود فراخوانی کنید. اگر ابتدا registerRoute() فراخوانی کردید و آن مسیر با درخواست ورودی مطابقت داشت، از هر استراتژی که در آن مسیر اضافی تعریف کردید، به جای استراتژی cache-first که توسط 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 ) به صراحت یک ویژگی revision را تنظیم می کند که یک هش خودکار از محتویات فایل است. برخلاف منابع جاوا اسکریپت و CSS، فایل‌های HTML به طور کلی نمی‌توانند اطلاعات تجدیدنظر در URL‌های خود را شامل شوند، در غیر این صورت هر زمان که محتوای صفحه تغییر کند، پیوندهای این فایل‌ها در وب خراب می‌شوند.

با ارسال یک ویژگی revision به precacheAndRoute() ، Workbox می تواند بداند که فایل چه زمانی تغییر کرده است و آن را متناسب با آن به روز کند.

Workbox با ابزارهایی برای کمک به ایجاد این لیست ارائه می شود:

• workbox-build : این یک بسته گره است که می تواند در یک کار gulp یا به عنوان یک اسکریپت اجرای npm استفاده شود.
• workbox-webpack-plugin : کاربران وب پک می توانند از این افزونه استفاده کنند.
• workbox-cli : 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 های "زیبا") پشتیبانی کند. این به این معنی است که درخواستی مانند /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 و v4 اتفاق افتاد.)

این داده‌های منسوخ نباید با عملیات عادی تداخل داشته باشد، اما به استفاده از سهمیه فضای ذخیره‌سازی کلی شما کمک می‌کند، و حذف صریح آن برای کاربران شما راحت‌تر است. اگر از یکی از ابزارهای ساخت Workbox برای تولید سرویس‌کار خود استفاده می‌کنید، می‌توانید این کار را با اضافه کردن cleanupOutdatedCaches() به سرویس‌کار یا تنظیم cleanupOutdatedCaches: true

استفاده از یکپارچگی منابع فرعی

برخی از توسعه دهندگان ممکن است ضمانت های اضافی ارائه شده توسط اجرای یکپارچگی منابع فرعی را هنگام بازیابی URL های پیش کش شده از شبکه بخواهند.

یک ویژگی اضافی و اختیاری به نام integrity می توان به هر ورودی در مانیفست پیش کش اضافه کرد. در صورت ارائه، به عنوان مقدار integrity هنگام ساخت Request مورد استفاده برای پر کردن حافظه پنهان استفاده می شود. اگر عدم تطابق وجود داشته باشد، فرآیند پیش کش با شکست مواجه خواهد شد.

تعیین اینکه کدام ورودی های مانیفست پیش کش باید دارای ویژگی های integrity باشند، و تعیین مقادیر مناسب برای استفاده، خارج از محدوده ابزارهای ساخت Workbox است. در عوض، توسعه‌دهندگانی که می‌خواهند در این عملکرد شرکت کنند، باید مانیفست پیش کشی را که 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.

workbox-precaching.urlManipulation(
  { url }: object,
)

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

workbox-precaching.cleanupOutdatedCaches()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

workbox-precaching.getCacheKeyForURL(
  url: string,
)

workbox-precaching.matchPrecache(
  request: string | Request,
)

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)