Service worker not caching https responses - vue.js

Question

I have a service worker for a vue pwa. Its able to cache assets but I cant figure out how to cache http responses. According to this tutorial I am supposed to see api-cache in Cache Storage list
vue.config.vue
module.exports = {
pwa: {
workboxPluginMode: "InjectManifest",
workboxOptions: {
swSrc: "./src/sw.js",
swDest: "service-worker.js",
navigateFallback: "/index.html",
runtimeCaching: [
{
urlPattern: new RegExp(
"^https://<api>.<domain>.co.za/"
),
handler: "networkFirst",
options: {
networkTimeoutSeconds: 2000,
cacheName: "api-cache",
cacheableResponse: {
statuses: [0, 200]
}
}
}
]
}
}
};
registerServiceWorker.js
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'App is being served from cache by a service worker.'
)
},
registered (registration) {
setInterval(() => {
registration.update();
}, 1000 * 60 * 60);
console.log('Service worker has been registered.')
},
cached () {
console.log('Content has been cached for offline use.')
},
updatefound () {
console.log('New content is downloading.')
},
updated (registration) {
document.dispatchEvent(
new CustomEvent('swUpdated', { detail: registration })
);
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})
}

Answer 1

It might well be that the package #ionic/vue is the reason.
If you can, I would suggest to try to implement your PWA with workbox. It is a set of node libraries, therefore you can embed in your Vue app.
In the same article suggested in the comments, I give also an Overview about Workbox.
Some articles related to using Workbox with Vue PWA:
https://www.blog.plint-sites.nl/adding-workbox-to-a-vue-cli-pwa/
https://www.telerik.com/blogs/offline-first-vue-apps-with-hoodie-workbox