Mixing
Service worker: Cache by filename only not url
0
I noticed that when you cache a file with a service worker
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
}
)
);
the file is cached based on the url
/bundle/v1/assets/icon.svg
But what I would like to have is only the file name on which the cache is base. Meaning that the same cache is used for
/bundle/v1/assets/icon.svg
/bundle/v2/assets/icon.svg
/bundle/v3/assets/icon.svg
Is something like this possible?
service-worker
asked Nov 20 '18 at 20:03
Jeanluca ScaljeriJeanluca Scaljeri
7,06023105178
add a comment |
0
I noticed that when you cache a file with a service worker
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
}
)
);
the file is cached based on the url
/bundle/v1/assets/icon.svg
But what I would like to have is only the file name on which the cache is base. Meaning that the same cache is used for
/bundle/v1/assets/icon.svg
/bundle/v2/assets/icon.svg
/bundle/v3/assets/icon.svg
Is something like this possible?
service-worker
asked Nov 20 '18 at 20:03
Jeanluca ScaljeriJeanluca Scaljeri
7,06023105178
add a comment |
0
0
0
I noticed that when you cache a file with a service worker
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
}
)
);
the file is cached based on the url
/bundle/v1/assets/icon.svg
But what I would like to have is only the file name on which the cache is base. Meaning that the same cache is used for
/bundle/v1/assets/icon.svg
/bundle/v2/assets/icon.svg
/bundle/v3/assets/icon.svg
Is something like this possible?
service-worker
asked Nov 20 '18 at 20:03
Jeanluca ScaljeriJeanluca Scaljeri
7,06023105178
I noticed that when you cache a file with a service worker
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
}
)
);
the file is cached based on the url
/bundle/v1/assets/icon.svg
But what I would like to have is only the file name on which the cache is base. Meaning that the same cache is used for
/bundle/v1/assets/icon.svg
/bundle/v2/assets/icon.svg
/bundle/v3/assets/icon.svg
Is something like this possible?
service-worker
service-worker
asked Nov 20 '18 at 20:03
Jeanluca ScaljeriJeanluca Scaljeri
7,06023105178
asked Nov 20 '18 at 20:03
Jeanluca ScaljeriJeanluca Scaljeri
7,06023105178
asked Nov 20 '18 at 20:03
Jeanluca ScaljeriJeanluca Scaljeri
7,06023105178
asked Nov 20 '18 at 20:03
Jeanluca ScaljeriJeanluca Scaljeri
7,06023105178
asked Nov 20 '18 at 20:03
Jeanluca ScaljeriJeanluca Scaljeri
7,06023105178
7,06023105178
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
What you can do is get a bit creative when you read and write to the Cache Storage API, by normalizing the URLs prior to using them as keys.
To use your example, let's say you know that every time you interact with the Cache Storage API (read or write) for a URL ending in icon.svg, you always expect it to refer to the same underlying Response, regardless of the full URL. You could do something like the following:
// A "fake" prefix used for all the normalized entries.
// Choose something that is not used by your real URLs.
const NORMALIZED_PREFIX = '/__normalized/';
// A list of "files" whose URLs you want to normalize.
const FILES_TO_NORMALIZE = [
'icon.svg',
// ...anything else...
];
function normalizeUrl(request) {
// Convert the request.url string into a URL object,
// so that we can get the pathname cleanly.
const url = new URL(request.url);
for (const file of FILES_TO_NORMALIZE) {
if (pathname.endsWith(file)) {
// If we have a match, then normalize the URL by using our
// standard prefix along with the specific file name.
url.pathname = NORMALIZED_PREFIX + file;
return url.href;
}
}
// Otherwise, just return the original request's URL.
return request.url;
}
self.addEventListener('fetch', event => {
// This is a naive cache-first strategy. Customize to suit your needs:
// https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
event.respondWith(async function() {
const requestKey = normalizeRequestUrl(event.request);
const cache = await caches.open('runtime-cache');
const cachedResponse = await caches.match(requestKey);
// If there's a cached response, use it.
if (cachedResponse) {
return cachedResponse;
}
// Otherwise, get a response from the network for the original request.
// Make sure you *don't* call fetch(requestKey),
// since that URL doesn't exist on the server!
const networkResponse = await fetch(event.request);
// When you save the entry in the cache, use cache.put()
// with requestKey as the first parameter.
await cache.put(requestKey, networkResponse.clone());
return networkResponse;
}());
});
answered Nov 20 '18 at 20:39
Jeff PosnickJeff Posnick
29.3k46093
Awesome, but why is there aNORMALIZE_PREFIX;url.pathname = NORMALIZED_PREFIX + file;Can we not just do:url.pathname = file;?
– Jeanluca Scaljeri
Nov 20 '18 at 21:37
1
It would generally be a good idea to put in some "fake" prefix to make sure your synthetic URLs don't clash with real URLs that actually exist on your server. But... if you're okay with the possibility of that clash, then sure, go for it.
– Jeff Posnick
Nov 20 '18 at 21:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400709%2fservice-worker-cache-by-filename-only-not-url%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
What you can do is get a bit creative when you read and write to the Cache Storage API, by normalizing the URLs prior to using them as keys.
To use your example, let's say you know that every time you interact with the Cache Storage API (read or write) for a URL ending in icon.svg, you always expect it to refer to the same underlying Response, regardless of the full URL. You could do something like the following:
// A "fake" prefix used for all the normalized entries.
// Choose something that is not used by your real URLs.
const NORMALIZED_PREFIX = '/__normalized/';
// A list of "files" whose URLs you want to normalize.
const FILES_TO_NORMALIZE = [
'icon.svg',
// ...anything else...
];
function normalizeUrl(request) {
// Convert the request.url string into a URL object,
// so that we can get the pathname cleanly.
const url = new URL(request.url);
for (const file of FILES_TO_NORMALIZE) {
if (pathname.endsWith(file)) {
// If we have a match, then normalize the URL by using our
// standard prefix along with the specific file name.
url.pathname = NORMALIZED_PREFIX + file;
return url.href;
}
}
// Otherwise, just return the original request's URL.
return request.url;
}
self.addEventListener('fetch', event => {
// This is a naive cache-first strategy. Customize to suit your needs:
// https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
event.respondWith(async function() {
const requestKey = normalizeRequestUrl(event.request);
const cache = await caches.open('runtime-cache');
const cachedResponse = await caches.match(requestKey);
// If there's a cached response, use it.
if (cachedResponse) {
return cachedResponse;
}
// Otherwise, get a response from the network for the original request.
// Make sure you *don't* call fetch(requestKey),
// since that URL doesn't exist on the server!
const networkResponse = await fetch(event.request);
// When you save the entry in the cache, use cache.put()
// with requestKey as the first parameter.
await cache.put(requestKey, networkResponse.clone());
return networkResponse;
}());
});
answered Nov 20 '18 at 20:39
Jeff PosnickJeff Posnick
29.3k46093
Awesome, but why is there aNORMALIZE_PREFIX;url.pathname = NORMALIZED_PREFIX + file;Can we not just do:url.pathname = file;?
– Jeanluca Scaljeri
Nov 20 '18 at 21:37
1
It would generally be a good idea to put in some "fake" prefix to make sure your synthetic URLs don't clash with real URLs that actually exist on your server. But... if you're okay with the possibility of that clash, then sure, go for it.
– Jeff Posnick
Nov 20 '18 at 21:43
add a comment |
1
What you can do is get a bit creative when you read and write to the Cache Storage API, by normalizing the URLs prior to using them as keys.
To use your example, let's say you know that every time you interact with the Cache Storage API (read or write) for a URL ending in icon.svg, you always expect it to refer to the same underlying Response, regardless of the full URL. You could do something like the following:
// A "fake" prefix used for all the normalized entries.
// Choose something that is not used by your real URLs.
const NORMALIZED_PREFIX = '/__normalized/';
// A list of "files" whose URLs you want to normalize.
const FILES_TO_NORMALIZE = [
'icon.svg',
// ...anything else...
];
function normalizeUrl(request) {
// Convert the request.url string into a URL object,
// so that we can get the pathname cleanly.
const url = new URL(request.url);
for (const file of FILES_TO_NORMALIZE) {
if (pathname.endsWith(file)) {
// If we have a match, then normalize the URL by using our
// standard prefix along with the specific file name.
url.pathname = NORMALIZED_PREFIX + file;
return url.href;
}
}
// Otherwise, just return the original request's URL.
return request.url;
}
self.addEventListener('fetch', event => {
// This is a naive cache-first strategy. Customize to suit your needs:
// https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
event.respondWith(async function() {
const requestKey = normalizeRequestUrl(event.request);
const cache = await caches.open('runtime-cache');
const cachedResponse = await caches.match(requestKey);
// If there's a cached response, use it.
if (cachedResponse) {
return cachedResponse;
}
// Otherwise, get a response from the network for the original request.
// Make sure you *don't* call fetch(requestKey),
// since that URL doesn't exist on the server!
const networkResponse = await fetch(event.request);
// When you save the entry in the cache, use cache.put()
// with requestKey as the first parameter.
await cache.put(requestKey, networkResponse.clone());
return networkResponse;
}());
});
answered Nov 20 '18 at 20:39
Jeff PosnickJeff Posnick
29.3k46093
Awesome, but why is there aNORMALIZE_PREFIX;url.pathname = NORMALIZED_PREFIX + file;Can we not just do:url.pathname = file;?
– Jeanluca Scaljeri
Nov 20 '18 at 21:37
1
It would generally be a good idea to put in some "fake" prefix to make sure your synthetic URLs don't clash with real URLs that actually exist on your server. But... if you're okay with the possibility of that clash, then sure, go for it.
– Jeff Posnick
Nov 20 '18 at 21:43
add a comment |
1
1
1
What you can do is get a bit creative when you read and write to the Cache Storage API, by normalizing the URLs prior to using them as keys.
To use your example, let's say you know that every time you interact with the Cache Storage API (read or write) for a URL ending in icon.svg, you always expect it to refer to the same underlying Response, regardless of the full URL. You could do something like the following:
// A "fake" prefix used for all the normalized entries.
// Choose something that is not used by your real URLs.
const NORMALIZED_PREFIX = '/__normalized/';
// A list of "files" whose URLs you want to normalize.
const FILES_TO_NORMALIZE = [
'icon.svg',
// ...anything else...
];
function normalizeUrl(request) {
// Convert the request.url string into a URL object,
// so that we can get the pathname cleanly.
const url = new URL(request.url);
for (const file of FILES_TO_NORMALIZE) {
if (pathname.endsWith(file)) {
// If we have a match, then normalize the URL by using our
// standard prefix along with the specific file name.
url.pathname = NORMALIZED_PREFIX + file;
return url.href;
}
}
// Otherwise, just return the original request's URL.
return request.url;
}
self.addEventListener('fetch', event => {
// This is a naive cache-first strategy. Customize to suit your needs:
// https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
event.respondWith(async function() {
const requestKey = normalizeRequestUrl(event.request);
const cache = await caches.open('runtime-cache');
const cachedResponse = await caches.match(requestKey);
// If there's a cached response, use it.
if (cachedResponse) {
return cachedResponse;
}
// Otherwise, get a response from the network for the original request.
// Make sure you *don't* call fetch(requestKey),
// since that URL doesn't exist on the server!
const networkResponse = await fetch(event.request);
// When you save the entry in the cache, use cache.put()
// with requestKey as the first parameter.
await cache.put(requestKey, networkResponse.clone());
return networkResponse;
}());
});
answered Nov 20 '18 at 20:39
Jeff PosnickJeff Posnick
29.3k46093
What you can do is get a bit creative when you read and write to the Cache Storage API, by normalizing the URLs prior to using them as keys.
To use your example, let's say you know that every time you interact with the Cache Storage API (read or write) for a URL ending in icon.svg, you always expect it to refer to the same underlying Response, regardless of the full URL. You could do something like the following:
// A "fake" prefix used for all the normalized entries.
// Choose something that is not used by your real URLs.
const NORMALIZED_PREFIX = '/__normalized/';
// A list of "files" whose URLs you want to normalize.
const FILES_TO_NORMALIZE = [
'icon.svg',
// ...anything else...
];
function normalizeUrl(request) {
// Convert the request.url string into a URL object,
// so that we can get the pathname cleanly.
const url = new URL(request.url);
for (const file of FILES_TO_NORMALIZE) {
if (pathname.endsWith(file)) {
// If we have a match, then normalize the URL by using our
// standard prefix along with the specific file name.
url.pathname = NORMALIZED_PREFIX + file;
return url.href;
}
}
// Otherwise, just return the original request's URL.
return request.url;
}
self.addEventListener('fetch', event => {
// This is a naive cache-first strategy. Customize to suit your needs:
// https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
event.respondWith(async function() {
const requestKey = normalizeRequestUrl(event.request);
const cache = await caches.open('runtime-cache');
const cachedResponse = await caches.match(requestKey);
// If there's a cached response, use it.
if (cachedResponse) {
return cachedResponse;
}
// Otherwise, get a response from the network for the original request.
// Make sure you *don't* call fetch(requestKey),
// since that URL doesn't exist on the server!
const networkResponse = await fetch(event.request);
// When you save the entry in the cache, use cache.put()
// with requestKey as the first parameter.
await cache.put(requestKey, networkResponse.clone());
return networkResponse;
}());
});
answered Nov 20 '18 at 20:39
Jeff PosnickJeff Posnick
29.3k46093
answered Nov 20 '18 at 20:39
Jeff PosnickJeff Posnick
29.3k46093
answered Nov 20 '18 at 20:39
Jeff PosnickJeff Posnick
29.3k46093
answered Nov 20 '18 at 20:39
Jeff PosnickJeff Posnick
29.3k46093
29.3k46093
Awesome, but why is there aNORMALIZE_PREFIX;url.pathname = NORMALIZED_PREFIX + file;Can we not just do:url.pathname = file;?
– Jeanluca Scaljeri
Nov 20 '18 at 21:37
1
It would generally be a good idea to put in some "fake" prefix to make sure your synthetic URLs don't clash with real URLs that actually exist on your server. But... if you're okay with the possibility of that clash, then sure, go for it.
– Jeff Posnick
Nov 20 '18 at 21:43
add a comment |
Awesome, but why is there aNORMALIZE_PREFIX;url.pathname = NORMALIZED_PREFIX + file;Can we not just do:url.pathname = file;?
– Jeanluca Scaljeri
Nov 20 '18 at 21:37
1
It would generally be a good idea to put in some "fake" prefix to make sure your synthetic URLs don't clash with real URLs that actually exist on your server. But... if you're okay with the possibility of that clash, then sure, go for it.
– Jeff Posnick
Nov 20 '18 at 21:43
Awesome, but why is there a
NORMALIZE_PREFIX; url.pathname = NORMALIZED_PREFIX + file; Can we not just do: url.pathname = file; ?– Jeanluca Scaljeri
Nov 20 '18 at 21:37
Awesome, but why is there a
NORMALIZE_PREFIX; url.pathname = NORMALIZED_PREFIX + file; Can we not just do: url.pathname = file; ?– Jeanluca Scaljeri
Nov 20 '18 at 21:37
1
1
It would generally be a good idea to put in some "fake" prefix to make sure your synthetic URLs don't clash with real URLs that actually exist on your server. But... if you're okay with the possibility of that clash, then sure, go for it.
– Jeff Posnick
Nov 20 '18 at 21:43
It would generally be a good idea to put in some "fake" prefix to make sure your synthetic URLs don't clash with real URLs that actually exist on your server. But... if you're okay with the possibility of that clash, then sure, go for it.
– Jeff Posnick
Nov 20 '18 at 21:43
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400709%2fservice-worker-cache-by-filename-only-not-url%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
