Redirect To Offline Page

Question

I have a React app created by using create-react-app. By default, this tool creates a serviceWorker.js file for us and I am using this to register a service-worker. Furthermore, the documents suggest using google's workbox wizard to create a service-worker.js used to manage my website for offline purposes. The goal is for me to store an offline.html page in the browsers cache and whenever there is no online connection, render the cached offline.html page.

I am successful in storing the offline.html in cache as you can see below.

However, I am having trouble grabbing this file and rendering it whenever there isn't a connection. Here is my code:

workbox-config.js:

module.exports = {
  "globDirectory": "build-development/",
  "globPatterns": [
    ".offline/*.html",
    "external/logo_purple.png"
  ],
  "swDest": "build-development/sw.js",
  "swSrc": "src/sw.js",
  "injectionPointRegexp": /(const precacheManifest = )\[\](;)/
};

sw.js (created by running the workbox config):

importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.1.0/workbox-sw.js");

const precacheManifest = [];

workbox.precaching.precacheAndRoute(precacheManifest);

const dataCacheConfig = {
  cacheName: 'offline'
};

workbox.routing.registerRoute("http://localhost:4000/.offline/offline.html", workbox.strategies.cacheFirst(dataCacheConfig), 'GET');

Any ideas?

Redirect To Offline Page

0 Answers0