-
-
Notifications
You must be signed in to change notification settings - Fork 81
Fix errors on first load / Change SW strategy #61
Comments
This issue is related to gatsbyjs/gatsby#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/ 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,
} |
@AileenCGN This should work: https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-then-network |
Gatsby offline plugin is updated and closed the issue gatsbyjs/gatsby#10036 (comment) Will update the dependencies shortly and see if that solved our issues without changing the strategy. |
refs TryGhost/docs#61 Updated all dependencies to the latest version, which includes an update to the gatsby-offline-plugin that _might_ fix errors with blank pages after initial load after an update.
refs #61 Updated all dependencies to the latest version, which includes an update to the gatsby-offline-plugin that _might_ fix errors with blank pages after initial load after an update.
This should - hopefully - be solved now with TryGhost/gatsby-starter-ghost@9ab4a78 and 279bd32 which include dependency updates for the gatsby-plugin-offline. According to the related issue in Gatsby
This is also what I experienced and am therefor optimistic about this fix. Safari:
It would be good to get some feedback regarding this issue with Safari, which I wasn't able to test:
Chrome:
|
I close this issue for now, but we need to keep an 👀 on it. I will reopen it when it turns out to still be causing problems. |
This seems to happen only after a fresh build and on the first load. A forced refresh fixes this situation temporary.
The text was updated successfully, but these errors were encountered: