General page cache for different queries

[SahilAggarwal2004]

Let's assume that I am building a note taking application and I cached a '/notes' page which has 2 filters 'all' and 'todo'. The 2 urls formed will be '/notes?filter=all' ('/notes' also shows all notes by default) and '/notes?filter=todo' respectively.

Currently the problem with next-pwa or even with this fork is that if '/notes' page is cached only that particular page is shown when offline and if you go to '/notes?filter=todo' and reload the page, it throws the offline fallback page instead to linking it with the cached '/notes' page.

Now here if you have static queries, you can cache '/notes', '/notes?filter=all', '/notes?filter=todo' pages but it will take 3 times the necessary cache. And if you have dynamic queries, you can't even cache the pages.

So I was wondering if it is possible that all the '/notes?query=something' requests can be linked with the cached '/notes' page?

Note that I am taking about a CSR page and thus the page will be same irrespective of the filters and then the data can be fetched, or taken from localStorage (if offline) based on the filter.

[DuCanhGH]

Well it depends on whether you use InjectManifest or GenerateSW. But, looking at the question, I'm assuming you are using GenerateSW, in which case, you can do something like this:

const withPWA = require("@ducanh2912/next-pwa").default({
  dest: "public",
  extendDefaultRuntimeCaching: true,
  workboxOptions: {
    runtimeCaching: [
      {
        urlPattern: ({ request, url: { pathname }, sameOrigin }) =>
          request.headers.get("RSC") === "1" &&
          request.headers.get("Next-Router-Prefetch") === "1" &&
          sameOrigin &&
          pathname === "/notes",
        handler: "NetworkFirst",
        options: {
          cacheName: "notes-pages-rsc-prefetch",
          expiration: {
            maxEntries: 32,
            maxAgeSeconds: 24 * 60 * 60,
          },
          matchOptions: {
            ignoreSearch: true,
          },
        },
      },
      {
        urlPattern: ({ request, url: { pathname }, sameOrigin }) =>
          request.headers.get("RSC") === "1" &&
          sameOrigin &&
          pathname === "/notes",
        handler: "NetworkFirst",
        options: {
          cacheName: "notes-pages-rsc",
          expiration: {
            maxEntries: 32,
            maxAgeSeconds: 24 * 60 * 60,
          },
          matchOptions: {
            ignoreSearch: true,
          },
        },
      },
      {
        urlPattern: ({ url: { pathname }, sameOrigin }) =>
          sameOrigin && pathname === "/notes",
        handler: "NetworkFirst",
        options: {
          cacheName: "notes-pages",
          expiration: {
            maxEntries: 32,
            maxAgeSeconds: 24 * 60 * 60,
          },
          matchOptions: {
            ignoreSearch: true,
          },
        },
      },
    ],
  },
});

Note that this only matches the page '/notes', so you'd probably want to change urlPattern. The idea remains the same, however, which is setting matchOptions.ignoreSearch to true.

Sorry for not replying, but this is because I'm not notified of the creation of a new discussion, and I've been busy with Serwist (the successor of this fork).

[SahilAggarwal2004]

Thanks a lot for helping out! Although, I figured it out and thought that ignoring every query param will be a good idea.

ignoreURLParametersMatching: [/.*/]

This is what I finally implemented

[DuCanhGH]

@SahilAggarwal2004 alright :)

[SahilAggarwal2004]

Sorry to disturb again, but I had another doubt.

I saw that in serwist, the compiled sw.js is being cached too, where it was not being cached in next-pwa. Is there any way to opt out as I don't really see any advantage of caching it since it's already installed.

Currently I am using a filter as below:
precacheEntries: self.__SW_MANIFEST.filter(({ url }) => !url.includes('/sw.js'))

Is there any better alternative available?

[DuCanhGH]

@SahilAggarwal2004 use this:

import withSerwistInit from "@serwist/next";

const withSerwist = withSerwistInit({
  cacheOnFrontEndNav: true,
  swSrc: "app/sw.ts",
  swDest: "public/sw.js",
  exclude: [/public\/sw.js/]
});

That should do it for you :) This happens because we use @serwist/webpack-plugin's InjectManifest, which creates a child compiler on Next.js's webpack compiler, whereas in next-pwa, we use workbox-webpack-plugin's GenerateSW, which creates a Rollup instance instead.

[SahilAggarwal2004]

Yeah, that seems cool! Didn't though of that

[SahilAggarwal2004]

@SahilAggarwal2004 use this:

import withSerwistInit from "@serwist/next";

const withSerwist = withSerwistInit({
  cacheOnFrontEndNav: true,
  swSrc: "app/sw.ts",
  swDest: "public/sw.js",
  exclude: [/public\/sw.js/]
});

That should do it for you :) This happens because we use @serwist/webpack-plugin's InjectManifest, which creates a child compiler on Next.js's webpack compiler, whereas in next-pwa, we use workbox-webpack-plugin's GenerateSW, which creates a Rollup instance instead.

Unfortunately, this is not working :(

[SahilAggarwal2004]

exclude: ['../public/sw.js']

This worked out! Assest name is "../public/sw.js"

[DuCanhGH]

@SahilAggarwal2004 yeah, that should also work :) I suggested using a RegExp lest that path somehow changes in the future, but that's okay.

[SahilAggarwal2004]

So stupid of me, I just realised that I was enclosing the regex in double quotes(") 😭

[DuCanhGH]

@SahilAggarwal2004

[SahilAggarwal2004]

😅