0

我正在尝试构建一个渐进式 Web 应用程序 (PWA)。

Service Worker 显示已注册,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 和文件夹中尝试过。试图改变一切,但没有成功。

无法缓存网址。

需要帮忙。

4

1 回答 1

0
TypeError: Request failed pwa error

总是,无一例外地指向缓存中的拼写错误(在您的服务工作者的缓存功能中)或丢失的文件(在主机上)。这可能是因为您没有定义范围。如果您的 service worker 不在 PWA 的根目录中,也可能发生这种情况,因此请将其移到那里并重试。

于 2020-06-03T15:08:52.767 回答