Feature request: display a custom error page when a page is unavailable offline [gatsby-plugin-offline]

[bjatwork]

When i use "gatsby plugin offline" this work good in offline mode until user click page that he do not visit before. Then browser display no connection info and app crash.

What is the best approach to prevent for this?

For example if client click link to the subpage that he do not have in cache i want want to display mesage "This page is not available in offline mode" and block moving to this location.

Where can i find sample code to do this?

[wardpeet]

@davidbailey00 do we support this? I know workbox does https://developers.google.com/web/tools/workbox/guides/advanced-recipes#provide_a_fallback_response_to_a_route. Unsure if it's configurable with our offline plugin.

[vtenfys]

We don't currently have a way to configure a custom offline error page, so this behaviour is expected. You can use the new precachePages option in version 3 of the plugin to ensure that specific pages are present in the cache if you desire; see the README for details of this: https://www.gatsbyjs.org/packages/gatsby-plugin-offline/

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[kirushenski]

So is it still not possible to add custom offline page instead of "dino page" for better UX? My idea was to add global catch handler on requests and send offline page from cache in response:

1. Create new page at pages/offline.tsx
2. Modify plugin config at gatsby-config.js to precache this page and append custom service worker code:

{
    resolve: 'gatsby-plugin-offline',
    options: {
      appendScript: 'src/utils/sw.ts',
      precachePages: ['/offline'],
    },
},

3. Add catch handler in src/utils/sw.ts (not sure about this, maybe we need to filter navigation requests first somehow):

workbox.routing.setCatchHandler(() => {
  // ignoreSearch to skip WB_REVISION query
  return caches.match('/offline/index.html', { ignoreSearch: true })
})

But this approach doesn't work because offline/index.html is not added to Cache Storage like it was already pointed in issue #22439. In source code we can see that all HTML files except offline-plugin-app-shell-fallback/index.html are ignored:

gatsby/packages/gatsby-plugin-offline/src/gatsby-node.js

Lines 110 to 114 in 1cfa511

	const globPatterns = files.concat([
	// criticalFilePaths doesn't include HTML pages (we only need this one)
	`offline-plugin-app-shell-fallback/index.html`,
	...criticalFilePaths,
	])

If only we could add another exception in this array via some option... I was trying to add globPatterns: ['**/*'], in config just for testing purposes and it works indeed. But overriding this low level option is not a solution because it ended with all assets were added in precache manifest.

[dariuszpaluch]

Some updates in display custom offline page?