Service worker: Cache by filename only not url











up vote
0
down vote

favorite












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);
}
)
);


enter image description here



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?










share|improve this question


























    up vote
    0
    down vote

    favorite












    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);
    }
    )
    );


    enter image description here



    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?










    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      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);
      }
      )
      );


      enter image description here



      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?










      share|improve this question













      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);
      }
      )
      );


      enter image description here



      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked 8 hours ago









      Jeanluca Scaljeri

      6,82223102176




      6,82223102176
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          1
          down vote













          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;
          }());
          });





          share|improve this answer





















          • Awesome, but why is there a NORMALIZE_PREFIX; url.pathname = NORMALIZED_PREFIX + file; Can we not just do: url.pathname = file; ?
            – Jeanluca Scaljeri
            7 hours ago










          • 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
            7 hours ago











          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',
          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


















          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








          up vote
          1
          down vote













          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;
          }());
          });





          share|improve this answer





















          • Awesome, but why is there a NORMALIZE_PREFIX; url.pathname = NORMALIZED_PREFIX + file; Can we not just do: url.pathname = file; ?
            – Jeanluca Scaljeri
            7 hours ago










          • 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
            7 hours ago















          up vote
          1
          down vote













          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;
          }());
          });





          share|improve this answer





















          • Awesome, but why is there a NORMALIZE_PREFIX; url.pathname = NORMALIZED_PREFIX + file; Can we not just do: url.pathname = file; ?
            – Jeanluca Scaljeri
            7 hours ago










          • 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
            7 hours ago













          up vote
          1
          down vote










          up vote
          1
          down vote









          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;
          }());
          });





          share|improve this answer












          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;
          }());
          });






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered 8 hours ago









          Jeff Posnick

          28.1k46091




          28.1k46091












          • Awesome, but why is there a NORMALIZE_PREFIX; url.pathname = NORMALIZED_PREFIX + file; Can we not just do: url.pathname = file; ?
            – Jeanluca Scaljeri
            7 hours ago










          • 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
            7 hours ago


















          • Awesome, but why is there a NORMALIZE_PREFIX; url.pathname = NORMALIZED_PREFIX + file; Can we not just do: url.pathname = file; ?
            – Jeanluca Scaljeri
            7 hours ago










          • 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
            7 hours ago
















          Awesome, but why is there a NORMALIZE_PREFIX; url.pathname = NORMALIZED_PREFIX + file; Can we not just do: url.pathname = file; ?
          – Jeanluca Scaljeri
          7 hours ago




          Awesome, but why is there a NORMALIZE_PREFIX; url.pathname = NORMALIZED_PREFIX + file; Can we not just do: url.pathname = file; ?
          – Jeanluca Scaljeri
          7 hours ago












          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
          7 hours ago




          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
          7 hours ago


















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          Berounka

          Sphinx de Gizeh

          Different font size/position of beamer's navigation symbols template's content depending on regular/plain...