I need to create a web manifest dynamically. I decided to include it as a base64 string. This is the code:
<link rel="manifest" href="data:application/manifest+json;base64,${await
generateManifestBase64(site.site_view.site)}">
If the string interpolation looks funny, that's because this is within a large template literal.
When I test the page locally, it seems to be parsing the manifest correctly for the most part. This is what I see in the browser dev tools:
{
"name": "lemmy-dev",
"description": "A link aggregator for the fediverse",
"start_url": "/",
"display": "standalone",
"background_color": "#222222",
"icons": [
{
"sizes": "72x72",
"type": "image/png",
"src": "data:image/png;base64,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"
},
// a couple other icons that I can't include due to the base64 strings being so big
]}
Despite seeming to have been parsed correctly, the dev tools give me the error property 'start_url' ignored, URL is invalid
. I should note that despite the manifest being dynamically generated, I always want the start URL to be the site's root URL. Relative to the directory the node process is running in, the file that generates the manifest is at ./src/server/index.tsx
. What could be causing this issue?
I managed to fix it by using the full URL for the start URL instead of a relative path, i.e. "https://my-domain/" instead of "/".