I have created a PWA sample app using Ionic 4 and it is working fine. My problem here is how can I change the splash screen?
Note: I can see the splash screen on the PWA app. But I don't know how to change it on below file?
manifest.json
{
"name": "app",
"short_name": "app",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
PWAs have no concept of a launch image in the manifest.json. The launch image is generated by the browser using an appropriate icon and the background color property. If you want to change the splash screen, you need to change the icons and images.
For reference: https://developers.google.com/web/fundamentals/web-app-manifest/
Related
I'm trying to host a webApp inside a subfolder of my host. I uploaded all the contents of the build/web folder, but in the console I get the error:
how can i set url of my subfolder?
{
"name": "pagamento",
"short_name": "pagamento",
"start_url": "./pagamenti",
"display": "standalone",
"background_color": "#0175C2",
"theme_color": "#0175C2",
"description": "A new Flutter project.",
"orientation": "portrait-primary",
"prefer_related_applications": false,
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "icons/Icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/Icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
but it did not work
thank you and happy 2023 to all.
I've followed all the required steps, made sure everything that should be in the manifest is there:
start url
name
shortname
description
Scope is set to / and all the icons are there.
{
"description": "C5 manifest",
"name": "C5",
"short_name": "c5",
"icons": [
{
"src": "/icons/icon_512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_120x120.png",
"sizes": "120x120",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_64x64.png",
"sizes": "64x64",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_32x32.png",
"sizes": "32x32",
"type": "image/png",
"purpose": "any maskable"
}
],
"start_url": "https://c5.kwyjibo.app/",
"display": "standalone",
"background_color": "#FF13DB",
"theme_color": "#FF7D13",
"lang": "en"
}
I've also used Lighthouse and it passes all their checks. However, the "Add to home" popup does not get shown when opening it in either Chrome or Firefox on Android.
I've added event listeners for both load and beforeinstallprompt events, and it does look like they are called.
Can anyone perhaps shed some light? I'm at my wits end. The site is https://c5.kwyjibo.app/
For anyone else finding this. The problem was that the service worker did not support offline. Changing it to support offline and making sure I have an offline.html file in the root solved the problem.
I'm facing a huge technical problem. I can't see "add to home screen". However, I did follow the installation guidelines.I want to know if I have created a small unintended malfunction and why it doesn't show up.
Link to the site : https://www.bclover.net
I apologize in advance, the site is in French. I hope that won't be too much of a hindrance to your assistance.
Thank you
EDIT :
Manifest.json
{
"lang": "fr",
"dir": "ltr",
"name": "Black Clover FR",
"short_name": "Bclover",
"theme_color": "#000000",
"background_color": "#000000",
"display": "standalone",
"scope": "/",
"start_url": "/?utm_source=pwa",
"icons": [
{
"src": "styles/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "styles/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "styles/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "styles/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "styles/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "styles/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "styles/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "styles/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
Lighthouse
I checked out your website and saw error in the console that says sw.js file is responding with 404 error by the server:
So you have to checkout if the file exists on your server.
I recommend you to follow this tutorial (web.dev) by Google - well written.
In your case you have to register service worker which is shown how to do that in this article (web.dev)
And I recommend you to use Workbox library (this from Google too) to ease the pain while making PWA web app
This is my manifest.json
{
"name": "XXXXX",
"short_name": "XXXXX",
"start_url": "/",
"gcm_sender_id": "XXX",
"background_color": "#dfdfdf",
"display": "standalone",
"orientation": "landscape",
"icons": [
{
"src": "\/icons\/android-chrome-128x128.png",
"sizes": "128x128",
"type": "image\/png"
},
{
"src": "\/icons\/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image\/png"
},
{
"src": "\/icons\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png"
},
{
"src": "\/icons\/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image\/png"
}
]
}
This web app should always be in landscape mode, but it opens in portrait mode.
There is a question present here with the same problem, but none of the answers are solving my problem
I just tried "orientation": "landscape" on a sample app, and it seems to work correctly. You can see the code for the sample here
Based on your description, there are two possibilities why this may have failed at the time. First, it may have been a bug in Chrome that prevented this from happening. And second, the escaping of the forward slashes in your icons properties of your manifest may have caused issues parsing the manifest.
For example, you icons property should be:
"orientation": "landscape",
"icons": [
{
"src": "/icons/android-chrome-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/icons/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
}
]
I tried the standalone mode for a web application in the manifest.json file, but the iPhone just opens Safari to display the website. So I didn't found this option very useful. I put the application back in the browser mode, but no effect, when clicking on the icon it is opened as standalone. So here is it a local cache issue only ? Can test on https://tokeeen.com
{
"doc": "https://developer.mozilla.org/fr/docs/Web/Manifest",
"version": "0.10.1",
"name": "",
"short_name": "Tokeeen",
"lang": "en",
"background_color": "#000000",
"display": "browser",
"scope": "/",
"start_url": "./?utm_source=manifest",
"splash_screens": [],
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}