Custom Offline Fallback Page with create-react-app and workbox-webpack-plugin

Question

I need a custom-offline-page to be shown everytime I am offline irrespective of the precached data.

I am using create-react-app and workbox-webpack-plugin

I tried changing NavigationFallback to offline.html but everytime I reload the page when offline it displays the index.html page and does not show offline.html.

Can someone help me adding custom offline fallback page?

package.json

below is my package.json screenshot
"dependencies": {
    "@babel/core": "7.1.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "@svgr/webpack": "2.4.1",
"availity-reactstrap-validation": "^2.2.1",
"aws-amplify": "^1.1.6",
"axios": "^0.18.0",
"axios-mock-adapter": "^1.15.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.4",
"babel-plugin-named-asset-import": "^0.2.2",
"babel-preset-react-app": "^5.0.3",
"bfj": "6.1.1",
"bootstrap": "^4.1.3",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"classnames": "^2.2.6",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.6.0",
"eslint-config-react-app": "^3.0.3",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.1",
"eslint-plugin-react": "7.11.1",
"file-loader": "2.0.0",
"firebase": "^5.5.3",
"font-awesome": "^4.7.0",
"fs-extra": "7.0.0",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
"mini-css-extract-plugin": "0.4.3",
"moment": "^2.22.2",
"object-assign": "^4.1.1",
"offline-js": "^0.7.19",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.1.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.0.6",
"postcss-safe-parser": "4.0.1",
"prop-types": "^15.6.2",
"qrcode.react": "^0.8.0",
"react": "^16.5.2",
"react-app-polyfill": "^0.1.3",
"react-dev-utils": "^6.0.4",
"react-dom": "^16.5.2",
"react-multistep": "^3.2.3",
"react-overlay-loader": "0.0.3",
"react-plx": "^1.3.9",
"react-redux": "^5.0.7",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.3.1",
"react-router-redux": "^5.0.0-alpha.9",
"react-seo": "^1.0.11",
"react-share": "^2.3.1",
"react-telephone-input": "^4.73.2",
"react-toastify": "^4.3.2",
"reactstrap": "^6.4.0",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"resolve": "1.8.1",
"sass-loader": "7.1.0",
"serve": "^10.0.2",
"style-loader": "0.23.0",
"terser-webpack-plugin": "1.1.0",
"url-loader": "1.1.1",
"webpack": "4.19.1",
"webpack-dev-server": "3.1.9",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.2"

}

Answer 1

If you are referring to navigateFallback property to pre-cached the data, here is the documentation on how to used it:

sw-precache

navigateFallback [String] Sets an HTML document to use as a fallback for URLs not found in the sw-precache cache. This fallback URL needs to be cached via staticFileGlobs or dynamicUrlToDependencies otherwise it won't work.

// via staticFileGlobs
staticFileGlobs: ['/shell.html']
navigateFallback: '/shell.html'

// via dynamicUrlToDependencies
dynamicUrlToDependencies: {
  '/shell': ['/shell.hbs']
},
navigateFallback: '/shell'

This comes in handy when used with a web application that performs client-side URL routing using the History API. It allows any arbitrary URL that the client generates to map to a fallback cached HTML entry. This fallback entry ideally should serve as an "application shell" that is able to load the appropriate resources client-side, based on the request URL.

Note: This is not intended to be used to route failed navigations to a generic "offline fallback" page. The navigateFallback page is used whether the browser is online or offline. If you want to implement an "offline fallback", then using an approach similar to this example is more appropriate.

Default: ""