How to generate and place a blob file on a relative path?

Question

While building the "Add to Homescreen" feature on a relative URL, I am generating my manifest.json dynamically and placing it via creating a Blob URL and adding it to the href attribute of the link[rel="manifest"].

The place where I am stuck is, my generated manifest URL points to something like: https://example.com/jbskdjcs9987r38943nsmd instead what I want is: https://example.com/pwa/jbskdjcs9987r38943nsmd which is nothing but wanting the blob file to be placed on a relative URL.

Below is the example of how I am generating a blob file:

let myManifest = {
  "name": "Example PWA",
  "short_name": "PWA",
  "description": "Example PWA",
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "icons": [
    {
        "src": "images/android-chrome-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "images/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
  ]
}


const stringManifest = JSON.stringify(myManifest);
const blob = new Blob([stringManifest], {type: 'application/json'});
const manifestURL = URL.createObjectURL(blob);
console.log(manifestURL);
//document.getElementById('my-manifest-placeholder').setAttribute('href', manifestURL);

I thought of doing something like:

const myURL = new URL('/pwa/','https://example.com');
const manifestURL = myURL.createObjectURL(blob);

But this does not work as createObjectURL is a URL's Static Method.

Any suggestion that would let me generate and place my manifest.json file dynamically on a relative URL would be appreciated.

Thanks in advance.

What's the point of doing this? Dynamically assigning the ``? So, you are saying you want to do like `document.head.querySelector('link[rel=manifest]').href = blobURL`? Question is not clear. Reason, even less. — StackSlave, Feb 21 '20 at 09:32
Basically, manifest.json which I have shown here is a simple one. My actual manifest.json file consists of tenant-specific icons and names, which is the reason I want to create my manifest blob dynamically every time my tenant changes. For e.g. https://tenant1.example.com has other icons and names and https://tenant2.example.com has other. — Rahul Sharma, Feb 21 '20 at 11:23
Can't say that I've tried it, but have you tried ``? Then you could use PHP to `echo json_encode($objectOrAssocArray);`. — StackSlave, Feb 22 '20 at 00:01

score 1 · Accepted Answer · answered Mar 02 '20 at 06:50

Regarding the relative URL, I couldn't figure out a way to dynamically place the blob file on a relative URL but worked around using Data URL approach.

Below is an example of the Data URL approach:

const stringManifest = JSON.stringify(myDynamicManifest);
const blob = new Blob([stringManifest], {type: 'application/json'});
// const manifestURL = URL.createObjectURL(blob);
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(){
  document.getElementById('my-manifest-placeholder').setAttribute('href', reader.result);
}

How to generate and place a blob file on a relative path?

1 Answers1