0

Users can submit a form when offline that gets synced to my database with background sync. This is working as expected. The issue I am having is that when the user is offline and submits the form it redirects to a "site not found" error page in Chrome. The user should be redirected back to the list of all their entries. I have confirmed the page it is redirecting to is cached.

Server Worker file:

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

const CACHE = "example-offline";
const QUEUE_NAME = "bgSyncQueue";

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

workbox.routing.registerRoute(
  new RegExp("/*"),
  new workbox.strategies.NetworkFirst({
    cacheName: CACHE,
  })
);

const bgSyncPlugin = new workbox.backgroundSync.BackgroundSyncPlugin(
  QUEUE_NAME,
  {
    maxRetentionTime: 24 * 60, // Retry for max of 24 Hours (specified in minutes)
  }
);

workbox.routing.registerRoute(
  new RegExp("^https://example.com/[a-zA-Z]+/journal"),
  new workbox.strategies.NetworkOnly({
    plugins: [bgSyncPlugin],
  }),
  "POST"
);
doobe01
  • 1
  • 2
  • How are you triggering the redirect? – abraham Apr 08 '21 at 12:22
  • The redirect is in my controller. Using the Laravel framework. I can tell it is being redirected to the correct page but some reason it is not using the cached page. – doobe01 Apr 09 '21 at 14:33

1 Answers1

0

The route for the redirect page should have a strategy like CacheOnly or StaleWhileREvalidate. The message you're getting shows that the browser is trying to reach the network to get the page.

pl4n3th
  • 121
  • 3
  • I have tried this and it still does not work. `workbox.routing.registerRoute( new RegExp("^https://example.com/[a-zA-Z]+/journal"), new workbox.strategies.StaleWhileRevalidate({ cacheName: CACHE, }), );` – doobe01 Apr 14 '21 at 23:46