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

یکی از ویژگی‌های سرویس‌کار این است که می‌توانند مجموعه‌ای از فایل‌ها را در حافظه پنهان هنگام نصب سرویس‌کار ذخیره کنند. این اغلب به عنوان "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.

انواع

CleanupResult

خواص

  • deletedCacheRequests

    رشته[]

InstallResult

خواص

  • nonUpdatedURLs

    رشته[]

  • URL های به روز شده

    رشته[]

PrecacheController

پیش کش موثر دارایی ها را انجام می دهد.

خواص

  • سازنده

    خالی

    یک PrecacheController جدید ایجاد کنید.

    تابع constructor به نظر می رسد:

    (options?: PrecacheControllerOptions) => {...}

    • گزینه ها

      PrecacheControllerOptions اختیاری است

  • استراتژی

    استراتژی

  • فعال کردن

    خالی

    دارایی هایی را که دیگر در مانیفست پیش کش فعلی وجود ندارند حذف می کند. این متد را از سرویس‌کار فعال‌کننده رویداد فراخوانی کنید.

    توجه: این متد event.waitUntil() را برای شما فراخوانی می کند، بنابراین نیازی نیست خودتان آن را در کنترل کننده رویداد خود فراخوانی کنید.

    تابع activate به نظر می رسد:

    (event: ExtendableEvent) => {...}

    • رویداد

      ExtendableEvent

  • addToCacheList

    خالی

    این روش موارد را به لیست پیش کش اضافه می کند، موارد تکراری را حذف می کند و از معتبر بودن اطلاعات اطمینان می دهد.

    تابع addToCacheList به نظر می رسد:

    (entries: (string | PrecacheEntry)[]) => {...}

    • ورودی های

      (رشته | PrecacheEntry )[]

      آرایه ای از ورودی های پیش کش.

  • createHandlerBoundToURL

    خالی

    تابعی را برمی‌گرداند که url در پیش کش (با در نظر گرفتن اطلاعات ویرایش) جستجو می‌کند و Response مربوطه را برمی‌گرداند.

    تابع createHandlerBoundToURL به نظر می رسد:

    (url: string) => {...}

    • آدرس اینترنتی

      رشته

      URL از پیش ذخیره شده که برای جستجوی Response استفاده خواهد شد.

  • getCacheKeyForURL

    خالی

    کلید حافظه پنهان مورد استفاده برای ذخیره یک URL داده شده را برمی گرداند. اگر آن URL بدون نسخه باشد، مانند '/index.html'، کلید حافظه پنهان URL اصلی با پارامتر جستجو است که به آن اضافه شده است.

    تابع getCacheKeyForURL به نظر می رسد:

    (url: string) => {...}

    • آدرس اینترنتی

      رشته

      آدرس اینترنتی که می خواهید کلید حافظه پنهان آن را جستجو کنید.

    • برمی گرداند

      رشته

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

  • getCachedURLs

    خالی

    فهرستی از همه URL هایی را که توسط سرویس دهنده فعلی از قبل ذخیره شده اند، برمی گرداند.

    تابع getCachedURLs به نظر می رسد:

    () => {...}

    • برمی گرداند

      رشته[]

      URL های از پیش ذخیره شده

  • getIntegrityForCacheKey

    خالی

    تابع getIntegrityForCacheKey به نظر می رسد:

    (cacheKey: string) => {...}

    • cacheKey

      رشته

    • برمی گرداند

      رشته

      یکپارچگی منبع فرعی مرتبط با کلید حافظه پنهان، یا اگر تنظیم نشده باشد، تعریف نشده است.

  • getURLsToCacheKeys

    خالی

    با در نظر گرفتن اطلاعات بازبینی URL، نگاشت یک URL از پیش ذخیره شده را به کلید حافظه پنهان مربوطه برمی گرداند.

    تابع getURLsToCacheKeys به نظر می رسد:

    () => {...}

    • برمی گرداند

      نقشه<string>

      یک URL برای نگاشت کلید در حافظه پنهان.

  • نصب

    خالی

    دارایی های جدید و به روز را از پیش ذخیره می کند. این متد را از رویداد نصب service worker فراخوانی کنید.

    توجه: این متد event.waitUntil() را برای شما فراخوانی می کند، بنابراین نیازی نیست خودتان آن را در کنترل کننده رویداد خود فراخوانی کنید.

    تابع install به نظر می رسد:

    (event: ExtendableEvent) => {...}

    • رویداد

      ExtendableEvent

  • matchPrecache

    خالی

    این به عنوان جایگزینی برای cache.match() با تفاوت های زیر عمل می کند:

    • می داند که نام پیش کش چیست و فقط در آن کش چک می کند.
    • این به شما امکان می‌دهد یک URL "اصلی" را بدون پارامترهای نسخه‌سازی ارسال کنید و به طور خودکار کلید حافظه پنهان صحیح را برای بازبینی فعال فعلی آن URL جستجو می‌کند.

    به عنوان مثال، matchPrecache('index.html') پاسخ از پیش ذخیره‌شده صحیح را برای سرویس‌کار فعال فعلی پیدا می‌کند، حتی اگر کلید حافظه پنهان واقعی '/index.html?__WB_REVISION__=1234abcd' باشد.

    تابع matchPrecache به نظر می رسد:

    (request: string | Request) => {...}

    • درخواست

      رشته | درخواست

      کلید (بدون تجدید نظر در پارامترها) برای جستجو در پیش کش.

    • برمی گرداند

      قول<پاسخ>

  • پیش کش

    خالی

    موارد را به لیست پیش کش اضافه می کند، هر گونه تکراری را حذف می کند و فایل ها را در حافظه پنهان ذخیره می کند.

    این روش را می توان چندین بار فراخوانی کرد.

    تابع precache به نظر می رسد:

    (entries: (string | PrecacheEntry)[]) => {...}

PrecacheEntry

خواص

  • تمامیت

    رشته اختیاری

  • تجدید نظر

    رشته اختیاری

  • آدرس اینترنتی

    رشته

PrecacheFallbackPlugin

PrecacheFallbackPlugin به شما امکان می دهد تا زمانی که یک استراتژی معین قادر به تولید پاسخ نیست، یک پاسخ "آفلاین بازگشتی" را مشخص کنید.

این کار را با قطع تماس پلاگین handlerDidError و بازگرداندن یک پاسخ از پیش ذخیره شده، با در نظر گرفتن پارامتر بازبینی مورد انتظار به صورت خودکار انجام می دهد.

مگر اینکه به طور صریح یک نمونه PrecacheController را به سازنده ارسال کنید، نمونه پیش فرض استفاده خواهد شد. به طور کلی، اکثر توسعه دهندگان از پیش فرض استفاده می کنند.

خواص

  • سازنده

    خالی

    یک PrecacheFallbackPlugin جدید با fallbackURL مرتبط می سازد.

    تابع constructor به نظر می رسد:

    (config: object) => {...}

    • پیکربندی

      هدف - شی

      • URL fallback

        رشته

        یک URL از پیش ذخیره شده برای استفاده به عنوان بازگشتی در صورتی که استراتژی مرتبط نتواند پاسخی ایجاد کند.

      • کنترل کننده پیش کش

        PrecacheController اختیاری است

PrecacheRoute

یک زیر کلاس از workbox-routing.Route که یک نمونه workbox-precaching.PrecacheController می گیرد و از آن برای مطابقت با درخواست های دریافتی و رسیدگی به واکشی پاسخ ها از پیش کش استفاده می کند.

