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.