çalışma kutusu önbelleğine alma

Hizmet işçilerinin bir özelliği, hizmet işçisi yüklenirken bir dizi dosyayı önbelleğe kaydetme olanağıdır. Hizmet çalışanı kullanılmadan önce içeriği önbelleğe aldığınız için bu işleme genellikle "önbelleğe alma" denir.

Bunun başlıca nedeni, geliştiricilere önbellek üzerinde kontrol sağlamasıdır. Bu sayede, bir dosyanın ne zaman ve ne kadar süreyle önbelleğe alınacağını belirleyebilir ve ağa gitmeden tarayıcıya sunabilirler. Bu da çevrimdışı çalışan web uygulamaları oluşturmak için kullanılabilir.

Workbox, API'yi basitleştirerek ve öğelerin verimli bir şekilde indirildiğinden emin olarak önbelleğe alma işleminin büyük bir kısmını üstlenir.

workbox-önbelleğe alma işlevinin işleyiş şekli

Bir web uygulaması ilk kez yüklendiğinde workbox-precaching, indirmek istediğiniz tüm öğeleri inceler, yinelenen öğeleri kaldırır ve öğeleri indirip depolamak için ilgili hizmet çalışanı etkinliklerini bağlar. Sürüm bilgilerini (içerik karması gibi) zaten içeren URL'ler, başka bir değişiklik yapılmadan önbelleğe alma anahtarı olarak kullanılır. Sürüm bilgilerini içermeyen URL'lerin önbelleğe alma anahtarına, Workbox'un derleme sırasında oluşturduğu içeriğin karmasını temsil eden ek bir URL sorgu parametresi eklenir.

workbox-precaching, tüm bunları hizmet çalışanının install etkinliği sırasında yapar.

Bir kullanıcı web uygulamanızı daha sonra tekrar ziyaret ettiğinde ve farklı önceden önbelleğe alınmış öğeler içeren yeni bir hizmet çalışanınız varsa workbox-precaching yeni listeye bakar ve hangi öğelerin tamamen yeni olduğunu, hangi mevcut öğelerin güncellenmesi gerektiğini düzeltmelerine göre belirler. Yeni hizmet çalışanının install etkinliği sırasında yeni öğeler veya güncelleme düzeltmeleri önbelleğe eklenir.

Bu yeni hizmet çalışanı, activate etkinliği tetiklenene kadar isteklere yanıt vermek için kullanılmaz. workbox-precaching, activate etkinliğinde artık mevcut URL'lerin listesinde bulunmayan önbelleğe alınmış öğeleri kontrol eder ve bunları önbellekten kaldırır.

workbox-precaching, hizmet çalışanınız her yüklendiğinde ve etkinleştirildiğinde bu adımları uygulayarak kullanıcının en son öğelere sahip olmasını sağlar ve yalnızca değişen dosyaları indirir.

Önceden Önbelleğe Alınmış Yanıtları Sunma

precacheAndRoute() veya addRoute() çağrısı yaptığınızda, önceden önbelleğe alınmış URL'ler için isteklerle eşleşen bir rota oluşturulur.

Bu rotada kullanılan yanıt stratejisi önce önbelleğe alma'dır: Önbelleğe alınmış yanıt mevcut değilse (beklenmedik bir hata nedeniyle) önceden önbelleğe alınmış yanıt kullanılır. Aksi takdirde ağ yanıtı kullanılır.

precacheAndRoute() veya addRoute()'yi çağırma sırası önemlidir. Genellikle bu işlevi, registerRoute() ile başka rotalar kaydetmeden önce hizmet çalışanı dosyanızın başlarında çağırmak istersiniz. Önce registerRoute() çağrısını yaptıysanız ve bu rota gelen bir istekle eşleştiyse yanıt vermek için workbox-precaching tarafından kullanılan önbelleğe öncelik stratejisi yerine, bu ek rotada tanımladığınız strateji kullanılır.

Önbelleğe Alma Listesi'nin Açıklaması

workbox-precaching, url ve revision özelliğine sahip bir nesne dizisi bekler. Bu dizi bazen ön önbelleğe alma manifesti olarak adlandırılır:

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 ...
]);

Bu liste, her biri kendi "düzeltme" bilgilerine sahip bir dizi URL'ye referans verir.

Yukarıdaki örnekteki ikinci ve üçüncü nesne için revision özelliği null olarak ayarlanmıştır. Bunun nedeni, düzeltme bilgilerinin URL'de bulunmasıdır. Bu, genellikle statik öğeler için en iyi uygulamadır.

