Click here to Skip to main content
14,421,922 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi, I have a web page in PWA and a service worker js file. I have done some testing on the UI and found that whenever i do some changes on the UI, the page will not reflect the latest changes.
Until only i go to clear the cache in the Chrome browser in the "Application -> Clear Storage" tab in "Developers Tool", only the latest changes will be reflected on the UI after i refresh the page. I suspect this is due to i have cached the UI(index.html) in the service worker and when i make changes in the index.html and refresh it in browser, the browser will get the old content from the cache instead of the latest changes i make.
Below are my service worker script:
var cacheName = 'samplePWA-step-6-2';
var dataCacheName = 'samplePWA-v2';
var filesToCache = [
  './',
  './index.html'
];

// The install handler takes care of precaching the resources we always need.
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => cache.addAll(filesToCache))
      .then(self.skipWaiting())
  );
});

// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
  const currentCaches = [cacheName, dataCacheName];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
  );
});

// The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener('fetch', event => {
  // Skip cross-origin requests, like those for Google Analytics.
  if (event.request.url.startsWith(self.location.origin)) {
    event.respondWith(
      caches.match(event.request).then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }

        return caches.open(dataCacheName).then(cache => {
          return fetch(event.request).then(response => {
            // Put a copy of the response in the runtime cache.
            return cache.put(event.request, response.clone()).then(() => {
              return response;
            });
          });
        });
      })
    );
  }
});


What I have tried:

1. Inspect in developers tools and service worker runs ok without error.
2. Changes only apply after cache in browser and storage are cleared.
3. Remove "./index.html" in "filesToCache", make some changes, refresh the browser. Latest changes are applied without any need for clearing cache prior to refresh browser.
Posted
Updated 8-Jan-19 19:55pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100