Chrome Cache-API - caches match

Question

I have cached resources with CacheAddall method with a version say "v22" with the v22 version there are many files as for example below:

Now how I can access the same and update or delete individually. I can access the v22 with

caches.keys().then(keys => {
        keys.map(key => {
          console.log(key)
        })
      })

but here console.log only return v22, how how can access for example /pwa/js/app/js

I couldn't find a workaround for this.

Prabhat · Answer 1 · 2019-11-20T15:26:40.727

First you need to install callback as per you version name(ex: v22). So, we need to take the following steps:

1)Open a cache. 2)Cache our files. 3)Confirm whether all the required assets are cached or not.

For more clarity you can reach the below urls. https://developers.google.com/web/fundamentals/primers/service-workers

Like below code.

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

Then for access you need to use fetch event of service worker.

Like below code.

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

For update and delete you can use activate event of service worker. Please read the cacheWhitelist properly. But,If you want to update you must be need to change the chachname/version name of service worker. For delete you can direct delete using map().

Like below code.

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [cacheName];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

I hope it's help you..!!

whatever code you mentioned, it's already there in my service worker. what I want to achieve is like I have updated certain info in backend(for example notice). I send a notification to service worker with a tag - `update-notices`. my service worker is able to match the tag, but after matching the tag as in my image notices are stored in `/api/notice` the cache key for all the files is V22. Now I wanto delete the `/api/notice` from the cache. How I can do that? — Joshi, Nov 20 '19 at 15:11
Joshi, I guess you can't delete specific page inside service-worker. So you need to change the version name then activate event will fire. So, you need to write that code for delete previouse cache. In our project we did same thing. — Prabhat, Nov 20 '19 at 15:28
I guess it's not good idea to delete..you can update I guess check below urls they mention same..https://love2dev.com/blog/how-to-uninstall-a-service-worker/ — Prabhat, Nov 20 '19 at 15:40

score 0 · Answer 2 · answered Nov 20 '19 at 22:19

I get this to work, but still looking for a better solution.

self.addEventListener('push', function(event) { console.log("sync event", event); var eventData = event.data.json(); console.log(eventData);

    if (eventData.notification.tag === 'notice') {
      var token='';

      var userId = localforage.getItem("userId");
            localforage.getItem("access-token").then(function(value){
                token += value;
               console.log(token);
               console.log(userId);

      var request = new Request("https://myurl/api/notice",{
        "headers": {
          'Authorization' : 'Bearer ' + token,
      },
      })

      fetch(request).then(function(response) {
        var rsp = response.clone();
      // cache response for the next time around
       return caches.open(cacheName).then(function (cache) {
         cache.put(request,rsp);
      });
      });
    })    

    }
});

Chrome Cache-API - caches match

2 Answers2