aileen
commented
5 years ago This issue is related to https://github.com/gatsbyjs/gatsby/issues/10036 which is not yet fixed in Gatsby itself.
We keep having issues with Safari with the docs site due to the service worker setup serving stale content. It's not being cleared at all when new content is pushed and it's very difficult to clear stale content manually (no luck with cache clear, deletion of indexed db records, or running with dev tools open and cache disabled).
We should consider changing the service worker strategy to fetch from network with local fallback? That's generally the approach taken for production sites where content is expected to change and would solve the Safari problems and the need to force a refresh in Chrome.
👉 https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ 👉 https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline
It appears that we can change the strategy for certain parts of the site, which need to be defined. See default config, that Workbox (underlying SW module used in gatsby-plugin-offline):
const options = {
importWorkboxFrom: `local`,
globDirectory: rootDir,
globPatterns,
modifyUrlPrefix: {
// If `pathPrefix` is configured by user, we should replace
// the default prefix with `pathPrefix`.
"/": `${pathPrefix}/`,
},
cacheId: `gatsby-plugin-offline`,
// Don't cache-bust JS or CSS files, and anything in the static directory,
// since these files have unique URLs and their contents will never change
dontCacheBustUrlsMatching: /(\.js$|\.css$|static\/)/,
runtimeCaching: [
{
// Use cacheFirst since these don't need to be revalidated (same RegExp
// and same reason as above)
urlPattern: /(\.js$|\.css$|static\/)/,
handler: `cacheFirst`,
},
{
// Add runtime caching of various other page resources
urlPattern: /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
handler: `staleWhileRevalidate`,
},
{
// Google Fonts CSS (doesn't end in .css so we need to specify it)
urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/,
handler: `staleWhileRevalidate`,
},
],
skipWaiting: true,
clientsClaim: true,
}
koreyboone
This seems to happen only after a fresh build and on the first load. A forced refresh fixes this situation temporary.