Uncaught (in promise) TypeError: Request scheme 'chrome-extension' is unsupported about pwa-tutorial HOT 12 OPEN

hey, I have solved this issue in this way.

  // check if request is made by chrome extensions or web page
  // if request is made for web page url must contains http.
  if (!(evt.request.url.indexOf('http') === 0)) return; // skip the request. if request is not made with http protocol

whole code for fetch event:

// fetch event
self.addEventListener('fetch', evt => {
  // check if request is made by chrome extensions or web page
  // if request is made for web page url must contains http.
  if (!(evt.request.url.indexOf('http') === 0)) return; // skip the request. if request is not made with http protocol

  evt.respondWith(
    caches
      .match(evt.request)
      .then(
        cacheRes =>
          cacheRes ||
          fetch(evt.request).then(fetchRes =>
            caches.open(dynamicNames).then(cache => {
              cache.put(evt.request.url, fetchRes.clone());
              // check cached items size
              limitCacheSize(dynamicNames, 75);
              return fetchRes;
            })
          )
      )
      .catch(() => caches.match('/fallback'))
  );
});

// cache size limit function
const limitCacheSize = (name, size) => {
  caches.open(name).then(cache => {
    cache.keys().then(keys => {
      if (keys.length > size) {
        cache.delete(keys[0]).then(limitCacheSize(name, size));
      }
    });
  });
};

my service worker script: ### https://teckat.com/sw.js

from pwa-tutorial.

#1 (comment)
perfect answer

from pwa-tutorial.

self.addEventListener("fetch", event=>{
    event.respondWith(caches.open(cacheName).then(cache=>{
        return cache.match(event.request).then(response=>{
            return response || fetch(event.request).then(networkResponse=>{
                if (!(event.request.url.indexOf('chr') === 0)) cache.put(event.request, networkResponse.clone());
                return networkResponse;
            }
            );
        }
        )
    }
    ));
}
);

from pwa-tutorial.

I am also getting same error .

from pwa-tutorial.

This looks like a relevant post for this bug:

https://stackoverflow.com/questions/49157622/service-worker-typeerror-when-opening-chrome-extension

from pwa-tutorial.

@masumonline , @InSantoshMahto, @iamshaunjp Anyone who fixed this error?

from pwa-tutorial.

hey, I have solved this issue in this way.

  // check if request is made by chrome extensions or web page
  // if request is made for web page url must contains http.
  if (!(evt.request.url.indexOf('http') === 0)) return; // skip the request. if request is not made with http protocol

whole code for fetch event:

// fetch event
self.addEventListener('fetch', evt => {
  // check if request is made by chrome extensions or web page
  // if request is made for web page url must contains http.
  if (!(evt.request.url.indexOf('http') === 0)) return; // skip the request. if request is not made with http protocol

  evt.respondWith(
    caches
      .match(evt.request)
      .then(
        cacheRes =>
          cacheRes ||
          fetch(evt.request).then(fetchRes =>
            caches.open(dynamicNames).then(cache => {
              cache.put(evt.request.url, fetchRes.clone());
              // check cached items size
              limitCacheSize(dynamicNames, 75);
              return fetchRes;
            })
          )
      )
      .catch(() => caches.match('/fallback'))
  );
});

// cache size limit function
const limitCacheSize = (name, size) => {
  caches.open(name).then(cache => {
    cache.keys().then(keys => {
      if (keys.length > size) {
        cache.delete(keys[0]).then(limitCacheSize(name, size));
      }
    });
  });
};

my service worker script: ### https://teckat.com/sw.js

Thanks for this!!

from pwa-tutorial.

Wouldn't that also detect any https requests as well and block all of yours? I saw the SO post and decided against because I figured it would do that. If it "works on your machine" it's probably just localhost, right?

from pwa-tutorial.

I tried adding:

caches.match(evt.request).then(cacheRes => {
			return cacheRes || fetch(evt.request).then(fetchRes => {
				return caches.open(dynamicCacheName).then(cache => {
+					if (new RegExp('^(?:[a-z]+:)?//', 'i').test(new URL(evt.request.url).protocol) ) return;
					cache.put(evt.request.url, fetchRes.clone());

According to these links:

https://stackoverflow.com/a/19709846/4907950

madskristensen/WebEssentials.AspNetCore.ServiceWorker#66

But still no use. Are we sure that http is the problem?

from pwa-tutorial.

So what I did was to check if the url if it doesn't starts with http or https
caches.open(version) .then(function (cache) { // here be the fix if(request.url.match("^(http|https)://")){ cache.put(request, copy); }else{ return; }

from pwa-tutorial.

I tried adding:

caches.match(evt.request).then(cacheRes => {
			return cacheRes || fetch(evt.request).then(fetchRes => {
				return caches.open(dynamicCacheName).then(cache => {
+					if (new RegExp('^(?:[a-z]+:)?//', 'i').test(new URL(evt.request.url).protocol) ) return;
					cache.put(evt.request.url, fetchRes.clone());

According to these links:

https://stackoverflow.com/a/19709846/4907950

madskristensen/WebEssentials.AspNetCore.ServiceWorker#66

But still no use. Are we sure that http is the problem?

According to the comments in the solution, the code is checking if the url of the request being made contains 'http'.
A browser extension is trying to make a request which is causing the error. The request from the extension does not have http in its url (example) so this line of code if (!(evt.request.url.indexOf('http') === 0)) return; terminates the code if there is no 'http' in the request url (which is from the extension)

from pwa-tutorial.

Wouldn't that also detect any https requests as well and block all of yours? I saw the SO post and decided against because I figured it would do that. If it "works on your machine" it's probably just localhost, right?

No, it wont. As long as the http is at index 0, that statement returns true.

from pwa-tutorial.