خواص

  • سازنده

    خالی

    تابع constructor به نظر می رسد:

    (precacheController: PrecacheController, options?: PrecacheRouteOptions) => {...}

    • کنترل کننده پیش کش

      یک نمونه PrecacheController که هم برای مطابقت درخواست‌ها و هم برای پاسخ دادن به رویدادهای واکشی استفاده می‌شود.

    • گزینه ها

      PrecacheRouteOptions اختیاری است

  • catchHandler

    RouteHandlerObject اختیاری است

  • کنترل کننده
  • همخوانی داشتن
  • روش

    روش HTTPM

  • setCatchHandler

    خالی

    تابع setCatchHandler به نظر می رسد:

    (handler: RouteHandler) => {...}

    • کنترل کننده

      یک تابع callback که یک Promise Resolving را به یک Response برمی گرداند

PrecacheRouteOptions

خواص

  • CleanURL ها

    بولی اختیاری

  • فهرست فهرست

    رشته اختیاری

  • ignoreURLParametersMatching

    RegExp[] اختیاری است

  • url دستکاری

    urlManipulation اختیاری است

PrecacheStrategy

یک workbox-strategies.Strategy که به طور خاص برای کار با workbox-precaching.PrecacheController طراحی شده است تا هم حافظه پنهان و هم واکشی دارایی های از پیش کش شده باشد.

توجه: یک نمونه از این کلاس به طور خودکار هنگام ایجاد یک PrecacheController ایجاد می شود. به طور کلی لازم نیست خودتان آن را ایجاد کنید.

