PWA Service Worker - 获取失败 - Facebook 像素问题

Question

我有以下 PWA Service Worker (serviceWorker.js)：

self.addEventListener("fetch", fetchEvent => {
  fetchEvent.respondWith(
    caches.match(fetchEvent.request).then(res => {
      return res || fetch(fetchEvent.request)
    })
  )
})

我不希望在离线时加载任何内容，因为它是一个完全动态的网页，所以离线时无法使用。所以这就是为什么我发现也许这段代码对于 Service Worker 来说已经足够了，而且我不需要任何缓存文件。（也许这是一个错误？）实际上它工作正常，至少当我打开我的网页时，Chrome 弹出消息为我的网页安装应用程序 - 而且它也工作正常。

但是今天我发现在控制台中有一些关于它的错误：

The FetchEvent for "https://connect.facebook.net/en_US/fbevents.js" resulted in a network error response: the promise was rejected.

Uncaught (in promise) TypeError: Failed to fetch at serviceWorker.js:4:21

并在 serviceWorker.js 中标记此部分：fetch(fetchEvent.request)，并表示：Failed to fetch.

GET https://connect.facebook.net/en_US/fbevents.js net::ERR_FAILED

另外，当我想对我的 Facebook Pixel 进行一些更改时，它说找不到适合我网站的 Pixel。然而它就在那里。唯一的修改是添加了PWA相关的代码。

而且我还意识到，从那天起，Google 分析中显示的我的网页的访问量开始急剧下降。现在不是0，但我想1-2天后会是0。

Service Worker 的问题是什么？我该如何解决？这个问题和我的 Facebook Pixel（和 Google Analytics）有什么关系？

当然，我尝试寻找答案，但找不到针对该特定问题的解决方案。

请帮我解决这个问题。希望根本原因是一样的，所以一次修复就能解决所有问题。

提前谢谢你。

Answer 1

我找到了解决方案 - 我 post 在这里，所以也许有人也会遇到这个问题，我想帮助解决这个问题。

原来如此，我必须提供一个离线后备页面。

我找到了这篇文章，我按照步骤创建了 offline.html 文件，修改了 serviceWorker.js 文件，问题消失了，Facebook Pixel 再次正常工作： https://web.dev/offline-fallback-page/

PWA Service Worker - 获取失败 - Facebook 像素问题

PWA Service Worker - Failed to fetch - Issue with Facebook Pixel

javascript

service-worker

progressive-web-apps

facebook-pixel