Workbox Stale-while-revalidate strategy always returns response from network call instead of cache - service-worker

Question

I am using workbox-webpack-plugin, below is code in webpack config
new GenerateSW({
runtimeCaching: [
{
urlPattern: new RegExp('^https://devapi\.mysite\.xyz/'),
handler: 'staleWhileRevalidate',
options: {
cacheableResponse: {
statuses: [200]
}
}
}
]
})
Below is flow of stale while revalidate strategy as per google doc
I am calling API from cross domain, what I observed is each time response is given back to UI not from cache but from network call response.
I am expecting when same API is called 2nd time, I should get response from cache and then cache should be updated from response of network call.

Answer 1

I think all the info in this "Handle Third Party Requests" guide should help.
In particular, make sure that your remote server is using CORS, or else you'll get back a response that has a status of 0. You're explicitly configuring the cacheableResponse plugin to only cache responses with a status of 200.

Answer 2

For anyone stumbling upon this now, the correct snippet should be.
Workbox listens to StaleWhileRevalidate not staleWhileRevalidate.
new GenerateSW({
runtimeCaching: [
{
urlPattern: new RegExp('^https://devapi\.mysite\.xyz/'),
handler: 'StaleWhileRevalidate',
options: {
cacheableResponse: {
statuses: [200]
}
}
}
]
})