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 = [

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

// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
  const currentCaches = [cacheName, dataCacheName];
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all( => {
        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)) {
      caches.match(event.request).then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;

        return => {
          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.
Updated 8-Jan-19 19:55pm

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