çalışma kutusu önbelleğine alma

Service Worker'ların bir özelliği, hizmet çalışanı yükleme sırasında bir grup dosyayı önbelleğe kaydedebilmesidir. İçeriği hizmet çalışanının kullanımından önce önbelleğe aldığınız için buna genellikle "önbelleğe alma" adı verilir.

Bunu yapmanın ana nedeni, geliştiricilere önbellek üzerinde kontrol olanağı sağlamasıdır. Yani bir dosyanın ne zaman ve ne kadar süre önbellekte tutulacağını belirleyebilir, ayrıca dosyayı ağa gitmeden tarayıcıya sunabilirler. Diğer bir deyişle, dosya çevrimdışı çalışan web uygulamaları oluşturmak için kullanılabilir.

Workbox, API'yi basitleştirerek ve öğelerin verimli bir şekilde indirilmesini sağlayarak önceden önbelleğe alma işleminin zahmetli kısmını üstlenir.

Çalışma kutusu ön belleğe almanın 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 Service Worker etkinliklerini bağlar. Zaten sürüm oluşturma bilgileri (içerik karması gibi) bulunan URL'ler, başka herhangi bir değişiklik yapılmadan önbellek anahtarı olarak kullanılır. Sürüm oluşturma bilgilerini içermeyen URL'lerin önbellek anahtarlarına eklenen fazladan bir URL sorgu parametresi vardır. Bu parametre, Workbox'ın derleme sırasında oluşturduğu içeriklerinin karmasını temsil eder.

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

Bir kullanıcı daha sonra web uygulamanızı yeniden ziyaret ettiğinde ve önceden önbelleğe alınmış farklı öğelere sahip yeni bir hizmet çalışanınız olduğunda workbox-precaching, yeni listeyi inceleyerek hangi öğelerin tamamen yeni olduğunu, hangilerinin revizyonlarına bağlı olarak mevcut öğelerden hangilerinin güncellenmesi gerektiğini belirler. Yeni öğeler veya güncellenen düzeltmeler, yeni hizmet çalışanının install etkinliği sırasında ö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 mevcut URL'lerin listesinde artık bulunmayan önbelleğe alınmış öğeler olup olmadığını 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 yeni öğelere sahip olmasını sağlar ve yalnızca değiştirilen dosyaları indirir.

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

precacheAndRoute() veya addRoute() çağrıları, önceden önbelleğe alınmış URL istekleriyle eşleşen bir rota oluşturur.

Bu rotada kullanılan yanıt stratejisi önbelleğe öncelik yöntemidir: Önbelleğe alınan yanıt yoksa (beklenmeyen bir hata nedeniyle) önbelleğe alınmış yanıt kullanılır. Böyle bir durumda bunun yerine ağ yanıtı kullanılır.

precacheAndRoute() veya addRoute() çağrılarını hangi sırayla yaptığınız önemlidir. Normalde registerRoute() ile ek rotalar kaydetmeden önce bu parametreyi Service Worker dosyanızda erken bir aşamada çağırmanız gerekir. Önce registerRoute() yöntemini çağırdıysanız ve bu rota gelen bir istekle eşleştiyse yanıt vermek için workbox-precaching tarafından kullanılan önbellek öncelikli strateji yerine söz konusu ek rotada tanımladığınız strateji kullanılır.

Ön Önbellek Listesinin Açıklaması

workbox-precaching, url ve revision özelliklerine sahip bir nesne dizisi bekler. Bu diziye bazen ön önbellek manifesti denir:

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'yi referans alır.

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

İlk nesne (/index.html), dosya içeriğinin otomatik oluşturulan bir karması olan düzeltme özelliğini açıkça ayarlar. JavaScript ve CSS kaynaklarından farklı olarak HTML dosyalarının URL'lerinde düzeltme bilgileri genellikle yer alamaz. Aksi takdirde, web'de bu dosyaların bağlantıları, sayfanın içeriği her değiştiğinde bozulabilir.

Workbox, precacheAndRoute() ürününe bir düzeltme özelliği geçirerek 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çlarla birlikte gelir:

  • workbox-build: Bu, bir gulp görevinde veya npm çalıştırma komut dosyası olarak kullanılabilen bir düğüm paketidir.
  • workbox-webpack-plugin: web paketi kullanıcıları bu eklentiyi kullanabilir.
  • workbox-cli: CLI'mız, öğe listesini oluşturmak ve bunları hizmet çalışanınıza eklemek için de kullanılabilir.

