service worker not update if content update from api

[aldytmra]

why my service worker not update if content update from api? i use getserversideprops

[harshzalavadiya]

hi @aldytmra,

Might be because of caching strategy defaults to StaleWhileRevalidate if you always want fresh data then using NetworkFirst might be better choice you can customize and pass your own runtimeCaching option in next.config.js

[aldytmra]

hi @harshzalavadiya
I already used runtime caching but it still doesn't work
`const withImages = require('next-images')
const withFonts = require('next-fonts');
const withPWA = require('next-pwa')
const withPlugins = require('next-compose-plugins');

module.exports = withPlugins([
[withPWA, {
pwa: {
dest: 'public',
// clientsClaim: true,
// skipWaiting: true,
runtimeCaching: [
{
urlPattern: /^https://fonts.(?:googleapis|gstatic).com/./i,
handler: 'CacheFirst',
options: {
cacheName: 'google-fonts',
expiration: {
maxEntries: 4,
maxAgeSeconds: 365 * 24 * 60 * 60 // 365 days
}
}
},
{
urlPattern: /^https://use.fontawesome.com/releases/./i,
handler: 'CacheFirst',
options: {
cacheName: 'font-awesome',
expiration: {
maxEntries: 1,
maxAgeSeconds: 365 * 24 * 60 * 60 // 365 days
}
}
},
{
urlPattern: /.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
handler: 'NetworkFirst',
options: {
cacheName: 'static-font-assets',
expiration: {
maxEntries: 4,
maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
}
}
},
{
urlPattern: /.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
handler: 'NetworkFirst',
options: {
cacheName: 'static-image-assets',
expiration: {
maxEntries: 64,
maxAgeSeconds: 24 * 60 * 60 // 24 hours
}
}
},
{
urlPattern: /.(?:js)$/i,
handler: 'NetworkFirst',
options: {
cacheName: 'static-js-assets',
expiration: {
maxEntries: 16,
maxAgeSeconds: 24 * 60 * 60 // 24 hours
}
}
},
{
urlPattern: /.(?:css|less)$/i,
handler: 'NetworkFirst',
options: {
cacheName: 'static-style-assets',
expiration: {
maxEntries: 16,
maxAgeSeconds: 24 * 60 * 60 // 24 hours
}
}
},
{
urlPattern: /.(?:json|xml|csv)$/i,
handler: 'NetworkFirst',
options: {
cacheName: 'static-data-assets',
expiration: {
maxEntries: 16,
maxAgeSeconds: 24 * 60 * 60 // 24 hours
}
}
},
{
urlPattern: /.*/i,
handler: 'NetworkFirst',
options: {
cacheName: 'others',
expiration: {
maxEntries: 16,
maxAgeSeconds: 24 * 60 * 60 // 24 hours
}
}
}
]
},
}],
[withImages],
[withFonts]
]);
// module.exports = withImages(withFonts())`

[shadowwalker]

I need more clarification before I could help, what is not updated?

[aldytmra]

I made a blog with a list of articles on its main page. list of articles obtained from the API. when I have added a recent article in the API, but on the blog the list is not updated

[shadowwalker]

Still not enough information, is it under dev or prod mode? How do you call your API, do you need to refresh or call the API again to fetch the latest data?