Question

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

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

TypeError：请求失败的pwa错误

我无法缓存文件。

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

//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');


    })
  );
});`

我还尝试将缓存URL更改为“”。 “ ./”“ /”

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

无法缓存网址。

需要帮助。

Answer 1

TypeError: Request failed pwa error

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

未捕获（承诺）TypeError：请求失败的pwa错误

1 个答案: