ç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.

Not:workbox-precaching ürününün önceki sürümleri, önbelleğin url ve revision özelliklerine sahip nesnelerin yanı sıra dize URL'leri içermesine olanak tanıyordu. Sürüm 5'te bunun desteği sonlandırılmıştır. Artık her zaman bir nesne iletmeniz ve Workbox'ın önbellekteki URL'yi düzeltmesini önlemek için revision özelliğini açıkça null olarak ayarlamanız gerekir. Dize geçirme işlemi, sürüm 5'te uyarıyla birlikte çalışmaya devam edecek ancak sürüm 6'da artık desteklenmeyecek.

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.

Uyarı:Bu ön önbellek manifestini oluşturmak için Workbox'ın derleme araçlarından birini kullanmanız önemle tavsiye edilir. Düzeltme bilgileri URL'nin içeriğini yansıtmadığı sürece önceden önbelleğe alınan URL'ler güncel tutulmaz. Bu nedenle düzeltme bilgilerini hiçbir zaman "el ile yazılmış" bir manifeste kod olarak gömün.

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

Not: Kendi PrecacheController örneğinizi kullanıyorsanız, precacheAndRoute aracılığıyla varsayılan örneği kullanmak yerine doğrudan bu örnek üzerinde matchPrecache() veya getCacheKeyForURL() yöntemlerini çağırmanız gerekir.

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ı

  • returns

    PrecacheController

• 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

  • returns

    Promise<CleanupResult>

• 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.

  • returns

    RouteHandlerCallback

• 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

  • returns

    Promise<InstallResult>

• 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)[]) => {...}

  • entries

    (dize | 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ı

  • returns

    PrecacheFallbackPlugin

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

• oluşturucu

  void

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

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

  • precacheController

    PrecacheController

    Hem istekleri eşleştirmek hem de getirme etkinliklerine yanıt vermek için kullanılan bir PrecacheController örneği.

  • seçenekler

    PrecacheRouteOptions isteğe bağlı

  • returns

    PrecacheRoute

• catchHandler

  RouteHandlerObject isteğe bağlı

• handler

  RouteHandlerObject

• eşleştir

  RouteMatchCallback

• method

  HTTPMethod

• setCatchHandler

  void

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

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

  • handler

    RouteHandler

    Bir Yanıta çözümlenen Promise döndüren

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ı

  • returns

    PrecacheStrategy

• cacheName

  dize

• fetchOptions

  RequestInit isteğe bağlı

• matchOptions

  CacheQueryOptions isteğe bağlı

• plugins

  WorkboxPlugin[]

• copyRedirectedCacheableResponsesPlugin

  WorkboxPlugin

• defaultPrecacheCacheabilityPlugin

  WorkboxPlugin

• _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

    StrategyHandler

  • istek

    İstek

  • event

    ExtendableEvent

  • returns

    Promise<void>

• _getResponse

  void

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

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

  • handler

    StrategyHandler

  • istek

    İstek

  • event

    ExtendableEvent

  • returns

    Söz<Yanıt>

• _handleFetch

  void

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

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

  • istek

    İstek

  • handler

    StrategyHandler

  • returns

    Söz<Yanıt>

• _handleInstall

  void

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

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

  • istek

    İstek

  • 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

• plugins

  WorkboxPlugin[]

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

• seçenekler

  PrecacheRouteOptions isteğe bağlı

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

• RouteHandlerCallback

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

• entries

  (dize | PrecacheEntry)[]

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

• entries

  (dize | PrecacheEntry)[]

  Önbelleğe alınacak giriş dizisi.

• seçenekler

  PrecacheRouteOptions isteğe bağlı