İlk nesne (/index.html), dosya içeriğinin otomatik olarak oluşturulmuş karması olan bir düzeltme mülkünü açıkça ayarlar. JavaScript ve CSS kaynaklarının aksine, HTML dosyaları genellikle URL'lerine düzeltme bilgilerini ekleyemez. Aksi takdirde, web'deki bu dosyalara ait bağlantılar sayfanın içeriği her değiştiğinde bozulur.

Workbox, precacheAndRoute() özelliğine bir düzeltme özelliği ileterek dosyanın ne zaman değiştiğini anlayabilir ve dosyayı buna göre güncelleyebilir.

Workbox, bu listeyi oluşturmanıza yardımcı olacak araçlar içerir:

  • workbox-build: Bu, gulp görevinde veya npm çalıştırma komut dosyası olarak kullanılabilen bir node paketidir.
  • workbox-webpack-plugin: webpack kullanıcıları bu eklentiyi kullanabilir.
  • workbox-cli: KSA'mız, öğelerin listesini oluşturmak ve bunları hizmet işleyicinize eklemek için de kullanılabilir.

Önbelleğe alınmış dosyalar için gelen istekler

workbox-precaching'ün kutudan çıktığı anda yapacağı şeylerden biri, önceden önbelleğe alınmış dosyaları eşleştirmeye çalışmak için gelen ağ isteklerini değiştirmek olacaktır. Bu, web'deki yaygın uygulamalara uygundur.

Örneğin, / için yapılan bir istek genellikle /index.html adresindeki dosyayla karşılanabilir.

workbox-precaching'ün varsayılan olarak gerçekleştirdiği manipülasyonların listesi ve bu davranışı nasıl değiştirebileceğiniz aşağıda verilmiştir.

URL parametrelerini yoksayma

Arama parametreleri içeren istekler, belirli değerleri veya tüm değerleri kaldıracak şekilde değiştirilebilir.

Varsayılan olarak, utm_ ile başlayan veya fbclid ile tam olarak eşleşen arama parametreleri kaldırılır. Bu, /about.html?utm_campaign=abcd için yapılan bir isteğin /about.html için önceden önbelleğe alınmış bir girişle karşılandığı anlamına gelir.

ignoreURLParametersMatching kullanarak farklı bir arama parametresi grubunu yoksayabilirsiniz:

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: [/.*/],
  }
);

Dizin dizini

/ ile biten istekler varsayılan olarak sonuna index.html eklenmiş girişlerle eşleştirilir. Bu, / için gelen bir isteğin, önceden önbelleğe alınmış /index.html girişiyle otomatik olarak işlenebilir olduğu anlamına gelir.

directoryIndex değerini ayarlayarak bu ayarı başka bir şeyle değiştirebilir veya tamamen devre dışı bırakabilirsiniz:

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,
  }
);

Taranabilir URL'ler

Bir istek önbelleğe alma ile eşleşmezse "temiz" URL'leri ("güzel" URL'ler olarak da bilinir) desteklemek için sonuna .html ekleriz. Bu, /about gibi bir isteğin /about.html için önceden önbelleğe alınmış giriş tarafından işlenmesi anlamına gelir.

cleanUrls değerini ayarlayarak bu davranışı devre dışı bırakabilirsiniz:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

Özel Manipülasyonlar

Gelen isteklerden önceden önbelleğe alınmış öğelere özel eşleşmeler tanımlamak istiyorsanız bunu urlManipulation seçeneğiyle yapabilirsiniz. Bu, olası eşleşmelerden oluşan bir dizi döndüren bir geri çağırma işlevi olmalıdır.

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];
    },
  }
);

İleri Seviye Kullanım

PrecacheController'ı Doğrudan Kullanma

Varsayılan olarak workbox-precaching, install ve activate dinleyicilerini sizin için ayarlar. Hizmet çalışanlarına aşina olan geliştiriciler, daha fazla kontrole ihtiyaç duyuyorsa bu yöntemi tercih etmeyebilir.

Varsayılan dışa aktarma işlemini kullanmak yerine, ön önbelleğe öğe eklemek, bu öğelerin ne zaman yükleneceğini ve ne zaman temizleneceğini belirlemek için doğrudan PrecacheController öğesini kullanabilirsiniz.

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(...));
});

Önbelleğe alınmış öğeleri doğrudan okuma

workbox-precaching'ün otomatik olarak gerçekleştirebileceği yönlendirme bağlamının dışında, önceden önbelleğe alınmış bir öğeyi doğrudan okumanız gerekebilir. Örneğin, daha sonra tam bir yanıt oluştururken alınması ve kullanılması gereken kısmi HTML şablonlarını önceden önbelleğe almak isteyebilirsiniz.

Genel olarak, önceden önbelleğe alınmış Response nesnelerini almak için Cache Storage API'yi kullanabilirsiniz. Ancak bir sorun vardır: cache.match() çağrılırken kullanılması gereken URL önbelleği anahtarı, workbox-precaching'in otomatik olarak oluşturduğu ve sürdürdüğü bir sürüm parametresi içerebilir.

Doğru önbelleğe alma anahtarını almak için getCacheKeyForURL()'u çağırabilir, orijinal URL'yi iletebilir ve ardından sonucu kullanarak uygun önbellekte cache.match() gerçekleştirebilirsiniz.

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'));

Alternatif olarak, ihtiyacınız olan tek şey önceden önbelleğe alınmış Response nesnesiyse matchPrecache() işlevini çağırabilirsiniz. Bu işlev, doğru önbelleğe alma anahtarını otomatik olarak kullanır ve doğru önbellekte arama yapar:

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

Eski önbellekleri temizleme

Workbox'un çoğu sürümü, önceden önbelleğe alınan verileri depolamak için aynı biçimi korur ve Workbox'un eski sürümleri tarafından oluşturulan önbelleğe alma işlemleri normalde yeni sürümler tarafından olduğu gibi kullanılabilir. Ancak depolama alanındaki önbelleğe alma işleminde, mevcut kullanıcıların her şeyi yeniden indirmesini gerektiren ve önceden önbelleğe alınmış verileri geçersiz kılan önemli değişiklikler nadiren gerçekleşir. (Workbox 3.0 ve 4.0 sürümleri arasında böyle bir değişiklik yapıldı.)

Bu eski veriler normal işlemleri etkilemez ancak genel depolama alanı kotanızın kullanımına katkıda bulunur. Bu nedenle, kullanıcılarınız için bu verileri açıkça silmek daha iyi olabilir. Bunu, hizmet çalışanınıza cleanupOutdatedCaches() ekleyerek veya hizmet çalışanınızı oluşturmak için Workbox'un derleme araçlarından birini kullanıyorsanız cleanupOutdatedCaches: true ayarlayarak yapabilirsiniz.

Alt Kaynak Bütünlüğünü Kullanma

Bazı geliştiriciler, önceden önbelleğe alınmış URL'leri ağdan alırken alt kaynak bütünlüğü yaptırımıyla sunulan ek garantilerden yararlanmak isteyebilir.

Ön önbelleğe alma manifestindeki herhangi bir girişe integrity adlı ek ve isteğe bağlı bir özellik eklenebilir. Sağlanırsa önbelleği doldurmak için kullanılan Request oluşturulurken integrity değeri olarak kullanılır. Uyuşmazlık varsa önbelleğe alma işlemi başarısız olur.

Hangi önbelleğe alma manifesti girişlerinin integrity özelliklerine sahip olması gerektiğini belirlemek ve kullanılacak uygun değerleri bulmak, Workbox'un derleme araçlarının kapsamı dışındadır. Bunun yerine, bu işlevi etkinleştirmek isteyen geliştiricilerin, Workbox'un oluşturduğu ön önbelleğe alma manifestini uygun bilgileri eklemek için değiştirmesi gerekir. Workbox'un derleme araçları yapılandırmasında manifestTransform seçeneği şunları yapmanıza yardımcı olabilir:

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.

Türler

CleanupResult

Özellikler

  • deletedCacheRequests

    dize[]

InstallResult

Özellikler

  • notUpdatedURLs

    dize[]

  • updatedURLs

    dize[]

PrecacheController

Öğelerin verimli bir şekilde önbelleğe alınmasını sağlar.