Önbelleğe Alınmış Dosyalar için Gelen İstekler

workbox-precaching ürününün ilk aşamada yapacağı şeylerden biri, gelen ağ isteklerini önceden önbelleğe alınmış dosyaları eşleştirmeyi deneyecek şekilde değiştirmektir. Bu, web'deki yaygın uygulamalara uygundur.

Örneğin, / ile ilgili istek genellikle /index.html adresindeki dosya tarafından karşılanabilir.

Aşağıda, workbox-precaching tarafından varsayılan olarak gerçekleştirilen işlemelerin listesi ve bu davranışı nasıl değiştirebileceğiniz açıklanmıştır.

URL Parametrelerini Yok Say

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

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

ignoreURLParametersMatching kullanarak farklı arama parametreleri 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

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

directoryIndex ayarını yaparak bu ayarı 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,
  }
);

URL'leri temizle

Bir istek ön önbellekle eşleşmezse "temiz" URL'leri (diğer adıyla "güzel" URL'ler) desteklemek için sonuna .html ekleriz. Bu, /about gibi bir isteğin /about.html için önbelleğe alınmış giriş tarafından işleneceği anlamına gelir.

cleanUrls ayarını yaparak 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 isterseniz urlManipulation seçeneğini kullanabilirsiniz. Bu, olası eşleşmelerden oluşan bir dizi döndüren bir geri çağırma 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];
    },
  }
);

Gelişmiş Kullanım

PrecacheController'ı Doğrudan Kullanma

workbox-precaching, varsayılan olarak install ve activate işleyicilerini sizin için ayarlar. Service Worker'lara aşina olan geliştiriciler, daha fazla denetime ihtiyaç duyduğunda bu pek hoş olmayabilir.

Öğeleri önceden önbelleğe almak, bu öğelerin ne zaman yükleneceğini ve temizlemenin ne zaman gerçekleşeceğini belirlemek için varsayılan dışa aktarmayı kullanmak yerine doğrudan PrecacheController 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(...));
});

Önceden Önbelleğe Alınmış Öğeleri Doğrudan Okuma

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

Genel olarak, önceden önbelleğe alınmış Response nesnelerini elde etmek için Cache Storage API'yi kullanabilirsiniz, ancak önemli bir nokta vardır: cache.match() çağrılırken kullanılması gereken URL önbellek anahtarı, workbox-precaching tarafından otomatik olarak oluşturulup sürdürülen bir sürüm oluşturma parametresi içerebilir.

Doğru önbellek anahtarını almak için getCacheKeyForURL() yöntemini çağırabilir, orijinal URL'yi iletebilir ve daha sonra, sonucu kullanarak uygun önbellekte cache.match() işlemi 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, yalnızca önceden önbelleğe alınmış Response nesnesine ihtiyacınız varsa matchPrecache() yöntemini çağırabilirsiniz. Bu işlem otomatik olarak doğru önbellek anahtarını kullanır ve doğru önbellekte arama yapar:

import {matchPrecache} from 'workbox-precaching';

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

Eski Ön Önbelleği Temizleme

Workbox'ın çoğu sürümü, önceden önbelleğe alınmış verileri depolamak için aynı biçimi kullanır ve Workbox'ın eski sürümleri tarafından oluşturulan ön önbellekler, normalde yeni sürümler tarafından olduğu gibi kullanılabilir. Bununla birlikte, nadiren de olsa, depolama alanının önceden önbelleğe alınmasında, mevcut kullanıcıların her şeyi yeniden indirmesini gerektiren ve daha önce önbelleğe alınmış verileri geçersiz kılacak zarar veren bir değişiklik olur. (Workbox v3 ve v4 sürümleri arasında böyle bir değişiklik yaşandı.)

Bu eski veriler normal işlemleri etkilemez ancak genel depolama alanı kotanıza da katkıda bulunur ve verilerin açıkça silinmesi kullanıcılarınıza daha dostça olabilir. Bunu, cleanupOutdatedCaches() aracını hizmet çalışanınıza ekleyerek veya hizmet çalışanınızı oluşturmak için Workbox'ın derleme araçlarından birini kullanıyorsanız cleanupOutdatedCaches: true özelliğini 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üğünün uygulanmasıyla sunulan ek garantileri görmek isteyebilir.

İsteğe bağlı olarak integrity adlı ek bir özellik, ön önbellek manifestindeki herhangi bir girişe eklenebilir. Bu değer sağlanırsa önbelleği doldurmak için kullanılan Request oluşturulurken integrity değeri olarak kullanılır. Bir uyuşmazlık varsa önbelleğe alma işlemi başarısız olur.

