How can I use dynamic manifest file in a PWA?

We have a SaaS platform and need to be able to load different manifest files depending on user settings. The user settings are fetched once the app is started and once this is done I want to load the correct manifest. However, this is not working. I have tried several different ways of doing this but I can't get the beforeinstallprompt event to fire.

If I load a manifest in my index.html and then don't change the manifest href it seems to work fine every time.

I have tried to leave the href empty on the manifest element in the index.html and then to update it later, but when I do this the beforeinstallprompt is not fired.

In my index.html:

<link rel="manifest" href="">

or

<link rel="manifest" href="/manifest.json">

In my bootstrap js file to update the href to the manifest, once I know which manifest file to load:

var href = "https://xxx.s3.eu-central-1.amazonaws.com/sites/1/manifest2.json";
var manifestJson = {
  "name": "test in code",
  "short_name": "test in code",
  "icons": [
    {
      "src": "https://xxx.s3.eu-central-1.amazonaws.com/sites/0/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "https://xxx.s3.eu-central-1.amazonaws.com/sites/0/icons/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "https://xxx.s3.eu-central-1.amazonaws.com/sites/0/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "http://localhost:9000/home/",
  "display": "standalone",
  "background_color": "#2B3D4B",
  "theme_color": "#00afec",
  "prefer_related_applications": false
};
var stringManifest = JSON.stringify(manifestJson);
var blob = new Blob([stringManifest], {type: 'application/json'});
var manifestURL = URL.createObjectURL(blob);

// I have tried both ways of updating the manifest below

// $("head").find("link[rel='manifest']").attr("href", manifestURL);
$("head").find("link[rel='manifest']").attr("href", href);

window.addEventListener('beforeinstallprompt', function(event) {
    console.log("poa: \nxxxxxxxxxx BEFOREINSTALLPROMPT xxxxxxxxxxx\n\n");
    $("body").addClass("hypo-install-prompt");

    // Save the event for later use (when the user clicks an install button)
    app.cache.beforeinstallprompt = event;
});

navigator.serviceWorker.getRegistrations().then(function(registrations) {
    console.log("Unregister ServiceWorker", registrations);
    for (var i = 0; i < registrations.length; i++) {
       var registration = registrations[i];
       registration.unregister();
    }
});

navigator.serviceWorker.register('/home/serviceWorker.js', { scope: '/home/' }).then(function(registration) {
   // Registration was successful
   console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
   console.log('ServiceWorker registration failed: ', err);
});

I know that this is a fairly common scenario and that many people have solved it but nothing worked for me so far. Anyone got a tip?