خواص

  • سازنده

    خالی

    تابع constructor به نظر می رسد:

    (options?: PrecacheStrategyOptions) => {...}

    • گزینه ها

      PrecacheStrategyOptions اختیاری است

  • cacheName

    رشته

  • fetchOptions

    RequestInit اختیاری است

  • matchOptions

    CacheQueryOptions اختیاری است

  • پلاگین ها
  • پلاگین copyRedirectedCacheableResponses
  • defaultPrecacheCacheabilityPlugin
  • _awaitکامل

    خالی

    تابع _awaitComplete به نظر می رسد:

    (responseDone: Promise<Response>, handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • پاسخ انجام شد

      قول<پاسخ>

    • کنترل کننده
    • درخواست

      درخواست

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<باطل>

  • _getResponse

    خالی

    تابع _getResponse به نظر می رسد:

    (handler: StrategyHandler, request: Request, event: ExtendableEvent) => {...}

    • کنترل کننده
    • درخواست

      درخواست

    • رویداد

      ExtendableEvent

    • برمی گرداند

      قول<پاسخ>

  • _handleFetch

    خالی

    تابع _handleFetch به نظر می رسد:

    (request: Request, handler: StrategyHandler) => {...}

    • برمی گرداند

      قول<پاسخ>

  • _handleInstall

    خالی

    تابع _handleInstall به نظر می رسد:

    (request: Request, handler: StrategyHandler) => {...}

    • برمی گرداند

      قول<پاسخ>

  • رسیدگی

    خالی

    یک استراتژی درخواست را اجرا کنید و یک Promise برمی‌گرداند که با یک Response حل می‌شود و همه تماس‌های مربوط به افزونه را فراخوانی می‌کند.

    هنگامی که یک نمونه استراتژی با Workbox workbox-routing.Route ثبت می شود، این روش به طور خودکار زمانی که مسیر مطابقت دارد فراخوانی می شود.

    از طرف دیگر، این روش را می توان در یک شنونده مستقل FetchEvent با ارسال آن به event.respondWith() استفاده کرد.

    تابع handle به نظر می رسد:

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      قول<پاسخ>

  • handleAll

    خالی

    مشابه workbox-strategies.Strategy~handle ، اما به جای اینکه فقط یک Promise برگرداند که به یک Response آن را حل می کند، چندین وعده [response, done] را برمی گرداند، که در آن ( response ) قبلی معادل چیزی است که handle() برمی گرداند. و دومی یک Promise است که پس از تکمیل هر وعده‌ای که به event.waitUntil() به عنوان بخشی از اجرای استراتژی تکمیل شد، برطرف می‌شود.

    شما می توانید منتظر وعده done تا مطمئن شوید که هر کار اضافی انجام شده توسط استراتژی (معمولاً پاسخ های حافظه پنهان) با موفقیت کامل می شود.

    تابع handleAll به نظر می رسد:

    (options: FetchEvent | HandlerCallbackOptions) => {...}

    • گزینه ها

      یک FetchEvent یا یک شی با ویژگی های ذکر شده در زیر.

    • برمی گرداند

      [قول <پاسخ>، قول<باطل>]

      چندین وعده [پاسخ، انجام شد] که می تواند برای تعیین زمان حل شدن پاسخ و همچنین زمانی که کنترل کننده تمام کار خود را تکمیل کرده است، استفاده شود.

urlManipulation()

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

تایپ کنید

تابع

مولفه های

  • { 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 واکشی داده شود.

مولفه های

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

یک شنونده رویداد activate اضافه می کند که پیش کش های ناسازگاری را که توسط نسخه های قدیمی Workbox ایجاد شده اند پاک می کند.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

تابع کمکی که PrecacheController#createHandlerBoundToURL را در نمونه پیش‌فرض PrecacheController فراخوانی می‌کند.

اگر PrecacheController خود را ایجاد می کنید، به جای استفاده از این تابع، PrecacheController#createHandlerBoundToURL را در آن نمونه فراخوانی کنید.

مولفه های

  • آدرس اینترنتی

    رشته

    URL از پیش ذخیره شده که برای جستجوی Response استفاده خواهد شد.

برمی گرداند

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

یک URL را می گیرد و URL مربوطه را که می تواند برای جستجوی ورودی در پیش کش استفاده شود، برمی گرداند.

اگر یک URL نسبی ارائه شده باشد، از محل فایل Service Worker به عنوان پایه استفاده می شود.

برای ورودی های از پیش ذخیره شده بدون اطلاعات بازبینی، کلید حافظه پنهان مانند URL اصلی خواهد بود.

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

مولفه های

  • آدرس اینترنتی

    رشته

    نشانی اینترنتی که کلید حافظه پنهان آن جستجو شود.

برمی گرداند

  • رشته | تعریف نشده

    کلید حافظه پنهان که با آن URL مطابقت دارد.

matchPrecache()

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

تابع کمکی که PrecacheController#matchPrecache در نمونه پیش‌فرض PrecacheController فراخوانی می‌کند.

اگر در حال ایجاد PrecacheController خود هستید، به جای استفاده از این تابع، PrecacheController#matchPrecache در آن نمونه فراخوانی کنید.

مولفه های

  • درخواست

    رشته | درخواست

    کلید (بدون تجدید نظر در پارامترها) برای جستجو در پیش کش.

برمی گرداند

  • قول<پاسخ | تعریف نشده>

precache()

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

موارد را به لیست پیش کش اضافه می کند، هر گونه تکراری را حذف می کند و فایل ها را در حافظه پنهان ذخیره می کند.

این روش را می توان چندین بار فراخوانی کرد.

لطفا توجه داشته باشید: این روش هیچ یک از فایل های کش شده را برای شما ارائه نمی دهد. این فقط فایل ها را پیش کش می کند. برای پاسخ به درخواست شبکه، با workbox-precaching.addRoute تماس بگیرید.

اگر یک آرایه واحد از فایل ها برای پیش کش دارید، فقط می توانید workbox-precaching.precacheAndRoute را فراخوانی کنید.

مولفه های

precacheAndRoute()

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

این روش ورودی ها را به لیست پیش کش اضافه می کند و مسیری را برای پاسخ به رویدادهای واکشی اضافه می کند.

این یک روش راحت است که workbox-precaching.precache و workbox-precaching.addRoute در یک تماس فراخوانی می‌کند.

مولفه های