App manifest

ssssadsadasd · 2025-07-29T09:03:30.854+00:00

I want to use the app manifest feature to have my app as a pwa.where should the manifest json be located so that I can enter the url in the "App Manifest" field? I mean where should I save it as a file.thanks

ssssadsadasd

4 months ago

I want to use the app manifest feature to have my app as a pwa.
where should the manifest json be located so that I can enter the url in the "App Manifest" field? I mean where should I save it as a file.

thanks
Andreas Møller

4 months ago

You can host it anywhere as long as it is publicly accessible
ssssadsadasd

4 months ago

@Andreas Møller so even sth like supabase, right?
also, if I dont offline capability (and thus dont need to add service workers) do I have anything else to do to make the app a pwa? thanks
ssssadsadasd

4 months ago

@Andreas Møller just wanted to confirm this if possible? thanks
salma

4 months ago

Yes, you could store it in Supabase, as long as it is publicly accessible
ssssadsadasd

4 months ago

@salma thanks.
hmm it seems that when I enter the url andthe nrefresh the page the value is still default and not the one i entered before
salma

4 months ago

App manifest looks right to me?
Or is that before you refresh
ssssadsadasd

4 months ago

that is before
@ssssadsadasd
@Andreas Møller so even sth like supabase, right?
also, if I dont offline capability (and thus dont need to add service workers) do I have anything else to do to make the app a pwa? thanks
lennartblmn

4 months ago

You needs some meta tags if you don't have them already
@ssssadsadasd
@salma thanks.
hmm it seems that when I enter the url andthe nrefresh the page the value is still default and not the one i entered before
salma

4 months ago

Hmm I can't recreate this, do you see any console errors?
Tod

4 months ago

Great job @salma! Your contribution to the Nordcraft Community just made you advance to Community Level 14! 🌲
@salma
Hmm I can't recreate this, do you see any console errors?
ssssadsadasd

4 months ago

I refreshed the page and it is working now. or I disconnected my vpn not sure
@lennartblmn
You needs some meta tags if you don't have them already
ssssadsadasd

4 months ago

hey @ should I add the metatags in each page? how should they look like? thanks
lennartblmn

4 months ago

you can add them there, but you could also make a component like this and paste it on every site
message.txt
lennartblmn

4 months ago

I actually don't think you need to add this on every page, just the pages users might be one when they want to install the pwa
ssssadsadasd

4 months ago

@ when you say "add this" what do you mean exactly? how does this relate to the manifest.json? should this json and the manifest be in an element or in the page meta? would be great if you could create a sample app showing this if possible. this is an example manifest

{
"short_name": "MDN",
"name": "MDN Web Docs",
"icons": [
{
"src": "/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

thanks
lennartblmn

4 months ago

the manifest is seperate from the meta tags, you need the manifest for the pwa, and you can also adjust some things in the meta tags for the pwa to be more the way you want it
@ssssadsadasd
@ when you say "add this" what do you mean exactly? how does this relate to the manifest.json? should this json and the manifest be in an element or in the page meta? would be great if you could create a sample app showing this if possible. this is an example manifest

{
"short_name": "MDN",
"name": "MDN Web Docs",
"icons": [
{
"src": "/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

thanks
lennartblmn

4 months ago

your start url is a dot. it should be /
lennartblmn

4 months ago

the manifest should be right where you put it in nordcraft - sorry if i caused a bit of confusion there
ssssadsadasd

4 months ago

@ ok thanks. and where should the meta tags file be located?
if I fix that will the app be downloadable as a pwa? i.e. will I see "install app_name" instead of "install this as an app"
ssssadsadasd

4 months ago

also if I in the src of the image I set a public image in supabase, it shows an error like this
Error while trying to use the following icon from the Manifest: https://my_domain.com/favicon-192x192.png (Download error or resource isn't a valid image)
lennartblmn

4 months ago

i assume because my_domain.com isnt your real domain.

just upload your icons and manifest to bunny cdn, and link to the complete image, not the path. In your current manifest you direct to /favicon-512x512.png, when it should be something like this

https://myfeetish.b-cdn.net/pwa/icon_512.png

so your entire manifest could look something like this

{
"name": "Senos Web App",
"short_name": "SWA",
"description": "This is my pwa description",
"start_url": "/",
"scope": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#000000",
"theme_color": "#000000",
"icons": [
{
"src": "https://myfeetish.b-cdn.net/pwa/icon_192.png", //replace with your link
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://myfeetish.b-cdn.net/pwa/icon_512.png", //replace with your link
"sizes": "512x512",
"type": "image/png"
}
]
}
lennartblmn

4 months ago

the meta tags you need are these:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Your App Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

you add them in nordcraft like this

App manifest

ssssadsadasd

Andreas Møller

ssssadsadasd

ssssadsadasd

salma

ssssadsadasd

salma

ssssadsadasd

lennartblmn

salma

Tod

ssssadsadasd

ssssadsadasd

lennartblmn

lennartblmn

ssssadsadasd

lennartblmn

lennartblmn

lennartblmn

ssssadsadasd

ssssadsadasd

lennartblmn

lennartblmn