Özellikler

  • oluşturucu

    geçersiz

    Yeni bir PrecacheController oluşturun.

    constructor işlevi şu şekilde görünür: 

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

    • seçenekler

      PrecacheControllerOptions isteğe bağlı

  • strateji

    Strateji

  • etkinleştir

    geçersiz

    Mevcut ön önbelleğe alma manifestinde bulunmayan öğeleri siler. Bu yöntemi, hizmet çalışanı etkinleştirme etkinliğinden çağırın.

    Not: Bu yöntem, event.waitUntil() işlevini sizin için çağırır. Bu nedenle, etkinlik işleyicilerinizde bu işlevi kendiniz çağırmanız gerekmez.

    activate işlevi şu şekilde görünür: 

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

    • etkinlik

      ExtendableEvent

  • addToCacheList

    geçersiz

    Bu yöntem, önbelleğe alma listesine öğe ekler, yinelenen öğeleri kaldırır ve bilgilerin geçerli olmasını sağlar.

    addToCacheList işlevi şu şekilde görünür: 

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

    • entries

      (dize | PrecacheEntry)[]

      Önbelleğe alınacak giriş dizisi.

  • createHandlerBoundToURL

    geçersiz

    Ön önbelleğe alma alanında url değerini arayan (düzeltme bilgilerini dikkate alarak) ve buna karşılık gelen Response değerini döndüren bir işlev döndürür.

    createHandlerBoundToURL işlevi şu şekilde görünür: 

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

    • url

      dize

      Response değerini aramak için kullanılacak önceden önbelleğe alınmış URL.

  • getCacheKeyForURL

    geçersiz

    Belirli bir URL'yi depolamak için kullanılan önbellek anahtarını döndürür. Söz konusu URL sürümsüzse ("/index.html" gibi) önbelleğe alma anahtarı, arama parametresinin eklendiği orijinal URL olur.

    getCacheKeyForURL işlevi şu şekilde görünür: 

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

    • url

      dize

      Önbelleğe alma anahtarını aramak istediğiniz URL.

    • returns

      dize

      Orijinal URL için bir önbellek anahtarına karşılık gelen sürümlü URL veya bu URL önceden önbelleğe alınmadıysa tanımsız.

  • getCachedURLs

    geçersiz

    Mevcut hizmet çalışanı tarafından önceden önbelleğe alınan tüm URL'lerin listesini döndürür.

    getCachedURLs işlevi şu şekilde görünür: 

    () => {...}

    • returns

      dize[]

      Önceden önbelleğe alınan URL'ler.

  • getIntegrityForCacheKey

    geçersiz

    getIntegrityForCacheKey işlevi şu şekilde görünür: 

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

    • cacheKey

      dize

    • returns

      dize

      Önbellek anahtarıyla ilişkili alt kaynak bütünlüğü veya ayarlanmamışsa tanımlanmamış.

  • getURLsToCacheKeys

    geçersiz

    URL'nin düzeltme bilgilerini dikkate alarak önceden önbelleğe alınmış bir URL'nin ilgili önbellek anahtarıyla eşlemesini döndürür.

    getURLsToCacheKeys işlevi şu şekilde görünür: 

    () => {...}

    • returns

      Map<stringstring>

      Anahtar eşlemesini önbelleğe almak için bir URL.

  • yükle

    geçersiz

    Yeni ve güncellenmiş öğeleri önbelleğe alır. Bu yöntemi, hizmet çalışanı yükleme etkinliğinden çağırın.

    Not: Bu yöntem event.waitUntil() işlevini sizin için çağırır. Bu nedenle, etkinlik işleyicilerinizde bu işlevi kendiniz çağırmanız gerekmez.

    install işlevi şu şekilde görünür: 

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

    • etkinlik

      ExtendableEvent

  • matchPrecache

    geçersiz

    Bu, cache.match() için doğrudan değiştirilebilir bir alternatiftir. Aşağıdaki farklılıklar vardır:

    • Ön önbelleğin adını bilir ve yalnızca bu önbelleği kontrol eder.
    • Sürüm parametreleri olmadan "orijinal" bir URL iletmenize olanak tanır ve bu URL'nin etkin düzeltmesi için doğru önbellek anahtarını otomatik olarak arar.

    Örnek: matchPrecache('index.html'), gerçek önbelleğe alma anahtarı '/index.html?__WB_REVISION__=1234abcd' olsa bile, şu anda etkin olan hizmet çalışanı için doğru önceden önbelleğe alınmış yanıtı bulur.

    matchPrecache işlevi şu şekilde görünür: 

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

    • istek

      dize | İstek

      Ön önbellekte aranacak anahtar (düzeltme parametreleri olmadan).

    • returns

      Promise<Response>

  • önbelleğe alma

    geçersiz

    Hizmet işleyici yüklendiğinde, ön önbelleğe alma listesine öğe ekler, yinelenen öğeleri kaldırır ve dosyaları önbelleğe depolar.

    Bu yöntem birden çok kez çağrılabilir.

    precache işlevi şu şekilde görünür: 

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

