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));
Türler
NavigationRoute
NavigationRoute, tarayıcı [gezinme istekleri]https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests
ile eşleşen bir workbox-routing.Route
oluşturmayı kolaylaştırır.
Yalnızca https://fetch.spec.whatwg.org/#concept-request-mode|mode
değeri navigate
olarak
ayarlanmış gelen İsteklerle eşleşecektir.
İsteğe bağlı olarak bu rotayı, denylist
ve allowlist
parametrelerinin birini veya her ikisini birden kullanarak yalnızca gezinme isteklerinin bir alt kümesine uygulayabilirsiniz.
Özellikler
-
void
Hem
denylist
hem deallowlist
sağlanırsadenylist
öncelikli olur ve istek bu rotayla eşleşmez.allowlist
vedenylist
içindeki normal ifadeler, istenen URL'nin birleştirilmiş [pathname
]https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/pathname
ve [search
]https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/search
bölümleriyle eşleştirilir.Not: Bu RegExp'ler, gezinme sırasında her hedef URL ile karşılaştırılabilir. Karmaşık RegExp'ler kullanmaktan kaçının. Aksi takdirde kullanıcılarınız sitenizde gezinirken gecikmelerle karşılaşabilir.
constructor
işlevi şu şekilde görünür:(handler: RouteHandler, options?: NavigationRouteMatchOptions) => {...}
-
Promise döndürerek Yanıt'a dönüşen bir geri çağırma işlevi.
-
NavigationRouteMatchOptions isteğe bağlı
-
-
RouteHandlerObject isteğe bağlı
-
HTTPMethod
-
void
setCatchHandler
işlevi şu şekilde görünür:(handler: RouteHandler) => {...}
-
Bir Yanıta çözümlenen Promise döndüren
-
NavigationRouteMatchOptions
Özellikler
-
RegExp[] isteğe bağlı
-
RegExp[] isteğe bağlı
RegExpRoute
RegExpRoute, workbox-routing.Route
tabanlı bir normal ifade oluşturmayı kolaylaştırır.
Aynı kaynaklı istekler için RegExp'in yalnızca URL'nin bir kısmıyla eşleşmesi gerekir. Üçüncü taraf sunuculara yönelik istekler için URL'nin başıyla eşleşen bir RegExp tanımlamanız gerekir.
Özellikler
-
oluşturucu
void
Normal ifade [yakalama grupları]
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references
içeriyorsa yakalanan değerlerworkbox-routing~handlerCallback
params
bağımsız değişkenine aktarılır.constructor
işlevi şu şekilde görünür:(regExp: RegExp, handler: RouteHandler, method?: HTTPMethod) => {...}
-
regExp
RegExp
URL'lerle eşleşecek normal ifade.
-
handler
Promise döndürerek Yanıt'a dönüşen bir geri çağırma işlevi.
-
method
HTTPMethod isteğe bağlı
-
returns
-
-
catchHandler
RouteHandlerObject isteğe bağlı
-
handler
-
eşleştir
-
method
HTTPMethod
-
setCatchHandler
void
setCatchHandler
işlevi şu şekilde görünür:(handler: RouteHandler) => {...}
-
handler
Bir Yanıta çözümlenen Promise döndüren
-
Route
Route
, bir geri çağırma işlevi olan "match" ve "handler"dan oluşur.
"Eşleşme" geri çağırması, bir rotanın mümkünse yanlış olmayan bir değer döndürerek isteği "işlemek" için kullanılıp kullanılmayacağını belirler. "İşleyici" geri çağırması, eşleşme olduğunda çağrılır ve Response
değerine çözümlenen bir Promise döndürmelidir.
Özellikler
-
oluşturucu
void
Rota sınıfı için oluşturucu.
constructor
işlevi şu şekilde görünür:(match: RouteMatchCallback, handler: RouteHandler, method?: HTTPMethod) => {...}
-
eşleştir
Rotanın belirli bir
fetch
etkinliğiyle eşleşip eşleşmediğini belirlemek için yanlış olmayan bir değer döndüren geri çağırma işlevi. -
handler
Bir Yanıta çözümlenen Promise döndüren bir geri çağırma işlevi.
-
method
HTTPMethod isteğe bağlı
-
returns
-
-
catchHandler
RouteHandlerObject isteğe bağlı
-
handler
-
eşleştir
-
method
HTTPMethod
-
setCatchHandler
void
setCatchHandler
işlevi şu şekilde görünür:(handler: RouteHandler) => {...}
-
handler
Bir Yanıta çözümlenen Promise döndüren
-
Router
Yönlendirici, bir veya daha fazla workbox-routing.Route
kullanarak FetchEvent
işlemek için kullanılabilir ve eşleşen rota varsa Response
ile yanıt verir.
Belirli bir istekle eşleşen rota yoksa Yönlendirici, tanımlanmışsa bir "varsayılan" işleyici kullanır.
Eşleşen Rota hata bildirirse Yönlendirici, sorunları sorunsuz şekilde gidermek ve bir İstekle yanıt vermek için tanımlanmışsa bir "catch" işleyicisi kullanır.
Bir istek birden fazla rotayla eşleşirse isteğe yanıt vermek için en eski rota kullanılır.
Özellikler
-
oluşturucu
void
Yeni bir Yönlendirici başlatır.
constructor
işlevi şu şekilde görünür:() => {...}
-
returns
-
-
routes
Map<HTTPMethodRoute[]>
-
addCacheListener
void
Pencereden önbelleğe alınacak URL'ler için bir ileti etkinliği işleyicisi ekler. Bu özellik, Service Worker'ın kontrol etmeye başlamasından önce sayfada yüklenen kaynakları önbelleğe almak için kullanışlıdır.
Pencereden gönderilen mesaj verilerinin biçimi aşağıdaki gibi olmalıdır. Bu durumda
urlsToCache
dizisi, URL dizeleri veya bir URL dizesi +requestInit
nesnesi dizisinden (fetch()
öğesine ileteceğiniz şekilde) oluşabilir.{ type: 'CACHE_URLS', payload: { urlsToCache: [ './script1.js', './script2.js', ['./script3.js', {mode: 'no-cors'}], ], }, }
addCacheListener
işlevi şu şekilde görünür:() => {...}
-
addFetchListener
void
Bir rota, etkinliğin isteğiyle eşleştiğinde etkinliklere yanıt vermek için bir getirme etkinliği işleyicisi ekler.
addFetchListener
işlevi şu şekilde görünür:() => {...}
-
findMatchingRoute
void
Bir isteği ve URL'yi (ve isteğe bağlı olarak bir etkinliği) kayıtlı rotalar listesiyle karşılaştırır ve eşleşme varsa eşleşme tarafından oluşturulan parametrelerle birlikte karşılık gelen rotayı döndürür.
findMatchingRoute
işlevi şu şekilde görünür:(options: RouteMatchCallbackOptions) => {...}
-
seçenekler
-
returns
nesne
route
veparams
özelliklerine sahip bir nesne. Bu alanlar, eşleşen bir rota bulunursa veya başka bir rota bulunursaundefined
doldurulur.
-
-
handleRequest
void
Uygun bir Rotanın işleyicisinden Yanıt almak için bir FetchEvent nesnesine yönlendirme kurallarını uygulayın.
handleRequest
işlevi şu şekilde görünür:(options: object) => {...}
-
seçenekler
nesne
-
event
ExtendableEvent
İsteği tetikleyen etkinlik.
-
istek
İstek
İşlenecek istek.
-
-
returns
Söz<Yanıt>
Kayıtlı bir rota, isteği işleyebilirse bir taahhüt döndürülür. Eşleşen rota yoksa ve
defaultHandler
yoksaundefined
döndürülür.
-
-
registerRoute
void
Yönlendiriciye bir rota kaydeder.
registerRoute
işlevi şu şekilde görünür:(route: Route) => {...}
-
rota
Kayıt yolu.
-
-
setCatchHandler
void
Bir Rota, istek işlenirken hata verirse bu
handler
çağrılır ve yanıt verme şansı verilir.setCatchHandler
işlevi şu şekilde görünür:(handler: RouteHandler) => {...}
-
handler
Promise döndürerek Yanıt'a dönüşen bir geri çağırma işlevi.
-
-
setDefaultHandler
void
Hiçbir rota gelen istekle açıkça eşleşmediğinde çağrılacak varsayılan bir
handler
tanımlayın.Her HTTP yönteminin ("GET", "POST" vb.) kendi varsayılan işleyicisi vardır.
Varsayılan işleyici olmadığında, eşleşmeyen istekler, hizmet çalışanı yokmuş gibi ağa zarar verir.
setDefaultHandler
işlevi şu şekilde görünür:(handler: RouteHandler, method?: HTTPMethod) => {...}
-
handler
Promise döndürerek Yanıt'a dönüşen bir geri çağırma işlevi.
-
method
HTTPMethod isteğe bağlı
-
-
unregisterRoute
void
Bir rotanın yönlendiricideki kaydını siler.
unregisterRoute
işlevi şu şekilde görünür:(route: Route) => {...}
-
rota
Kaydı iptal etme rotası.
-
Yöntemler
registerRoute()
workbox-routing.registerRoute(
capture: string | RegExp | RouteMatchCallback | Route,
handler?: RouteHandler,
method?: HTTPMethod,
)
Önbelleğe alma stratejisiyle bir RegExp, dize veya işlevi tek bir Yönlendirici örneğine kolayca kaydedin.
Bu yöntem, gerekirse sizin için bir Rota oluşturur ve workbox-routing.Router#registerRoute
numaralı telefonu arar.
Parametreler
-
yakalama
string | RegExp | RouteMatchCallback | Rota
Yakalama parametresi bir
Route
ise diğer tüm bağımsız değişkenler yoksayılır. -
handler
RouteHandler isteğe bağlı
-
method
HTTPMethod isteğe bağlı
İlerlemeler
-
Oluşturulan
Route
.
setCatchHandler()
workbox-routing.setCatchHandler(
handler: RouteHandler,
)
Bir Rota, istek işlenirken hata verirse bu handler
çağrılır ve yanıt verme şansı verilir.
Parametreler
-
handler
Promise döndürerek Yanıt'a dönüşen bir geri çağırma işlevi.
setDefaultHandler()
workbox-routing.setDefaultHandler(
handler: RouteHandler,
)
Hiçbir rota gelen istekle açıkça eşleşmediğinde çağrılacak varsayılan bir handler
tanımlayın.
Varsayılan işleyici olmadığında, eşleşmeyen istekler, hizmet çalışanı yokmuş gibi ağa zarar verir.
Parametreler
-
handler
Promise döndürerek Yanıt'a dönüşen bir geri çağırma işlevi.