无法将动态生成的可缓存链接数组传递给Service Worker

Question

How do I pass a programmatically populated array of links to a service worker script for caching?

I am generating the array in cachelist.js like this:

const fs = require('fs');
const path = require('path');
require('dotenv').config();

var cachedItems = ['/'];
function walkSync(currentDirPath, callback) {
    fs.readdirSync(currentDirPath).forEach(function (name) {
        var filePath = path.join(currentDirPath, name);
        var stat = fs.statSync(filePath);
        if (stat.isFile()) {
            callback(filePath, stat);
        } else if (stat.isDirectory()) {
            walkSync(filePath, callback);
        }
    });
}

walkSync('./pages/', function(filePath, stat) {
  cachedItem = filePath.substr(5);
  if(cachedItem.indexOf('_') == -1) {
    cachedItems.push(cachedItem);
  }
});

module.exports = { cachedItems };

And then I'm trying to use this cachedItems array in /offline/serviceWorker.js as follows:

const URLSTOCACHE = require("../cachelist.js");
const CACHE_NAME = "version-0.0.46";

// Call install event
self.addEventListener("install", e => {
  e.waitUntil(
    caches
    .open(CACHE_NAME)
    .then(cache => cache.addAll(URLSTOCACHE))
    .then(() => self.skipWaiting())
  );
});

// Call fetch event
self.addEventListener("fetch", e => {
  e.respondWith(
    fetch(e.request).catch(() => caches.match(e.request))
  )
});

However, this fails with an " Uncaught ReferenceError: require is not defined. " Any workaround?

Answer 1

require isn't a built-in browser-side utility. There are various libraries (like RequireJS) and bundlers (which rewrite the require call), but unless you're using one of those, you can't use require browser-side.

If your goal is to read that file in the service worker and add the URLs in it to the cache, use fetch to load it, and then use thme in addAll .