PWA not working correctly offline. Uncaught (in promise) TypeError: Failed to fetch

Question

我正在尝试将我拥有的一个简单网页转换为 PWA，以防它使用的网站出现故障。

我想我已经完成了大部分工作。该页面可安装在我的 phone 上，并通过了所有 Chrome 灯塔测试。但是我收到以下警告，


Web app manifest meets the installability requirements
Warnings: Page does not work offline. The page will not be regarded as installable after Chrome 93, stable release August 2021.

我还在控制台中收到以下警告和错误，

The FetchEvent for "https://dannyj1984.github.io/index.html" resulted in a network error response: the promise was rejected.
Promise.then (async)
(anonymous) @ serviceWorker.js:30
serviceWorker.js:1 Uncaught (in promise) TypeError: Failed to fetch

然后会出现一条警告，说该站点不能脱机工作，因此无法安装。我已经阅读了 chrome 开发人员文章，该文章从 8 月 21 日的 chrome 版本中说，不能离线工作的应用程序将无法安装。但是我坚持我的提取的哪一部分导致了问题。我的服务人员中的代码是，

const TGAbxApp = "TG-ABX-App-v1"
const assets = [
  //paths to files to add

]

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(TGAbxApp).then(cache => {
      cache.addAll(assets)
    })
  )
})

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

上面的服务工作线程的获取部分的代码是我从Google获取的，据我了解，它首先检查缓存中是否有数据存储在安装时，如果没有，它将请求它来自网络。

Answer 1

https://developer.chrome.com/blog/improved-pwa-offline-detection/

从Chrome2021年3月89日起，如果此检查未通过，则会发出警告：在模拟离线模式下，已安装的 Service Worker 提取事件 return 是一个 HTTP 200 状态代码（表示提取成功）。

因此，在您的情况下，当 fetch(event.request) 失败时，service worker 应该 return 缓存 'index.html'。

Answer 2

我遇到了同样的问题。我通过开发者控制台->网络重新启用了缓存。固定

PWA not working correctly offline. Uncaught (in promise) TypeError: Failed to fetch

PWA not working correctly offline. Uncaught (in promise) TypeError: Failed to fetch

progressive-web-apps

service-worker