CODEWITHSUNDEEP
javascriptprogressive-web-apps
poa
poa

Reputation: 101

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?

Upvotes: 3

Views: 2969

Answers (1)

Rounin
Rounin

Reputation: 29453

Depending on how you fetch your user settings, you can dynamically write your WebManifest as a Data URI, so that the correct WebManifest is already being referenced as the page loads and doesn't need to be fetched separately:

<link rel="manifest" href='data:application/manifest+json,{"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}' />

Upvotes: 2

Related Questions