Vite插件pwa无法缓存fetch请求

Question

我正在尝试制作一个完整的离线pwa并在IOS上进行测试。 我用

yarn create vite

制作了一个网站并添加了

vite-plugin-pwa

当我尝试在 IOS 上启动 pwa 时，我获取了所有本地文件（图像和 index.html），但无法使用 fetch

https://jsonplaceholder.typicode.com/todos

vite.config.js

import { defineConfig } from "vite";
import { VitePWA } from "vite-plugin-pwa";
export default defineConfig({
  plugins: [
    VitePWA({
      registerType: "autoUpdate",
      devOptions: { enabled: true },
      manifest: {
        name: "MyPWA application",
        short_name: "MyPWA",
        display: "standalone",
        background_color: "#242424",
        theme_color: "#242424",
        icons: [
          {
            src: "/icon.png",
            sizes: "192x192",
            type: "image/png",
          },
        ],
      },
      workbox: {
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/jsonplaceholder\.typicode\.com\/todos/i,
            handler: "NetworkFirst",
            options: {
              cacheName: "mypwa-cache-v3",
            },
          },
        ],
      },
    }),
  ],
});

如果我理解正确的话，它会从网络获取数据，但是当我离线时，它会从缓存获取数据。但离线选项无法从缓存加载数据。 我哪里错了？

Answer 1

您似乎正在捕获外部请求。如果它是本地的，请使用本地路径引用它。否则，请查看下面链接的官方文档上的缓存外部资源。看来您可能缺少一些 TTL 详细信息。

https://vite-pwa-org.netlify.app/workbox/generate-sw.html