Vite plugin pwa can't cache fetch requests

Question

I'm trying make a full offline pwa and test it on IOS. I made a website with yarn create vite and added vite-plugin-pwa When I try to start pwa on IOS, I got all local files(images and index.html), but cant use fetch to 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",
            },
          },
        ],
      },
    }),
  ],
});

If I understood correctly, it will get data from network, but when I offline, it will get data from cache. But offline option can't load data from cache. Where I'm wrong?

Answer 1

It looks like you’re catching an external request. If it’s meant to be local, refer to it with a local path. Otherwise, take a look at the caching external resources on the official docs at the link below. It looks like you could be missing some TTL details.

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