PrecacheEntry

Özellikler

  • dürüstlük

    dize isteğe bağlı

  • düzeltme

    dize isteğe bağlı

  • url

    dize

PrecacheFallbackPlugin

PrecacheFallbackPlugin, belirli bir strateji yanıt oluşturamadığında kullanılacak "çevrimdışı yedek" yanıt belirtmenize olanak tanır.

Bunu, handlerDidError eklenti geri çağırma işlevini durdurarak ve beklenen düzeltme parametresini otomatik olarak dikkate alarak önceden önbelleğe alınmış bir yanıt döndürerek yapar.

Oluşturucuya açıkça bir PrecacheController örneği iletmediğiniz sürece varsayılan örnek kullanılır. Genel olarak, çoğu geliştirici varsayılan ayarı kullanır.

Özellikler

  • oluşturucu

    geçersiz

    İlişkili fallbackURL ile yeni bir PrecacheFallbackPlugin oluşturur.

    constructor işlevi şu şekilde görünür: 

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

    • yapılandırma

      nesne

      • fallbackURL

        dize

        İlişkili strateji yanıt oluşturamazsa yedek olarak kullanılacak önceden önbelleğe alınmış bir URL.

      • precacheController

        PrecacheController isteğe bağlı

PrecacheRoute

workbox-routing.Route sınıfının, workbox-precaching.PrecacheController örneğini alıp gelen istekleri eşleştirmek ve önbellekten yanıtları almak için kullanan alt sınıfı.

Özellikler

PrecacheRouteOptions

Özellikler

  • cleanURLs

    boole isteğe bağlı

  • directoryIndex

    dize isteğe bağlı

  • ignoreURLParametersMatching

    RegExp[] isteğe bağlı

  • urlManipulation

    urlManipulation isteğe bağlı

PrecacheStrategy

Hem önceden önbelleğe alınmış öğeleri önbelleğe almak hem de getirmek için workbox-precaching.PrecacheController ile birlikte çalışacak şekilde özel olarak tasarlanmış bir workbox-strategies.Strategy uygulaması.

Not: Bir PrecacheController oluşturulurken bu sınıfın bir örneği otomatik olarak oluşturulur. Genellikle bunu kendiniz oluşturmanız gerekmez.

Özellikler

  • oluşturucu

    geçersiz

    constructor işlevi şu şekilde görünür: 

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

    • seçenekler

      PrecacheStrategyOptions isteğe bağlı

  • cacheName

    dize

  • fetchOptions

    RequestInit isteğe bağlı

  • matchOptions

    CacheQueryOptions isteğe bağlı

  • plugins

    WorkboxPlugin[]

  • copyRedirectedCacheableResponsesPlugin

    WorkboxPlugin

  • defaultPrecacheCacheabilityPlugin

    WorkboxPlugin

  • _awaitComplete

    geçersiz

    _awaitComplete işlevi şu şekilde görünür: 

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

    • responseDone

      Promise<Response>

    • handler

      StrategyHandler

    • istek

      İstek

    • etkinlik

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    geçersiz

    _getResponse işlevi şu şekilde görünür: 

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

    • returns

      Promise<Response>

  • _handleFetch

    geçersiz

    _handleFetch işlevi şu şekilde görünür: 

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

    • returns

      Promise<Response>

  • _handleInstall

    geçersiz

    _handleInstall işlevi şu şekilde görünür: 

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

    • returns

      Promise<Response>

  • tanıtıcı

    geçersiz

    Bir istek stratejisi gerçekleştirir ve ilgili tüm eklenti geri çağırma işlevlerini çağırarak Response ile çözülecek bir Promise döndürür.

    Bir strateji örneği bir Workbox'a workbox-routing.Route kaydedildiğinde, rota eşleştiğinde bu yöntem otomatik olarak çağrılır.

    Alternatif olarak bu yöntem, event.respondWith()'a aktarılarak bağımsız bir FetchEvent dinleyicisinde kullanılabilir.

    handle işlevi şu şekilde görünür: 

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

    • seçenekler

      FetchEvent | HandlerCallbackOptions

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      Promise<Response>

  • handleAll

    geçersiz

    workbox-strategies.Strategy~handle'e benzer ancak Response olarak çözülen bir Promise döndürmek yerine [response, done] söz verme bir tuple döndürür. İlki (response), handle()'in döndürdüğü değere eşdeğerdir ve ikincisi, stratejinin uygulanması kapsamında event.waitUntil()'e eklenen tüm söz vermeler tamamlandığında çözülecek bir söz vermedir.

    Strateji tarafından gerçekleştirilen ek çalışmaların (genellikle yanıtları önbelleğe alma) başarıyla tamamlandığından emin olmak için done vaadini bekleyebilirsiniz.

    handleAll işlevi şu şekilde görünür: 

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

    • seçenekler

      FetchEvent | HandlerCallbackOptions

      Aşağıda listelenen özelliklere sahip bir FetchEvent veya nesne.

    • returns

      [Promise<Response>, Promise<void>]

      Yanıtın ne zaman çözüleceğini ve işleyicinin tüm işini ne zaman tamamladığını belirlemek için kullanılabilecek [response, done] ikilisi.

