Question

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

我想我已经完成了大部分工作。该页面可安装在我的手机上并通过了所有 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 dev 文章，该文章从 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 获取的 Service Worker 的 fetch 部分，据我了解，它首先检查安装时存储的缓存中是否有数据，如果没有，它将从网络请求数据。

>

Answer 1

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

自 2021 年 3 月 89 日起，Chrome 会在此检查未通过时发出警告：已安装的 Service Worker fetch 事件在模拟离线模式下返回 HTTP 200 状态代码（表示成功获取）。

因此，在您的情况下，当 fetch(event.request) 失败时，Service Worker 应返回缓存的“index.html”。

Answer 2

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

PWA 无法正常离线工作。 Uncaught (in promise) TypeError: Failed to fetch

2 个答案: