Во-первых, вы должны понимать, что рабочий слой службы отделен от внешнего интерфейса и вашего сервера. Он находится посередине и перехватывает все сетевые запросы, чтобы вы могли решить, как они будут обрабатываться.
У обработчика события выборки работника службы есть один аргумент, событие.
Вы можете «проанализировать»этот объект для получения информации о запросе, event.request и определения способа обработки.
Например, вы, скорее всего, не хотите кэшировать запросы POST, PUT или DELETE, поэтому просто передавайте их в сеть. вызвав fetch. Чтобы сделать это проще, попробуйте только GET-запросы.
self.addEventListener("fetch", event => {
event.respondWith(
if(event.request.mode === "GET") {
//compare URL against rules table
//perform caching strategy for this URL
} else {
return fetch(event);
}
);
});
Если у вас может быть стратегия кэширования для применения к URL-адресу, вам необходимо увидеть, какую стратегию вы хотите применить. FWIW, у меня есть около 25 различных стратегий, которые я могу использовать, поэтому я постараюсь упростить это.
Это пример моего метода для сопоставления URL-адреса со стратегией кэширования:
function testRequestRule( request, rules ) {
for ( let i = 0; i < rules.length; i++ ) {
if ( rules[ i ].route && rules[ i ].route.test( request.url ) ) {
return rules[ i ];
} else if ( rules[ i ].destination &&
rules[ i ].destination === request.destination ) {
return rules[ i ];
}
}
}
Вот как может выглядеть объект правила:
let routeRules = [ {
"route": /img\/products\//,
"strategy": "cacheFallingBackToNetworkCache",
"options": {
cacheName: prodPhotos,
fallback: offlineProductPhoto
}
},....]
Затем я выполню желаемую стратегию по запросу:
if ( rule.strategy ) {
switch ( rule.strategy ) {
case "cacheFallingBackToNetwork":
return responseManager.cacheFallingBackToNetworkCache(
event.request, rule.cacheName || cacheName,
rule.options.fallback );
case "fetchAndRenderResponseCache":
return responseManager.fetchAndRenderResponseCache( {
request: event.request,
pageURL: rule.options.pageURL,
template: rule.options.template,
api: rule.options.api,
cacheName: rule.cacheName || cacheName
} )
.then( response => {
invalidationManager.cacheCleanUp( rule.cacheName || cacheName );
return response;
} );
case "cacheOnly":
return responseManager.cacheOnly( event.request, rule.cacheName || cacheName )
.then( response => {
invalidationManager.cacheCleanUp( rule.cacheName || cacheName );
return response;
} );
case "networkOnly":
return responseManager.networkOnly( event.request );
case "custom":
return rule.options.handler( event, rule );
default:
return responseManager
.cacheFallingBackToNetworkCache( event.request,
rule.cacheName || cacheName,
rule.options.fallback )
.then( response => {
invalidationManager.cacheCleanUp( rule.cacheName || cacheName );
if ( response ) {
return response;
} else {
return simpleFetch( event );
}
} )
.catch( error => {
console.error( "fetch error: ", error );
console.error( "url: ", event.request.url );
} );
}
} else {
return simpleFetch( event );
}
Короче говоря, вы можете контролировать, как каждыйСетевой запрос обрабатывается, это красота работника службы. Вы просто должны создать логику, чтобы справиться с этим, и нет никаких волшебных способностей, чтобы сделать хорошего работника сервиса. Вы должны будете написать код самостоятельно и, конечно, протестировать его. :)