未捕获（承诺）TypeError：请求失败的pwa错误 [英] Uncaught (in promise) TypeError: Request failed pwa error

问题描述

我正在尝试构建渐进式Web应用程序（PWA）。

I am trying to build a Progressive Web App (PWA).

服务人员显示已注册，PWA审核显示一切正常，但控制台却显示
显示此错误：

The service worker shows registered, PWA audit shows everything good, but the console shows this error:

TypeError：请求失败的pwa错误

TypeError: Request failed pwa error

我无法缓存文件。

我在Stack Overflow上尝试了所有可能的答案，并且都是相同的

I tried all possible answers on Stack Overflow and it's the same

//self.addEventListener('fetch', function(event) {});


var dataCacheName = 'myappData-v3n';
var cacheName = 'myapp-3n';
var filesToCache = [


  'images/logo.png',
  'js/jquery.min.js',
  'js/popper.min.js',
  'js/bootstrap.min.js',
  'js/main.js',
  'css/bootstrap.min.css',
  'css/fontawesome-all.min.css',
  'css/style.css',
  'css/style.css',
  'index.html'

];

/*self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});*/
self.addEventListener('install', function(event) {

console.log('Handling install event. Resources to pre-fetch:', filesToCache);

  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      cache.addAll(filesToCache.map(function(filesToCache) {
        return new Request(filesToCache, {mode: 'no-cors'});
      }))
    }).then(function() {
        console.log('All resources have been fetched and cached.');
      }).catch(function(error) {
      console.error('Pre-fetching failed:', error);
    })
  );
});

/*async function doSomething(cache) {
  cache.addAll(filesToCache.map(function(filesToCache) {
        return new Request(filesToCache, {mode: 'no-cors'});
      //console.log('All resources have been fetched and cached.');
}));
}*/

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName && key !== dataCacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});









self.addEventListener('fetch', function(event) {
  console.log('Fetch event for ', event.request.url);
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log('Found ', event.request.url, ' in cache');
        return response;
      }
      console.log('Network request for ', event.request.url);
      return fetch(event.request)

    }).catch(function(error) {



      return caches.match('index.html');


    })
  );
});`

我也尝试将缓存网址更改为。 ./ /

I also tried changing the cache urls to "." "./" "/"

我也尝试了根url和文件夹。
试图改变一切，但没有解决。

I tried in the root url and folder too . Tried to change everything but didnt worked out.

无法缓存网址。

需要帮助。

推荐答案

TypeError: Request failed pwa error

始终（无一例外）指向缓存中拼写错误（在服务工作者的缓存功能中）或文件丢失（在主机上）。这可能是因为您没有定义范围。如果您的服务工作者不在PWA的根目录中，也会发生这种情况，因此请将其移到该位置并重试。

Always, without exception, points to a misspelled (in cache function of your service worker) or missing file (on the host) in your cache. This is probably because you don't have a scope defined. It can also occur if your service worker is not in the root directory of your PWA, so move it there and try again.

这篇关于未捕获（承诺）TypeError：请求失败的pwa错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！