Runtime Cache is not working

[fawwaz]

Summary

Hi I'm new to PWA / Workbox. So I'm not sure if it is a bug or not. I just want to ask a question if I'm configuring my next-pwa correctly or not.

So I want to cache an api from my Backend service that hosted on different domain. I cloned cache.js and add my own entry. However it seems that it doesn't use my configuration at all. Please clone this repository : https://github.com/fawwaz/next-pwa-demo

Versions

• next-pwa: 5.4.4
• next: 11.1.3

How To Reproduce

Steps to reproduce the behavior:

0. Clone https://github.com/fawwaz/next-pwa-demo
1. run yarn in the root
2. yarn build && yarn start
3. open localhost:3000
4. Click the button to trigger api request.
5. Set the network to offline
6. Click the button again to trigger api request
7. Service worker failed to respond it with cached request.

Expected Behaviors

Service worker should intercept/respond the request using cached response from previous request.

Link to minimal reproduce setup repository if any.

https://github.com/fawwaz/next-pwa-demo

Screenshots

Demo

https://user-images.githubusercontent.com/1295143/147207322-309a1b19-bc41-4a0c-be7f-3e62aa85b304.mp4

Additional Context

file: next.config.js

const withPWA = require("next-pwa");
const runtimeCaching = require("./config/cache");

module.exports = withPWA({
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
    mode: "development",
    disable: process.env.NODE_ENV !== "production",
    runtimeCaching,
  },
});

file: cache.js

module.exports = [
  {
    urlPattern: "https://60a3771d7c6e8b0017e26fe5.mockapi.io/todo",
    handler: "StaleWhileRevalidate",
    options: {
      cacheName: "todo",
      expiration: {
        maxEntries: 4,
        maxAgeSeconds: 60, // 60 seconds
      },
    },
  },
];

[danboyle8637]

I'm new to using service workers as well. But I created a custom service worker file in a /worker dir on the root of the project.

Then I just handle the requests I want to in the fetch listener. I cache api responses and even create new ones... it is pretty powerful.

[linchen5913]

pwa:{mode: "development",
    disable: process.env.NODE_ENV !== "production",}

I believe you just disabled the pwa.