plugin development – Service Worker Uncaught (promised) DOMException

My technician Problems with error, DOMException Uncaught (promised). My software works perfectly and invites to install PWA on mobile, but this error is generated. My URL is Milyin. It will take 2 to 3 visits for this error to start appearing in the console log.

In just 3 visits, it generated more than 260 errors. I can not debug it. I guess this is because the software has used all the storage space on my device. Because if I reload the page using F5, it indicates an error, but a refresh with CTRL + SHIFT + R does not make any mistake.

// This is the service worker with advanced caching

const CACHE = "Milyin";
const precacheFiles = [
  '/',
  '/wp-content/themes/hestia/assets/js/parallax.min.js?ver=1.0.2',
  'https://fonts.googleapis.com/css?family=Poppins%3A300%2C400%2C500%2C700'
  ];

// TODO: replace the following with the correct offline backup page i.e .: const offlineFallbackPage = "/";
const offlineFallbackPage = & # 39; /;

const networkFirstPaths = [
  /* Add an array of regex of paths that should go network first */
  // Example: //api/.*/
];

const AvoidCachingPaths = [
  '/wp-content/plugins/ultimate-member/',
  '/wp-admin/',
  '/chat/'  
];

pathComparer function (requestUrl, pathRegEx) {
return requestUrl.match (new RegExp (pathRegEx));
}

function comparePaths (requestUrl, pathArray) {
if (requestUrl) {
for (let index = 0; index < pathsArray.length; index++) {
      const pathRegEx = pathsArray[index];
      if (pathComparer(requestUrl, pathRegEx)) {
        return true;
      }
    }
  }

  return false;
}

self.addEventListener("install", function (event) {
  console.log("[PWA Builder] Install Event processing");

  console.log("[PWA Builder] Skip waiting on install");
  self.skipWaiting();

  event.waitUntil(
    caches.open(CACHE).then(function (cache) {
      console.log("[PWA Builder] Caching pages during install");

      return cache.addAll(precacheFiles).then(function () {
        if (offlineFallbackPage === "offline.html") {
          return cache.add(new Response("TODO: Update the value of the offlineFallbackPage constant in the serviceworker."));
        }

        return cache.add(offlineFallbackPage);
      });
    })
  );
});

// Allow sw to control of current page
self.addEventListener("activate", function (event) {
  console.log("[PWA Builder] Claiming clients for current page");
  event.waitUntil(self.clients.claim());
});

// If any fetch fails, it will look for the request in the cache and serve it from there first
self.addEventListener("fetch", function (event) {
  if (event.request.method !== "GET") return;

  if (comparePaths(event.request.url, networkFirstPaths)) {
    networkFirstFetch(event);
  } else {
    cacheFirstFetch(event);
  }
});

function cacheFirstFetch(event) {
  event.respondWith(
    fromCache(event.request).then(
      function (response) {
        // The response was found in the cache so we responde with it and update the entry

        // This is where we call the server to get the newest version of the
        // file to use the next time we show view
        event.waitUntil(
          fetch(event.request).then(function (response) {
            return updateCache(event.request, response);
          })
        );

        return response;
      },
      function () {
        // The response was not found in the cache so we look for it on the server
        return fetch(event.request)
          .then(function (response) {
            // If request was success, add or update it in the cache
            event.waitUntil(updateCache(event.request, response.clone()));

            return response;
          })
          .catch(function (error) {
            // The following validates that the request was for a navigation to a new document
            if (event.request.destination !== "document" || event.request.mode !== "navigate") {
              return;
            }

            console.log("[PWA Builder] Network request failed and no cache." + error);
            // Use the precached offline page as fallback
            return caches.open(CACHE).then(function (cache) {
              cache.match(offlineFallbackPage);
            });
          });
      }
    )
  );
}

function networkFirstFetch(event) {
  event.respondWith(
    fetch(event.request)
      .then(function (response) {
        // If request was success, add or update it in the cache
        event.waitUntil(updateCache(event.request, response.clone()));
        return response;
      })
      .catch(function (error) {
        console.log("[PWA Builder] Network request Failed. Serving content from cache: " + error);
        return fromCache(event.request);
      })
  );
}

function fromCache(request) {
  // Check to see if you have it in the cache
  // Return response
  // If not in the cache, then return error page
  return caches.open(CACHE).then(function (cache) {
    return cache.match(request).then(function (matching) {
      if (!matching || matching.status === 404) {
        return Promise.reject("no-match");
      }

      return matching;
    });
  });
}

function updateCache(request, response) {
  if (!comparePaths(request.url, avoidCachingPaths)) {
    return caches.open(CACHE).then(function (cache) {
      return cache.put(request, response);
    });
  }

  return Promise.resolve();
}
addEventListener('fetch', event => {
event.respondWith (async function () {
// Reply from the cache if possible
const cachedResponse = wait caches.match (event.request);
if (cachedResponse) returns cachedResponse;

// else, use the preloaded answer, if it exists
answer const = wait event.preloadResponse;
if (answer) returns the answer;

// otherwise try the network.
return fetch (event.request);
} ());
});

Service Worker is registered via JS Online


You should definitely see the error on repeated visits to the pages of my site. Although your mileage varies depending on the storage capacity of your browser.