çalışma kutusu yönlendirme

Service Worker, sayfanın ağ isteklerine müdahale edebilir. Tarayıcıya önbelleğe alınmış içerikle, ağdaki içerikle veya Service Worker'da oluşturulan içerikle yanıt verebilir.

workbox-routing, bu istekleri yanıt sağlayan farklı işlevlere "yönlendirmeyi" kolaylaştıran bir modüldür.

Yönlendirme Nasıl Yapılır?

Bir ağ isteği bir hizmet çalışanı getirme etkinliğine neden olduğunda workbox-routing, sağlanan rotaları ve işleyicileri kullanarak isteğe yanıt vermeyi dener.

Yukarıda dikkat edilmesi gereken önemli noktalar şunlardır:

• İsteğin yöntemi önemlidir. Varsayılan olarak, rotalar GET istekleri için kaydedilir. Diğer istek türlerine müdahale etmek istiyorsanız yöntemi belirtmeniz gerekir.

• Rota kayıt sırası önemlidir. Bir isteği işleyebilecek birden fazla Rota kaydedilirse isteğe yanıt vermek için ilk kaydedilen Rota kullanılır.

Rotaları kaydetmenin birkaç yolu vardır: Geri çağırmaları, normal ifadeleri veya Rota örneklerini kullanabilirsiniz.

Rotalarda Eşleştirme ve İşleme

Çalışma kutusundaki bir "route", iki işlevden fazla değildir: güzergahın bir istekle eşleşip eşleşmediğini belirleyen "eşleme" işlevi ve isteği işlemesi ve bir yanıtla yanıt vermesi gereken bir "handling" işlevi.

Çalışma kutusunda, eşleştirmeyi ve işlemeyi sizin için gerçekleştirecek bazı yardımcılar bulunur. Ancak farklı bir davranış istediğinizi görürseniz özel eşleşme ve işleyici işlevi yazmak en iyi seçenektir.

Bir eşleme geri çağırma işlevi, bir ExtendableEvent, Request ve doğruluk değeri döndürerek eşleştirebileceğiniz bir URL nesnesi geçirilir. Basit bir örnek için, şunun gibi belirli bir URL ile eşleştirme yapabilirsiniz:

const matchCb = ({url, request, event}) => {
  return url.pathname === '/special/url';
};

Çoğu kullanım alanı, url veya request öğesinin incelenmesi / test edilmesiyle kapsanabilir.

İşleyici geri çağırma işlevine, aynı ExtendableEvent, Request ve URL nesnesi ile birlikte "eşleştirme" işlevi tarafından döndürülen değer olan params değeri verilir.

const handlerCb = async ({url, request, event, params}) => {
  const response = await fetch(request);
  const responseBody = await response.text();
  return new Response(`${responseBody} <!-- Look Ma. Added Content. -->`, {
    headers: response.headers,
  });
};

İşleyiciniz, Response olarak çözümlenen bir söz vermelidir. Bu örnekte, async ve await parametrelerini kullanıyoruz. Gelişmiş olarak, dönüş Response değeri bir sözle sarmalanır.

Bu geri çağırmaları şu şekilde kaydedebilirsiniz:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb);

Tek sınırlama, "eşleşme" geri çağırmasının eşzamanlı olarak doğru değer döndürmesi gerektiğidir. Eşzamansız herhangi bir çalışma gerçekleştiremezsiniz. Bunun nedeni, Router öğesinin getirme etkinliğine eşzamanlı olarak yanıt vermesi veya diğer getirme etkinliklerine izin vermesidir.

Normalde "işleyici" geri çağırma işlevi çalışma kutusu stratejileri tarafından sağlanan stratejilerden birini kullanır. Örneğin:

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(matchCb, new StaleWhileRevalidate());

Bu sayfada, workbox-routing konusuna odaklanacağız ancak çalışma kutusu stratejileriyle ilgili bu stratejiler hakkında daha fazla bilgi edinebilirsiniz.

Normal İfade Rotası Kaydetme

Yaygın bir uygulama, "eşleşme" geri çağırması yerine normal ifade kullanmaktır. Workbox, aşağıdaki gibi bunun uygulanmasını kolaylaştırır:

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('/styles/.*\\.css'), handlerCb);

Aynı kaynaktan gelen istekler için isteğin URL'si normal ifadeyle eşleştiği sürece bu normal ifade eşleşir.

• https://example.com/styles/main.css
• https://example.com/styles/nested/file.css
• https://example.com/nested/styles/directory.css

Ancak, kaynaklar arası istekler için normal ifadeler URL'nin başlangıcıyla eşleşmelidir. Bunun nedeni, new RegExp('/styles/.*\\.css') normal ifadesiyle üçüncü taraf CSS dosyalarını eşleştirmenizin pek olası olmamasıdır.

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

Bu davranışı istediyseniz, normal ifadenin URL'nin başlangıcıyla eşleştiğinden emin olmanız yeterlidir. https://cdn.third-party-site.com isteklerini eşleştirmek istersek new RegExp('https://cdn\\.third-party-site\\.com.*/styles/.*\\.css') normal ifadesini kullanabiliriz.

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

Hem yerel hem de üçüncü tarafları eşleştirmek istiyorsanız normal ifadenizin başında bir joker karakter kullanabilirsiniz, ancak web uygulamanızda beklenmedik davranışlara neden olmadığından emin olmak için bunu dikkatli bir şekilde yapmanız gerekir.

Navigasyon Rotası Kaydetme

Siteniz tek sayfalık bir uygulamaysa tüm gezinme isteklerine belirli bir yanıt döndürmek için NavigationRoute kullanabilirsiniz.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler);
registerRoute(navigationRoute);

Bir kullanıcı tarayıcıda sitenize gittiğinde sayfa isteği bir gezinme isteği olur ve bu sayfa için önbelleğe alınmış sayfa (/app-shell.html) sunulur. (Not: Sayfayı workbox-precaching aracılığıyla veya kendi yükleme adımınız aracılığıyla önbelleğe almış olmanız gerekir.)

Varsayılan olarak bu seçenek, tüm gezinme isteklerine yanıt verir. URL'lerin bir alt kümesine yanıt vermesini kısıtlamak istiyorsanız bu rotayla eşleşen sayfaları kısıtlamak için allowlist ve denylist seçeneklerini kullanabilirsiniz.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler, {
  allowlist: [new RegExp('/blog/')],
  denylist: [new RegExp('/blog/restricted/')],
});
registerRoute(navigationRoute);

Unutulmaması gereken tek şey, bir URL hem allowlist hem de denylist içindeyse denylist kazanacağıdır.

Varsayılan İşleyici Ayarlama

Bir rotayla eşleşmeyen istekler için bir "işleyici" sağlamak isterseniz varsayılan işleyici ayarlayabilirsiniz.

import {setDefaultHandler} from 'workbox-routing';

setDefaultHandler(({url, event, params}) => {
  // ...
});

Yakalama İşleyicisi ayarlayın

Rotalarınızdan herhangi birinin hata vermesi durumunda, bir yakalama işleyici ayarlayarak bilgileri sorunsuz bir şekilde yakalayabilir ve düzeyini düşürebilirsiniz.

import {setCatchHandler} from 'workbox-routing';

setCatchHandler(({url, event, params}) => {
  ...
});

GET Olmayan İstekler için Rota Tanımlama

Varsayılan olarak tüm rotaların GET istekleri için olduğu varsayılır.

POST isteği gibi diğer istekleri yönlendirmek isterseniz rotayı kaydederken yöntemi tanımlamanız gerekir. Örneğin:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb, 'POST');
registerRoute(new RegExp('/api/.*\\.json'), handlerCb, 'POST');

Yönlendirici Günlük Kaydı

workbox-routing adresindeki günlükleri kullanarak hangi URL'lerin Workbox üzerinden işlendiğini vurgulayan günlükleri kullanarak istek akışını belirleyebilmeniz gerekir.

Daha ayrıntılı bilgiye ihtiyacınız varsa Yönlendirici tarafından işlenmeyen isteklerdeki günlükleri görüntülemek için günlük düzeyini debug olarak ayarlayabilirsiniz. Günlük düzeyini ayarlama hakkında daha fazla bilgi edinmek için hata ayıklama kılavuzumuza göz atın.

Gelişmiş Kullanım

Workbox Yönlendiricisine ne zaman istek verileceği konusunda daha fazla kontrol sahibi olmak istiyorsanız kendi Router örneğinizi oluşturabilir ve bir isteğe yanıt vermek için yönlendiriciyi her kullanmak istediğinizde handleRequest() yöntemini çağırabilirsiniz.

import {Router} from 'workbox-routing';

const router = new Router();

self.addEventListener('fetch', event => {
  const {request} = event;
  const responsePromise = router.handleRequest({
    event,
    request,
  });
  if (responsePromise) {
    // Router found a route to handle the request.
    event.respondWith(responsePromise);
  } else {
    // No route was found to handle the request.
  }
});

Router öğesini doğrudan kullanırken rotaları kaydetmek için Route sınıfını veya genişleten sınıflardan herhangi birini de kullanmanız gerekir.

import {Route, RegExpRoute, NavigationRoute, Router} from 'workbox-routing';

const router = new Router();
router.registerRoute(new Route(matchCb, handlerCb));
router.registerRoute(new RegExpRoute(new RegExp(...), handlerCb));
router.registerRoute(new NavigationRoute(handlerCb));

workbox-routing.registerRoute(
  capture: string|RegExp|RouteMatchCallback|Route,
  handler?: RouteHandler,
  method?: HTTPMethod,
)

workbox-routing.setCatchHandler(
  handler: RouteHandler,
)

workbox-routing.setDefaultHandler(
  handler: RouteHandler,
)