How to Pre-cache rendered Django views with Workbox (URL Routing)

I'm using Workbox to pre-cache files for my Django Site. But I'm struggling to setup the URL routing so that workbox will pre-cache fully rendered HTML Pages.

Anything I put directly into the serviceworker.js will properly cache the page AFTER I visit it (Making it available offline later) like this:

// serviceworker.js
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

BASE_URL = location.protocol + "//" + location.host

workbox.routing.registerRoute(
new RegExp(BASE_URL+'/pricing/'),
  workbox.strategies.staleWhileRevalidate({
      cacheName: 'pricing-cache', // Use a custom cache name.
  })
);

workbox.precaching.precacheAndRoute([])

The Problem: The following code properly injects FILES I want pre-cache into my service worker. BUT How do I modify the code below to pre-cache RENDERED HTML PAGES (along with the page's dependency like .js and .css) as rendered through Django's Views?

// This file resides in [root directory]/GulpApp/Gulpfile.js:

    gulp.task('service-worker', () => {
      return workboxBuild.injectManifest({
        maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,
        swSrc: '../browsepagesAPP/templates/browsepages/workbox-sw.js',
        swDest: '../browsepagesAPP/templates/browsepages/serviceworker.js',
        globDirectory: '../browsepagesAPP/',
        globPatterns: [
          '**\/*.{js,css}',
        ],
        globIgnores: ['app-assets\/**']
      }).then(({count, size, warnings}) => {
        // Optionally, log any warnings and details.
        warnings.forEach(console.warn);
        console.log(`${count} files will be precached, totaling ${size} bytes.`);
      });
    });

I'm sure that my setting for globDirectory is wrong. And since I'm using Djangos URL routing to render views I suspect I'll need to make axios call to that view? This is where the solution becomes unclear to me...

Thank you in advance for your help!