Hangi ön önbellek manifest girişlerinin integrity özelliklerine sahip olması gerektiğini belirleme ve kullanılacak uygun değerleri belirlemek, Workbox'ın derleme araçlarının kapsamı dışındadır. Bunun yerine, bu işlevi etkinleştirmek isteyen geliştiricilerin, uygun bilgileri eklemek için Workbox'ın oluşturduğu ön önbellek manifestini değiştirmesi gerekir. Workbox'ın oluşturma araçları yapılandırmasındaki manifestTransform seçeneği şu konularda 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 etkili bir şekilde önbelleğe alınmasını sağlar.

Özellikler

  • oluşturucu

    void

    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

    void

    Mevcut ön önbellek manifestinde artık bulunmayan öğeleri siler. Service Worker'ı etkinleştirme etkinliğinden bu yöntemi çağırın.

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

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

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

    • event

      ExtendableEvent

  • addToCacheList

    void

    Bu yöntem, öğeleri önbelleğe alma listesine ekleyerek 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

    void

    Önbellekte url araması yapan (hesap düzeltme bilgileri dikkate alınarak) ve ilgili 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 araması için kullanılacak önceden önbelleğe alınmış URL.

  • getCacheKeyForURL

    void

    Belirli bir URL'yi depolamak için kullanılan önbellek anahtarını döndürür. Bu URL, "/dizin.html" gibi sürümlendirilmemişse önbellek anahtarı, arama parametresi eklenmiş orijinal URL olacaktır.

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

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

    • url

      dize

      Önbellek anahtarını aramak istediğiniz bir URL.

    • returns

      dize

      Orijinal URL için bir önbellek anahtarına karşılık gelen sürüm oluşturulmuş URL'dir veya bu URL önceden önbelleğe alınmamışsa tanımlanmamış URL'dir.

  • getCachedURLs

    void

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

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

    () => {...}

    • returns

      dize[]

      Önbelleğe alınmış URL'ler.

  • getIntegrityForCacheKey

    void

    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ımsızdır.

  • getURLsToCacheKeys

    void

    URL'nin düzeltme bilgilerini dikkate alarak, ö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

      Harita<stringstring>

      Anahtar eşlemeyi önbelleğe alacak URL.

  • yükle

    void

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

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

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

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

    • event

      ExtendableEvent

  • matchPrecache

    void

    Bu, aşağıdaki farklılıklarla birlikte cache.match() için vazgeçilmez bir yedek görevi görür:

    • Önbelleğin adını bilir ve yalnızca bu önbelleği kontrol eder.
    • Bu, sürüm parametreleri olmadan "orijinal" URL'yi aktarmanıza olanak tanır ve o URL'nin şu anda etkin olan düzeltmesi için otomatik olarak doğru önbellek anahtarını arar.

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

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

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

    • istek

      dize | İstek

      Ön önbellekte aranacak anahtardır (parametreleri düzeltme olmadan).

    • returns

      Söz<Yanıt>

  • önden belleğe almak

    void

    Hizmet çalışanı yüklendiğinde tüm kopyaları kaldırarak öğeleri önbelleğe alma listesine ekler ve dosyaları önbellekte depolar.

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

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

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

PrecacheEntry

Özellikler

  • doğruluk

    string isteğe bağlı

  • düzeltme

    string isteğe bağlı

  • url

    dize

PrecacheFallbackPlugin

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

Bunu, handlerDidError eklentisinin geri çağırmasını engelleyerek ve önceden önbelleğe alınmış bir yanıt döndürerek beklenen düzeltme parametresini otomatik olarak hesaba katar.

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ı kullanır.

Özellikler

  • oluşturucu

    void

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

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

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

    • config

      nesne

      • fallbackURL

        dize

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

      • precacheController

        PrecacheController isteğe bağlı

PrecacheRoute

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

Özellikler

PrecacheRouteOptions

Özellikler

  • cleanURLs

    boole isteğe bağlı

  • directoryIndex

    string isteğe bağlı

  • ignoreURLParametersMatching

    RegExp[] isteğe bağlı

  • urlManipulation

    urlManipulation isteğe bağlı

PrecacheStrategy

Özellikle önceden önbelleğe alınmış öğeleri önbelleğe almak ve getirmek için workbox-precaching.PrecacheController ile çalışacak şekilde tasarlanmış bir workbox-strategies.Strategy uygulamasıdır.

Not: PrecacheController oluşturulurken otomatik olarak bu sınıfın bir örneği oluşturulur. Oluşturmayı genellikle kendiniz yapmanız gerekmez.

Özellikler

  • oluşturucu

    void

    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
  • copyRedirectedCacheableResponsesPlugin
  • defaultPrecacheCacheabilityPlugin
  • _awaitComplete

    void

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

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

    • responseDone

      Söz<Yanıt>

    • handler
    • istek

      İstek

    • event

      ExtendableEvent

    • returns

      Promise<void>

  • _getResponse

    void

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

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

    • returns

      Söz<Yanıt>

  • _handleFetch

    void

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

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

    • returns

      Söz<Yanıt>

  • _handleInstall

    void

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

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

    • returns

      Söz<Yanıt>

  • herkese açık kullanıcı adı

    void

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

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

    Alternatif olarak bu yöntem event.respondWith() işlevine geçirilerek bağımsız bir FetchEvent işleyicide kullanılabilir.

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

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

    • seçenekler

      FetchEvent | HandlerCallbackOptions

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

    • returns

      Söz<Yanıt>

  • handleAll

    void

    workbox-strategies.Strategy~handle'a benzer, ancak sadece Response olarak çözümlenen bir Promise döndürmek yerine, birkaç [response, done] vaadi döndürür. İlki (response) handle() tarafından gönderilenle eşdeğerdir, ikincisi ise stratejiyi gerçekleştirmenin bir parçası olarak event.waitUntil() öğesine eklenen tüm vaatler tamamlandığında çözüme kavuşturulan bir Sözdür.

    Stratejinin (genellikle yanıtları önbelleğe alma) başarıyla tamamladığından emin olmak için done sözünü bekleyebilirsiniz.

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

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

    • seçenekler

      FetchEvent | HandlerCallbackOptions

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

    • returns

      [Promise<Response>, Promise<void>]

      Birkaç [yanıt, tamamlandı] vaadi, yanıtın ne zaman çözümleneceğini ve işleyicinin tüm çalışmasını ne zaman tamamladığını belirlemek için kullanılabilecektir.

urlManipulation()

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

Tür

işlev

Parametreler

  • { url }

    nesne

    • url

      URL

İlerlemeler

  • URL[]

Yöntemler

addPlugins()

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

Önbelleğe alma stratejisine eklentiler ekler.

Parametreler

addRoute()

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

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

Önceden önbelleğe alınmamış öğe istekleri, FetchEvent yanıtlanmaz. Bu da, etkinliğin diğer fetch etkinlik dinleyicilerine geçmesine olanak tanır.

Parametreler

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

Workbox'ın 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 çağıran yardımcı işlev.

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

Parametreler

  • url

    dize

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

İlerlemeler

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

Bir URL'yi alır ve ön önbellekteki girişi aramak için kullanılabilecek ilgili URL'yi döndürür.

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

Düzeltme bilgileri olmayan önceden önbelleğe alınmış 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 önbellek anahtarı, düzeltme bilgilerinin takibi için kullanılan bir sorgu parametresi eklenerek orijinal URL olur.

Parametreler

  • url

    dize

    Önbellek anahtarı aranacak URL.

İlerlemeler

  • dize | tanımlanmamış

    Bu URL'ye karşılık gelen önbellek anahtarı.

matchPrecache()

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

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

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

Parametreler

  • istek

    dize | İstek

    Ön önbellekte aranacak anahtardır (parametreleri düzeltme olmadan).

İlerlemeler

  • Promise<Response | undefined>

precache()

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

Hizmet çalışanı yüklendiğinde tüm kopyaları kaldırarak öğeleri önbelleğe alma listesine ekler ve dosyaları önbellekte depolar.

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

Lütfen dikkat: Bu yöntem, önbelleğe alınan dosyaların hiçbirini sizin için yayınlamaz. Yalnızca dosyaları önbelleğe alır. Bir ağ isteğine yanıt vermek için workbox-precaching.addRoute numaralı telefonu arayın.

Önbelleğe alınacak tek bir dosya diziniz varsa workbox-precaching.precacheAndRoute çağrısı yapmanız yeterlidir.

Parametreler

precacheAndRoute()

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

Bu yöntem, girişleri önbellek listesine ekler ve getirme etkinliklerine yanıt vermek için bir rota ekler.

Bu, workbox-precaching.precache ve workbox-precaching.addRoute uygulamalarını tek bir çağrıda çağıran, kullanımı kolay bir yöntemdir.

Parametreler