Workbox 离线时无法获取缓存的网络请求。改变标题？

Question

我在 PWA 上离线运行运行时缓存时遇到问题。

我正在使用 VitePWA 包，它使用 Workbox，以

GenerateSW

模式来构建服务工作者。

Service Worker 缓存来自 Laravel 后端的一些 API 响应，以便离线工作。几个月前开发和发布该功能时，这些问题并不存在；它经过了广泛的测试，并且是一个相当痛苦的过程，但我们确实成功了。

但是，最近一位用户报告了一个缺陷，该缺陷不再按预期工作，因此在过去 6-8 周的某个时刻，情况发生了变化。谷歌浏览器处理软件/缓存？当时我们更新了代码库，但 PWA 功能没有什么特别的；没有动过。

响应与正确的数据一起缓存在“缓存存储”中；我能看到它。据我所知，实时服务器响应和缓存响应之间唯一不同的是

Vary

标头：

来源	标题
服务器	变化：来源、接受编码
缓存存储	变化：来源、授权、接受编码

缓存的响应具有额外的

Authorization

标头（按写入方式使用无空格逗号分隔）。互联网上以及其他 Web 软件的 GitHub 问题中，有一些零散的内容提到此标头可能是缓存问题。

Workbox 控制台错误是：

Network request for '/system/api/v1/settings' threw an error. TypeError: Failed to fetch
    at StrategyHandler.fetch (workbox-96d32552.js:2840:33)
    at StrategyHandler.fetchAndCachePut (workbox-96d32552.js:2880:37)
    at NetworkFirst._getNetworkPromise (workbox-96d32552.js:3720:36)
    at NetworkFirst._handle (workbox-96d32552.js:3640:37)
    at NetworkFirst._getResponse (workbox-96d32552.js:3330:33)

处理此问题的我的运行时缓存配置是：

...
urlPattern: /^regexPattern$/,
  handler: 'NetworkFirst',
  options: {
    cacheName: 'api',
    expiration: {
      maxEntries: 500,
      maxAgeSeconds: 60 * 60 * 24 * 365 * 2
    },
    cacheableResponse: {
      statuses: [0, 200]
    }
  }
...

我尝试添加 Workbox

ignoreVary

选项，但这没有帮助：

..
urlPattern: /^regexPattern$/,
  handler: 'NetworkFirst',
  options: {
    cacheName: 'api',
    expiration: {
      maxEntries: 500,
      maxAgeSeconds: 60 * 60 * 24 * 365 * 2,
      matchOptions: {
        ignoreVary: true
      }
    },
    cacheableResponse: {
      statuses: [0, 200]
    }
  }
...

有什么建议，甚至是研究的方向吗？我已经没有想法了。

提前非常感谢。

Answer 1

在 precacheAndRoute 之前添加此ignoreVary选项对我有用！

import { getOrCreatePrecacheController } from 'workbox-precaching/utils/getOrCreatePrecacheController';
getOrCreatePrecacheController().strategy.matchOptions = {
  ignoreVary: true,
};
precacheAndRoute([...])