urlManipulation()

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

Tür

işlev

Parametreler

  • { url }

    nesne

    • url

      URL

İadeler

  • URL[]

Yöntemler

addPlugins()

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

Önbelleğe alma stratejisine eklenti ekler.

Parametreler

addRoute()

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

Hizmet çalışanına, önbelleğe alınmış öğelerle [ağ isteklerine]https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests yanıt verecek bir fetch dinleyici ekleyin.

Önceden önbelleğe alınmayan öğelerle ilgili isteklere FetchEvent yanıt verilmez. Bu sayede etkinlik, diğer fetch etkinlik dinleyicilerine iletilir.

Parametreler

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

Workbox'un eski sürümleri tarafından oluşturulan uyumsuz ön önbellekleri temizleyecek bir activate etkinlik işleyici ekler.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

Varsayılan PrecacheController örneğinde PrecacheController#createHandlerBoundToURL işlevini çağıran yardımcı işlev.

Kendi PrecacheController öğenizi oluşturuyorsanız bu işlevi kullanmak yerine ilgili örnekte PrecacheController#createHandlerBoundToURL öğesini çağırın.

Parametreler

  • url

    dize

    Response değerini aramak için kullanılacak önceden önbelleğe alınmış URL.

İadeler

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

Bir URL alır ve önbelleğe alma işleminde girişi aramak için kullanılabilecek ilgili URL'yi döndürür.

Göreli bir URL sağlanırsa temel olarak hizmet çalışanı dosyasının konumu kullanılır.

Düzeltme bilgisi içermeyen önceden önbelleğe alınan girişler için önbellek anahtarı orijinal URL ile aynı olur.

Düzeltme bilgileri içeren önceden önbelleğe alınmış girişler için önbelleğe alma anahtarı, düzeltme bilgilerini takip etmek için kullanılan bir sorgu parametresinin eklendiği orijinal URL olur.

Parametreler

  • url

    dize

    Önbellek anahtarının aranacağı URL.

İadeler

  • dize | undefined

    Söz konusu URL'ye karşılık gelen önbelleğe alma anahtarı.

matchPrecache()

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

Varsayılan PrecacheController örneğinde PrecacheController#matchPrecache işlevini çağıran yardımcı işlev.

Kendi PrecacheController öğenizi oluşturuyorsanız bu işlevi kullanmak yerine ilgili örnekte PrecacheController#matchPrecache'ı çağırın.

Parametreler

  • istek

    dize | İstek

    Ön önbellekte aranacak anahtar (düzeltme parametreleri olmadan).

İadeler

  • Promise<Yanıt | undefined>

precache()

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

Hizmet işleyici yüklendiğinde, ön önbelleğe alma listesine öğe ekler, yinelenenleri kaldırır ve dosyaları önbelleğe depolar.

Bu yöntem birden çok kez çağrılabilir.

Lütfen unutmayın: Bu yöntem, önbelleğe alınmış dosyalardan hiçbirini size sunmaz. Yalnızca dosyaları önbelleğe alır. Bir ağ isteğini yanıtlamak için workbox-precaching.addRoute tuşuna basın.

Önbelleğe alınacak tek bir dosya diziniz varsa workbox-precaching.precacheAndRoute işlevini çağırmanız yeterlidir.

Parametreler

precacheAndRoute()

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

Bu yöntem, önbelleğe alma listesine girişler ve getirme etkinliklerine yanıt vermek için bir rota ekler.

Bu, workbox-precaching.precache ve workbox-precaching.addRoute'i tek bir çağrıda çağıran bir kolaylık yöntemidir.

Parametreler